本ブログにTwitter、Facebook、mixiボタンを設置しました。

ようやくですが、このブログにもTwitterへのtweet、Facebookやmixiなどの「イイネ」ボタンを設置しました。

本ブログは以前からはてなブックマークなどのソーシャルブックマークへのボタンは設置していましたが、Twitterなどは設置していませんでした。

そこで、はてなブックマークのボタンも変更になったことから、一緒に設置しようということで設置作業をしました。そこで、参考にしたサイトは下記です。

ソーシャルメディアに共有するボタンの設置方法(Twitter、facebook、mixi、GREE、Evernote) [C!]

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

はてなブックマークボタンの作成には、下記リンクから行うことができます。

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

ボタンの作成には、サイトのURLなどの情報を入力していくだけで、自動でボタン設置用のソースコードが生成されますので、それをコピペするだけで設置が完了します。

MTに設置

本ブログはMTで作られています。普通にサイトのURLを入力するとはてぶボタンを押したときに、サイトがブックマークされるだけで、各エントリー毎にブックマークされません。 そこで、各エントリー毎にブックマークするためには、下記のようにサイトのURLの箇所をします。

<$MTEntryPermalink$>

ソース例

<a href="http://b.hatena.ne.jp/entry/<$MTEntryPermalink$>" class="hatena-bookmark-button" data-hatena-bookmark-layout="standard" 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>

deliciousボタン

deliciousボタンは、下記リンクにあるMT用のソースコードをコピペしただけです。

"Bookmark this on Delicious" Buttons

ソース例

<img src="http://l.yimg.com/hr/img/delicious.small.gif" height="10" width="10" alt="Delicious" /> 
<a href="http://www.delicious.com/save" onclick="window.open('http://www.delicious.com/save?v=5&noui&jump=close&url='+encodeURIComponent(<$MTEntryPermalink$>)+'&title='+encodeURIComponent(<$MTEntryTitle$>),'delicious', 'toolbar=no,width=550,height=550'); return false;"> Bookmark this on Delicious<i/a>

Twitterボタン

Twitterボタンの生成は下記リンクから行います。

Twitter / ツイートボタン

ボタンは3種類ありますので、どれか選びます。必要に応じてオプションも入力すると下記のようなソースコードが自動で生成されますので、それをコピペするだけです。

<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

Facebookの「イイネ」ボタン

Facebookの「イイネ」ボタンのMTへの設置には、下記サイトを参考にさせていただきました。

FacebookのLike Button(いいねボタン)の設置[to-R]

Facebookの「イイネ」ボタンは下記リンクから生成します。

Like Button - Facebook開発者

ここも必要項目を入力していくだけですが、サイトのURLを入力するとエントリー毎に「イイネ」が付けられません。そこではてぶのときと同じくMT用のコードに書き換えます。

<$MTEntryPermalink$>

ソース例

<iframe src="http://www.facebook.com/plugins/like.php?href=<$MTEntryPermalink encode_url="1"$>&layout=box_count&show_faces=true&width=70&action=like&font=verdana&colorscheme=light&height=60" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:70px; height:60px;" allowTransparency="true"></iframe>

幅や高さは必要に応じて変更してください。本ブログでは幅70px、高さ60pxにしています。

mixiチェックボタン

mixiチェックボタンの設置には下記リンクを参考させていただきました。

mixiチェックボタンを設置するには、mixi Developer Centerに登録し、自分のチェックキーを取得する必要があります。 上記のリンクに登録方法から自分のチェックキーの取得方法が詳しく記述されていますので参考にしてください。

ソース例

<a href="http://mixi.jp/share.pl" class="mixi-check-button" data-key="自分のチェックキー">Check</a> <script type="text/javascript" src="http://static.mixi.jp/js/share.js"></script>

GREE「イイネ」ボタン

GREE「イイネ」ボタンの設置には、下記リンクを参考にさせていただきました。

ソーシャルメディアに共有するボタンの設置方法(Twitter、facebook、mixi、GREE、Evernote) [C!]

Social Feedback - GREE Developer Center(グリー デベロッパーセンター)にアクセスし、URLなどを入力します。やはりここでもMT専用のコードに書き換えます。

ソース例

<iframe src="http://share.gree.jp/share?url=<$MTEntryPermalink encode_url="1"$>&type=0&height=20" scrolling="no" frameborder="0" marginwidth="0" marginheight="0" style="border:none; overflow:hidden; width:100px; height:20px;" allowTransparency="true"></iframe>

Evernote「クリップ」ボタン

Evernote「クリップ」ボタンの設置には、下記リンクを参考にさせていただきました。

Evernoteの新Webクリップ機能「Site Memory」をブログに貼り付ける(Movable Typeでのカスタマイズ)

MTへの設置方法が詳しく書かれていますので、ぜひ参考にしてください。

あとがき

これで、無事に設置することができたわけですが、問題は、これらのボタンをどこの設置するかですね。今のところページ上部に設置していますが、下部のほうがいいのだろうかなど考えなければなりません。そこはゆっくりと考えていと思います。ですが、無事に設置できましたので、参考にさせていただいたサイト様に感謝しています。