menu
menu

キーワード検索

 

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

  1. ( 1-) 【CSS Tips】CSSだけでドロップダウンメニュー
  2. ( 2-) 【CSS Tips】CSSだけでサイズ可変・スマホ対応のアコーディオン
  3. ( 3-) 【HTML5】スマホサイトの作成・基本編
  4. ( 7↑) 【HTML5】HTML5・ページ作成の基本
  5. ( 6↑)【jQuery入門】jQueryで日時を表示
  6. ( 5↓) 【jQuery】表示しているブラウザの高さを取得してCSSのheightに指定
  7. ( 4↓) 【CSS Tips】CSSだけでブロック要素の表示非表示(トグルボタン)
  8. ( 8-) 【Mac Tips】MacにInkscapeをインストール
  9. ( 9-) 【MySQL】Windows 10にMySQLをインストール
  10. (10-) 【CSS Tips】スマホサイト向け横にスクロールするナビゲーション

ソーシャルブックマークボタン

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

  • カテゴリー:Labs