[Blogger] GoogleBloggerでソーシャルボタン設置する方法まとめ(ボックス)
[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 -->
いかがでしょうか?うまく表示できない場合は、遠慮なくお問い合わせ下さい(。・ω・。)
登録:
コメントの投稿
(
Atom
)
0 件のコメント :
コメントを投稿