9月更新・前月(8月)の人気記事トップ10 09/02/2024
- ( 01 – ) 【Labs】position:absoluteとwidth:100%を指定すると横幅の設定がうまくいかない場合の対処方法について
- ( 07 ↑) 【Mac】macOSをHigh SierraからMontereyにアップグレード
- ( 03 – ) 【Mac】横画面で撮影した動画をYouTubeショート用にMacのiMovieで縦画面に編集する方法
- ( 10 ↑) 【iPhone / iPad】iPhoneのツイッターアプリでユーザー名をコピーする方法
- (圏外↑) 【Labs】CSSだけでドロップダウンメニュー
- ( 02 ↓) 【jQuery】入門2. jQueryをHTMLに組み込む
- ( 09 ↑) 【Mac】Safariでソースコードを見る方法
- ( 04 ↓) 【jQuery】入門7. jQueryで新しいWindowを開く
- ( 06 ↓) 【2024年5月】iPad画面解像度まとめ
- (圏外↑) 【GIMP】レイヤーをロック
【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ページには是非設置したいモジュールの一つですね。