各メディア「いいね!」ボタン設置方法



ソーシャルメディアの「いいね!」ボタンや「ツイート」ボタンが、
最近、いろいろなサイトで目立つようになりました。

ソーシャルメディアの各サービスが、「いいね!」 などの共有ボタンをリリースしていますので、細かくカスタマイズするのであれば、各ソーシャルメディアシュアサイトを参考に設置すればいいと思います。簡単に済ませたいという方にご紹介です。



上のボタン左から

1.はてなブックマークエントリー
2.Twitter ツイートボタン
3.Facebook いいね!ボタン
4.GREE いいね!ボタン
5.mixi チェックボタン
6.Google +1 ボタン

ですが、このボタンデザインとボスト内容や動作(当サイト記事最後にあるボタンを
実際に押して確認してみてください)でよければ、以下の設置タグを参考にしてみてください。



【はてなブックマークエントリー】

<a href="http://b.hatena.ne.jp/entry/★ページの絶対url★" 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>


【Twitter ツイートボタン】

<a href="http://twitter.com/share" class="twitter-share-button" data-count="none" data-via="★Twitterアカウント★">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>


【Facebook いいね!ボタン】

<iframe src="http://www.facebook.com/plugins/like.php?href=★ページの絶対url★&layout=button_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:20px;" allowTransparency="true"></iframe>


【GREE いいね!ボタン】

<iframe src="http://share.gree.jp/share?url=★ページの絶対url★&type=0&height=20" scrolling="no" frameborder="0" marginwidth="0" marginheight="0" style="border:none; overflow:hidden; width:70px; height:20px;" allowTransparency="true"></iframe>


【mixi チェックボタン】

<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>


【Google +1 ボタン】

<g:plusone size="medium"></g:plusone>



★ページの絶対url★
★Twitterアカウント★
★自分のチェックキー★

は書き替えてください。

<mixi のチェッカーキー取得の手順>
1.Developer登録画面から登録。
2.mixi Developer Dashboard からチェックキーの発行を行ないます。
3.トップメニューのタブ「mixi Plugin」をクリック。
4.左メニューから「新規サービス追加」をクリック。
5.必要な情報を入力して登録。
6.チェックキーが発行されるのでそれを使ってコードを生成。
7.コードを上の★自分のチェックキー★に書き替える。

<Google +1 ボタンの/javascript 設置>

次のタグを head 要素内または body 終了タグの直前に貼り付けてください。

<script type="text/javascript" src="https://apis.google.com/js/plusone.js"> {lang: 'ja'} </script>




Movable Type の場合

【はてなブックマークエントリー】

<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>


【Twitter ツイートボタン】

<a href="http://twitter.com/share" class="twitter-share-button" data-count="none" data-via="★Twitterアカウント★">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>


【Facebook いいね!ボタン】

<iframe src="http://www.facebook.com/plugins/like.php?href=<$MTEntryPermalink encode_url="1"$>&layout=button_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:20px;" allowTransparency="true"></iframe>


【GREE いいね!ボタン】

<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:70px; height:20px;" allowTransparency="true"></iframe>


【mixi チェックボタン】

<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>


【Google +1 ボタン】

<g:plusone size="medium"></g:plusone>




Twitterなどのツィートボタンなどは、
ページタイトルと短縮url をscriptで書き替えてくれますので便利です。


いかがですか?

参考になったと思う方は、以下の「いいね!」ボタン、
「ツィート」ボタンを是非クリックしてみてください。