menu
menu

キーワード検索

 

前月(11月)の人気記事トップ10

  1. ( 1 - ) 【CSS】CSSだけでドロップダウンメニュー
  2. ( 2 - ) 【Mac】Macのユーザー名とアカウント名を変更する
  3. ( 3 - ) 【jQuery】jQueryでドロップダウンメニュー
  4. ( 4 - ) 【CSS】スマホ対応CSSだけでドロップダウンメニュー
  5. ( 6 ↑) 【iPhone・iPad】iPhoneのメモリを簡単に解放する方法
  6. ( 5 ↓) 【iPhone・iPad】投稿の準備中にエラーが起きました。後でやり直してください。
  7. ( 9 ↑) 【jQuery】入門2. jQueryをHTMLに組み込む
  8. ( 8 - ) 【CSS】レスポンシブデザインのブレークポイントは⁉
  9. (10 ↑) 【Mac】iMovieの保存場所を変更する
  10. ( - ↑) 【PHP】PHPでシンプルなメールフォーム
このエントリーをはてなブックマークに追加

【制作Tips】ソーシャルブックマークボタン

【制作Tips】ソーシャルブックマークボタン

こんにちは(・∀・)

今回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_countbox_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. はてなブックマーク
はてなブックマーク横バルーンボタン
このエントリーをはてなブックマークに追加
はてなブックマーク横バルーンのコード

<a href="http://b.hatena.ne.jp/entry/" class="hatena-bookmark-button" data-hatena-bookmark-layout="simple-balloon" data-hatena-bookmark-lang="ja" title="このエントリーをはてなブックマークに追加"><img src="https://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="https://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>

上のコードのsimple-balloonvertical-balloonに変えるだけで縦バルーンになります。

はてなブックマーク縦バルーンボタン
このエントリーをはてなブックマークに追加
はてなブックマーク縦バルーンのコード

<a href="http://b.hatena.ne.jp/entry/" class="hatena-bookmark-button" data-hatena-bookmark-layout="vertical-balloon" data-hatena-bookmark-lang="ja" title="このエントリーをはてなブックマークに追加"><img src="https://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="https://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>
4. 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>

上のコードのmediumtallに変えるだけで縦バルーンになります。

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ページには是非設置したいモジュールの一つですね。

  • ソーシャルブックマーク
このエントリーをはてなブックマークに追加