【男前道】Bloggerの各記事下にはてブ、Facebook、Twitterのボタンを設置する方法

男前なら設置しろっ！

先日ブログのデザインをリニューアルしました。

Before

　　　　　　　　　　↓

After

■主な変更点

・グローバルメニューを設置し、右側に設置していたTwitter、Flickr、Ustream、Facebook、＋YouTubeをテキストリンクにて配置。
→サイドメニューの読み込むデータ量が減ったため、ページの表示速度が早くなった。

・メインエリアの幅を広げた。
→以前よりも大きな画像、動画が使用できるようになった。
余白が増え、見やすくなった。



さらに、GW中にちょっとイジりました。

記事下の「コメント」とかがある部分に、ソーシャルメディア関連のボタンを設置しました。

・はてなブックマーク
・Facebook
・Twitter


Before

　　　　　　　　　　↓

After

タグの設置位置は、3つとも同じです。

ブログテンプレのHTML編集画面で「ウィジェットのテンプレートを展開」にチェックを入れ、「quickedit pencil」を探してください。
ページでいうと、ログイン時、記事下に鉛筆ボタンがあるかと思いますが、その部分です。

<!-- quickedit pencil -->
<b:include data='post' name='postQuickEdit'/>
</span>
   
ここに挿入
   
</div>

・はてなブックマーク
→ワンクリックではてブできるボタンと、はてブされた数を表示してくれます。

<span class='hatena-entry hatena-append'> <a expr:href='"http://b.hatena.ne.jp/append?" + data:post.url' target='blank'> <img align='absmiddle' alt='このエントリーをブックマークに追加' height='12' src='http://b.hatena.ne.jp/images/append.gif' style='border: none;' title='このエントリーをブックマークに追加' width='16'/></a> <a expr:href='"http://b.hatena.ne.jp/entry/" + data:post.url'> <img align='absmiddle' alt='このエントリーを含むはてなブックマーク' expr:src='"http://b.hatena.ne.jp/entry/image/" + data:post.url' style='border: none;' title='このエントリーを含むはてなブックマーク'/></a> </span>

※上記タグの「"」は「& q u o t ;」から半角スペースを取った文字列に置換してください。
  ブログ上に「& q u o t ;」を表示させようとすると「"」になってしまい、どうしてもうまく表示させることができませんでした...orz
  面倒臭くてすみません。




・Facebook
→「いいね」ボタンが設置できます。Facebookにログインした状態で押すと、カウントが1つ増えます。

<iframe align='absmiddle' allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "  &layout=button_count&show_faces=false&width=90&action=like&colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:90px; height:20px; '/>

・Twitter
→ワンクリックで記事についてつぶやけます。

<a expr:href='"http://twitter.com/home?status=" + data:post.title + " " + data:post.url' target='_blank' title='Twitterでつぶやく'><img align='absmiddle' alt='twitterでつぶやく' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjle65qqwAH2ltGL5T8cUjwd3vwrmL7Dqv5KGmJmVVrdNIMKCoVw2vW2jN_mpcnaVvPgglqejY8Z0POUi0f74YTVF3y1FUa1mhwn0jXa8VGcd7bgsiXHkLzcQXejzJ4376D-If1Rzl2rijs/s1600/twitter02.gif'/>つぶやく</a>

これらはあくまでも私のカスタマイズバージョンです。
サイトから提供されたものをそのまま設置したら、上下が揃わなかったり、テキストがあったほうがいいなぁと思ったり、Twitterボタンの画像はこれがいいなぁと思ったので、少し変えました。


設置を検討されている方は、ご参考までに。