2010年12月01日

はてなブックマーク/Twitter/Facebookの公式ボタンを追加!

 少し遅れてしまいましたが、はてなブックマークに新たにはてなブックマークボタンというのが登場したそうで、はてなブックマークボタンの導入に合わせて、これまで導入していなかったTwitterやFacebookの公式ボタンもこのブログに追加してみました。

 ということで、このエントリーはその備忘録。


はてなブックマークボタン


 はてなブックマークボタンは以下のサイトに導入方法が分かりやすく解説されています。

 → 使いやすくなりました! はてなブックマークボタン

 上記のページでURLとページタイトルを入力すると自動的にコードが生成されるので、そのコードをテンプレート内の挿入したい場所に貼りつけるだけでブログに導入できます。各記事ごとに表示させるため、Livedoor blogのテンプレートにしたがって、URLは<$ArticlePermalink$>、タイトルは<$ArticleTitle$>としました。ただ、上記のページでは<が&lt;に、>が&gt;と実体参照されてしまうので、その部分だけは手動で修正しました。

<a href="http://b.hatena.ne.jp/entry/<$ArticlePermalink$>" class="hatena-bookmark-button" data-hatena-bookmark-title="<$ArticleTitle$>" data-hatena-bookmark-layout="simple" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>


 それから、表示するボタンの形式にはスタンダード、バーティカル、シンプルの3種類が設定できるのですが、俺は記事を読む前にブクマ数で判定されてしまう可能性があることが嫌だったので、ブックマーク数を表示しないシンプルタイプを記事の最後に追加することにしました。

関連


 → 新しいはてなブックマークボタンを(X)HTML validにする方法: 小粋空間


Twitter公式ツイートボタン


 Twitterの公式ボタンは以下のサイトから追加できます。

 → Twitter / ツイートボタン

 導入するのは簡単なのですが、これもはてなブックマークボタンと同様Livedoor Blog用に「ツイート内のテキスト」に<$ArticleTitle$>を入れ、またURLに<$ArticlePermalink$>を入力しました。

 あとは、表示されたコードをHTMLテンプレートの好みの位置に挿入し、それぞれのデザインを変更し、保存すればOKです。

 それから、ボタンの表示位置がそのまま貼りつけただけだと縦方向に少しずれていたので、微調整するために以下の記述をCSSに追加しました。

.twitter-share-button { vertical-align: middle; }



FacebookのLikeボタン


 FacebookのLikeボタンは以下のサイトで導入コードが得られます。

 → Like Button - Facebook Developers

 URL欄に適当なURLを入れて、デザインを設定した後、Get Codeをクリックします。そして、これも上の2つのボタンと同様にURLの欄を<$ArticlePermalink$>へと置き換えます。

 これも縦方向にずれてしまっていたので、iframeタグをdivタグで囲み、cssでfloatやmarginの設定をして、位置を修正しました。具体的なコードは以下のとおり。

<div style="float:right;margin: 0 0 0 8px;"><iframe src="http://www.facebook.com/plugins/like.php?href=<$ArticlePermalink$>&amp;layout=button_count&amp;show_faces=false&amp;width=71&amp;action=like&amp;colorscheme=light&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:71px; height:21px;" allowTransparency="true"></iframe></div>


 Facebookは個人的にはまだあまり利用していないんだけど、これでアクセス数が増えたりするのかなぁ。

トラックバックURL

このエントリーのトラックバックURL:

コメントする