【Labs】ソーシャルブックマークボタン
こんにちは(・∀・)
今回Twitterボタン、Facebookいいねボタン、Google+1ボタンの設定についてのページを更新しましたので、それにあわせてこちらのソーシャルブックマークボタンの横バルーンと縦バルーンについてのページも更新します。
ソーシャルブックマークボタン
内容は以前とあまり変わりません、横バルーンのボタンと縦バルーンのボタンの変更方法についてです。コードの書き方が少し変更になっております。
ちなみに今回も、どれもURLとか中身をいちいち書き換えることなくそのままコピペして使えます。
1. Twitter
Twitter横バルーンボタン
ツイートTwitter横バルーンのコード
<a href="https://twitter.com/share" class="twitter-share-button" data-lang="ja">ツイート</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>
上のコードの<a>
タグにdata-count="vertical"
を足すだけで縦バルーンになります。
Twitter縦バルーンボタン
ツイートTwitter縦バルーンのコード
<a href="https://twitter.com/share" class="twitter-share-button" data-lang="ja" data-count="vertical">ツイート</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>
2. Facebook
Facebookいいねボタンにはコードが2つあり、ここにあるコードは2番目のコードです。1番目のコードは開始<body>タグの直後に貼り付け、このコードはボタンを表示させたい場所に貼り付けます。詳しい解説は以前ご紹介しましたFacebookいいねボタンの設置をご覧ください。コードの取得はFacebook DevelopersのLike Button for the Webのページです。
すでに他のFacebook Pluginなどで1のコードを使用している場合、ここでは必要ありません。
Facebook横バルーンボタン
Facebook横バルーンのコード
<script>document.write('<div class="fb-like" data-href=""URL:"+location.href" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div>');</script>
上のコードのbutton_count
をbox_count
に変えるだけで縦バルーンになります。
Facebook縦バルーンボタン
Facebook縦バルーンのコード
<script>document.write('<div class="fb-like" data-href=""URL:"+location.href" data-layout="box_count" data-action="like" data-show-faces="false" data-share="false"></div>');</script>
3. Google +1
Google +1横バルーンボタン
Google +1横バルーンのコード
<div class="g-plusone" data-size="medium"></div>
<script>window.___gcfg = {lang: 'ja'};(function() {var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;po.src = 'https://apis.google.com/js/plusone.js';var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);})();</script>
上のコードのmedium
をtall
に変えるだけで縦バルーンになります。
Google +1縦バルーンボタン
Google +1縦バルーンのコード
<div class="g-plusone" data-size="tall"></div>
<script>window.___gcfg = {lang: 'ja'};(function() {var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;po.src = 'https://apis.google.com/js/plusone.js';var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);})();</script>
いかがでしたでしょうか、ソーシャルブックマークボタンがあると記事のシェアがしやすくなるのでWebページには是非設置したいモジュールの一つですね。