Bloggerにソーシャルボタン類を導入する方法

  • 投稿 : 2011-06-11
  • 更新 : 2013-05-18
記事のURLと記事のタイトルを埋め込む参考になるでしょうか?
exprがついている個所は、忘れないようにしてください。また、パラメータなどは、公式などを参考にしてくださいね。

FacebookのLike Button(いいねボタン)の設置方法

<iframe allowtransparency="true" expr:src='"https://www.facebook.com/plugins/like.php?href=" + data:post.url +"&layout=button_count&show_faces=false&width=450&action=like&colorscheme=light&height=21"' frameborder="0" scrolling="no" style="border:none; overflow:hidden; width:80px; height:20px;"></iframe>
公式:http://developers.facebook.com/docs/reference/plugins/like/

tweetボタンの設置方法

<a class="twitter-share-button" data-count="none" expr:data-text='data:blog.title + ":" + data:post.title' expr:data-url="data:post.url" href="http://twitter.com/share">Tweet</a>
<script src="https://platform.twitter.com/widgets.js" type="text/javascript"></script>
</pre
>公式:<a href="http://twitter.com/goodies/tweetbutton"  >http://twitter.com/goodies/tweetbutton</a>
<!--AdsXkiji--><!-- 3 --><h2>Google +1 ボタンの設置方法</h2>
ボタンの挿入したい位置に
<pre class="html" name="code">
<g:plusone size="medium" expr:href="data:post.url" count="false"></g:plusone>
head 要素内または body 終了タグの直前に
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"><br  />  {lang: 'ja'}<br  /></script>
公式:http://code.google.com/intl/ja/apis/+1button/

FC2拍手ボタンの設置方法

<a expr:href='"https://clap.fc2.com/post/FC2のユーザーID/?url=" + data:post.url + "&title=" + data:post.title + "(" + data:blog.title + ")"'   title="拍手する by FC2"><img alt="拍手する" expr:src='"https://clap.fc2.com/images/button/white/FC2のユーザーID?url=" + data:post.url' style="border-bottom: medium none; border-left: medium none; border-right: medium none; border-top: medium none;" /></a>
参照:BloggerにFC2拍手とランキングを組み込む
公式:http://clap.fc2.com/

はてなブックマークボタンの設置方法

<a class='hatena-bookmark-button' data-hatena-bookmark-layout='standard' expr:data-hatena-bookmark-title='data:post.title' expr:href='&quot;http://b.hatena.ne.jp/entry/&quot;+data:post.url' title='このエントリーをはてなブックマークに追加'><img alt='このエントリーをはてなブックマークに追加' height='20' src='http://b.st-hatena.com/images/entry-button/button-only.gif' style='border: none;' width='20'/></a>
<script async="async" charset="utf-8" src="http://b.st-hatena.com/js/bookmark_button.js" type="text/javascript">
</script>
参考:はてなブックマークボタンの表示の高速化&Bloggerの設置サンプル
公式:http://b.hatena.ne.jp/guide/bbutton

Yahooブックマークボタンの設置方法

<a expr:href='"http://bookmarks.yahoo.co.jp/action/bookmark?t="+data:post.title + "|" + data:blog.title + "&u=" + data:post.url'><img alt="Yahoo!ブックマークに登録" height="20" src="http://i.yimg.jp/images/sicons/ybm16.gif" style="border-bottom: medium none; border-left: medium none; border-right: medium none; border-top: medium none;" title="このエントリーをYahooブックマークに追加" width="20" /></a>
公式:http://bookmarks.yahoo.co.jp/settings/tools/savelink

del.icio.usボタンの設置方法

<a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title + "|" + data:blog.title' title="このエントリをdel.icio.usに追加する"><img alt="このエントリーをdel.icio.usに追加" height="20" src="http://www.kuribo.info/image/delicious/delicious_s.gif" style="border-bottom: medium none; border-left: medium none; border-right: medium none; border-top: medium none; float: none; margin: 0pt 0pt 0px 0px;" width="20" /></a>
公式:http://www.delicious.com/help/savebuttons

facebook「シェア」ボタンの設置方法

<a name="fb_share" type="button" expr:share_url="data:post.url"></a>
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>

【ブログ内で関連ある記事】

ブログにソーシャルボタン類を簡単に導入する方法 【Twitter、Facebookボタン等】
スポンサーリンク