ＦＣ2ブログ用 twitter（ツイッター）ボタンやらソーシャルブックマークボタンやらの設置方法

さて、もう気付いている人も多いと思うが、このブログ大幅にデザインをリニューアルしますた！
Google様にアボセンスされた事を教訓に、明るくてクリーンな感じのデザインに！
ヘッダーには最新記事のインデックスや人気記事のランキング、そしておいらの最新のつぶやきなどを配置、そして記事の横幅や文字のサイズなどを大きくしつつ、左右に柱を設け、より便利に！

さらに、ほとんどの人は気付いていないと思うが、
記事の下にツイッターボタンやらソーシャルブックマークのボタンやらを追加したぞ〜！

ソーシャルブックマークって何？って人はこちらを参照

ツイッターって何？って人はこちらを参照

そして今回はＦＣ２ブロガーの為に、ツイッターボタンやら、ソーシャルブックマークボタンの設置方法を伝授するぞ〜！


↓これをクリック
←クリック
↑クリック↓
←クリクリ

ツイッターの公式ではそんなボタンは用意されちゃーいないので、自作で作ってみたぞ！

↓ツイッターボタンご自由にダウンロードして使ってくれ（右クリック→画像を保存）


↓そしてこちらのソースの★の部分に画像のパスを入れて使う。
<a href="http://twitter.com/home?status=<%topentry_enc_utftitle>%20<%topentry_link>" target="_blank" title="この記事をTwitterでつぶやく"><img alt="この記事をTwitterでつぶやく" src="★" width="16" height="16" /></a>

上の説明として、ツイッターは
http://twitter.com/home?status=投稿内容
というリンクで投稿できるようなので、＝の後にタイトルとURLを表示させるとツイッターボタンの完成なのだ！
<%topentry_enc_utftitle> というのはURLエンコード化(utf-8)したタイトルを表示するFC2テンプレート用変数、%20 というのはエンコードされた半角スペースで、<%topentry_link> というのはエントリーURLを表示するFC2テンプレート用変数になる。
応用すれば、他のブログでも理論は同じだな。

設置の仕方だが、たとえばこのブログの場合は、「テンプレートの設定」でHTMLの編集の中の <!--allow_comment-->〜<!--/allow_comment-->とかある辺りのとこの次ぎとかに<li>〜</li>で囲んで追加すれば、記事の下のコメントの横とかに追加できるぞ。

ソーシャルブックマークボタンは下記のタグを同じように<li>〜</li>で囲んで追加できる。

※すべてFC2ブログ用、他のブログは各説明ページを見てくれ。

ヤフーブックマーク　公式の説明ページ
<a href="javascript:void window.open('http://bookmarks.yahoo.co.jp/bookmarklet/showpopup?t='+encodeURIComponent(document.title)+'&u='+encodeURIComponent(location.href)+'&ei=UTF-8','_blank','width=550,height=480,left=100,top=50,scrollbars=1,resizable=1',0);" title="Yahoo!ブックマークに登録"><img src="http://i.yimg.jp/images/sicons/ybm16.gif" width="16" height="16" alt="Yahoo!ブックマークに登録" /></a>

はてなマーク+〜user　公式の説明ページ
<a href="http://b.hatena.ne.jp/entry/<%topentry_link>" target="_blank"><img class="b_entry" src="★" width="16" height="12" alt="このエントリーを含むはてなブックマーク" title="このエントリーを含むはてなブックマーク" /></a> <a href="http://b.hatena.ne.jp/entry/<%topentry_link>"><img src="http://b.hatena.ne.jp/entry/image/<%topentry_link>" alt="はてなブックマーク - <%topentry_title>" title="はてなブックマーク - <%topentry_title>" /></a>
★にの画像をアップロードした時のパスを入れる。

@niftyクリップ　公式の説明ページ
<a href="javascript:location.href='http://clip.nifty.com/create?url='+encodeURIComponent(location.href)+'&title='+encodeURIComponent(document.title);"><br /><img onload="this.parentNode.href=eval(this.parentNode.href.match(/^javascript:location.href=(.*)$/)[1]);" src="http://clip.nifty.com/images/addclip_icn.gif" width="16" height="16" style="border:0;" alt="@niftyクリップに追加" title="@niftyクリップに追加" /><br /></a>

livedoorクリップ　公式の説明ページ
<a href="http://clip.livedoor.com/clip/add?link=<%topentry_link>&title=<%topentry_enc_utftitle>&jump=ref" title="この記事をｌivedoorクリップに登録" target="_blank"><img src="http://parts.blog.livedoor.jp/img/cmn/clip_16_16_w.gif" width="16" height="16" alt="この記事をlivedoorクリップに登録" /></a>

Buzzurlブックマーク　公式の説明ページ
<a href="http://buzzurl.jp/entry/<%topentry_link>" title="Buzzurlにブックマーク" target="_blank"><img src="http://buzzurl.jp/static/image/api/icon/add_icon_mini_01.gif" width="21" height="15" alt="Buzzurlにブックマーク" /></a>

イザ！ブックマーク　公式の説明ページ
<a href="http://www.iza.ne.jp/bookmark/add/regist/back/<%topentry_link>" title="イザ！ブックマーク" target="_blank"><img src="http://www.iza.ne.jp/images/common/bookmark_icon12.gif" width="16" height="16" alt="イザ！ブックマーク" /></a>

FC2ブックマーク　公式の説明ページ
<a href="javascript:location.href='http://bookmark.fc2.com/user/post?url='+encodeURIComponent(location.href)+'&title='+encodeURIComponent(document.title)" title="FC2ブックマークへ追加"><br /><img src="http://bookmark.fc2.com/images/add-16.gif" width="16" height="16" alt="FC2ブックマーク" /></a>

おいらのこのブログには設置しなかったが、まだまだソーシャルブックマークサービスやニュース収集サイトはあるので、そっちの説明ページもまとめたぞ。
・newsing
・Choix
・トピックイット
・POOKMARK Airlines

いろんなボタンをまとめたボタン(このブログの左柱にも設置）
・AddClips

おお、今回はとっても便利な記事だったなぁ〜
※しかし、設置後に関する不具合などで発生した問題など一切おいらは責任を負わんので予め了承の上で使用はたのんます。万が一、なにか間違いとかあったら、コメントで教えてもらえると助かりますんでよろしく。

【関連リンク】 ブログ簡単パワーアップ FC2ブログスーパーカスタマイズテクニック

【関連記事】　このブログがアボセンスに！
【関連記事】　パソコンは今、Windows7無償アップグレード対応モデルが売れて...
【関連記事】　龍水のtwitter（ツイッター）完璧ガイドtwitter有名人最新版〜激...

【関連タグ】　twitter
【ランキング】 人気の記事

【twitter】 本日の龍水のつぶやき

【おすすめ】 龍水が最近「気になる」YouTubeはコレ！
【おすすめ】 龍水の独言ブ増刊号
【おすすめ】 Windows7 パソコン買うならこれ