[Blogger] GoogleBloggerでソーシャルボタン設置する方法まとめ(ボックス)

0 件のコメント




[Blogger] GoogleBloggerでソーシャルボタン設置する方法まとめ(ボックス)
目的

ソーシャルボタンをつくり、シェアしてもらうことで、検索エンジン以外からのアクセス数を増やす

仕様
  • ソーシャルボタンは、全てボックス型とする
  • 対象のSNSは、Facebook、twitter、はてぶ、Google+、Pocketとする
作成手順
  • 1. 横並び用のCSSを追加する
  • 2. Facebook用に、bodyタグ直後にAPIを埋め込む
  • 3. ソーシャルボタンを表示したい位置に、コードを配置する
1. 横並び用のCSSを追加する

ソーシャルボタンを横並びで表示するために、CSSを追加する

/* ○リストの中身を上下左右センター揃え */ 
.socialButtonLine {
  position: relative;
  overflow: hidden;
}
.socialButtonLine ul {
  float: left;
  position: relative;
  left: 50%;
}
.socialButtonLine li {
  position: relative;
  margin: 0 0 0 10px;
  left: -50%;
  display: table-cell;
  vertical-align: middle;
  float: left;
}
2. Facebook用に、bodyタグ直後にAPIを埋め込む

Facebookのいいねボタンを表示させるために、下記コードをbodyタグ直後に挿入する

<!-- [FacebookAPI] START -->
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<!-- [FacebookAPI] END --> 
3. ソーシャルボタンを表示したい位置に、コードを配置する

ソーシャルボタンを表示したい場所に、下記コードを追加する

<!-- [SocialButton] START -->
<div class='socialButtonLine' style='margin:10px 0 30px 0;'>
<ul>
<li>
  <!-- [SB] Facebook -->
  <div class="fb-like" expr:data-href="data:post.url" data-layout="box_count" data-action="like" data-show-faces="false" data-share="false"/>
</li>
<li>
  <!-- [SB] Hatebu -->
  <a class='hatena-bookmark-button' data-hatena-bookmark-layout='vertical-balloon' data-hatena-bookmark-lang='ja' expr:data-hatena-bookmark-title='data:post.title' expr:href='"http://b.hatena.ne.jp/entry/" + data:post.canonicalUrl' title='このエントリーをはてなブックマークに追加'><img src='http://b.st-hatena.com/images/entry-button/button-only@2x.png' 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>
</li>
<li>
  <!-- [SB] Twitter -->
  <a class='twitter-share-button' data-count='vertical' data-hashtags='写真撮影テク' href='https://twitter.com/share'>Tweet</a>
  <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</li>
<li>
  <!-- [SB] Google+ -->
  <script src='https://apis.google.com/js/platform.js' type='text/javascript'/>
  <div class='g-plusone' data-size='tall'/>
</li>
<li>
  <!-- [SB] Pocket -->
  <a class='pocket-btn' data-lang='en' data-pocket-count='vertical' data-pocket-label='pocket'/>
  <script type='text/javascript'>!function(d,i){if(!d.getElementById(i)){var j=d.createElement("script");j.id=i;j.src="https://widgets.getpocket.com/v1/j/btn.js?v=1";var w=d.getElementById(i);d.body.appendChild(j);}}(document,"pocket-btn-js");</script>
</li>
</ul>
</div>
<!-- [SocialButton] END -->

いかがでしょうか?うまく表示できない場合は、遠慮なくお問い合わせ下さい(。・ω・。)




0 件のコメント :

コメントを投稿