12月更新・前月(11月)の人気記事トップ10 12/07/2023
- ( 02 ↑) 【Mac】macOSをHigh SierraからMontereyにアップグレード
- ( 01 ↓) 【iPhone / iPad】iPhoneでSuicaをクレジットカード無しで使う方法
- ( 03 – ) 【iPhone / iPad】iPhoneのツイッターアプリでユーザー名をコピーする方法
- ( 05 ↑) 【Labs】position:absoluteとwidth:100%を指定すると横幅の設定がうまくいかない場合の対処方法について
- ( 06 ↑) 【jQuery】入門2. jQueryをHTMLに組み込む
- (圏外↑) 【jQuery】入門11. switch文による条件分岐
- (圏外↑) 【Mac】Safariでソースコードを見る方法
- ( 09 ↑) 【Mac】横画面で撮影した動画をYouTubeショート用にMacのiMovieで縦画面に編集する方法
- (圏外↑) 【jQuery】入門7. jQueryで新しいWindowを開く
- (圏外↑) 【iPhone iPad】iPhoneやiPadの音量を細かく調整する方法
【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などで１のコードを使用している場合、ここでは必要ありません。
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ページには是非設置したいモジュールの一つですね。