Bloggerの記事にFacebook, Twitterのshare linkを表示

投稿日：

前に見つけたscrollしてもついてくるjQuery Pluginを使って、Bloggerの記事にFacebookのlike buttonとTwitterのtweet buttonを埋め込んだときのMemo.

jquery-scroll-followはjQueryとjquery UI Coreが必要なので、Google Libraries APIを使う。

困ったのがBloggerにJavaScript Fileを添付する機能がないので、どこか外部Serverに置いて参照しなければならない。これはGoogle Sitesに置くことにした。前の記事を参考に。

あとは実際にBloggerの管理画面の「HTMLの編集」で「ウィジェットのテンプレートを展開」にcheckしてScriptを埋め込む。

head tag内に以下を埋め込む

<!-- Start Share Links Script and CSS-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <script src='https://www.google.com/jsapi?key=google-api-key' type='text/javascript'/>
  <script type='text/javascript'>
    google.load(&quot;jquery&quot;, &quot;1&quot;);
    google.load(&quot;jqueryui&quot;, &quot;1&quot;);
  </script>
  <script src='https://sites.google.com/site/hoge/jquery.scrollfollow.js?attredicts=0' type='text/javascript'/>
  <script type='text/javascript'>
jQuery(function($) {
  var jShare = $(&#39;#share-link-balloon&#39;);
  if (jQuery.isFunction(jShare.scrollFollow)) { 
    jShare.show();
    jShare.scrollFollow();
  }
});
  </script>
  <style>
  #share-link-balloon {
    background: url('https://sites.google.com/site/hoge/bg_content_balloon.png?attredirects=0') no-repeat;
    position: absolute;
    left: -130px;
    width: 92px;
    height: 194px;
    margin: 0;
    padding: 23px 0 0 30px;
  }
    #share-link-balloon .facebook {
      margin-left: 4px;
      margin-top: 5px;
    }
  </style>
</b:if>
<!--  End  Share Links Script and CSS-->

 

<a expr:name='data:post.id'/>の直後に以下を埋め込む。

<!-- Start Share Link Balloon -->
<div id='share-link-balloon' style='display:none;'>
  <div class='share-box facebook'>
    <script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
    <fb:like font='' href='' layout='box_count' show_faces='false' width='60'/>
  </div>
  <div class='share-box twitter'>
    <a class='twitter-share-button' data-count='vertical' data-via='hoge' href='http://twitter.com/share'>Tweet</a>
    <script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
  </div>
</div>
<!--  End  Share Link Balloon -->

Mixi Checkも導入したかったけど、吹き出しの感じで表示できないみたいなので今回は見送り。Developer登録だけしておいた。

 

< 2012/05/10 Modified >
Bloggerの機能で提供されるようになったし、表示速度に影響するし、ほとんど使われてないので削除した。

 

< Related Posts >