読者です 読者をやめる 読者になる 読者になる
スポンサーリンク

ソーシャル系ボタンの設置用サンプルコード (はてブ・Twitter・Facebook・Googleプラスワン等のプラグインをサイト上に表示する方法)

SNS Webサービス html hatena

はてブ・Twitter・Facebook・Google+1 など,

「押すボタン」系のソーシャルプラグインをWebページ上に表示する方法。


すぐコピペできるよう,HTMLのコードで掲載。

  • (1)Twitterの「ツイートする」ボタン
  • (2)「はてなブックマークに追加」ボタン
  • (3)ページごとの「はてなブックマーク数」
  • (4)サイト全体の「はてなブックマークカウンター」
  • (5)Facebookの「いいね」ボタン
  • (6)「Google +1(プラスワン)」ボタン
  • (7)「Google+」ページへのリンクアイコン

発展:サイトのはてなブックマーク数が増えてきた場合

  • (発展1)サイト内で,はてなブックマーク数が多い順のページランキングを表示
  • (発展2)サイト内で,はてなブックマーク数の遷移状況を表示

(1)Twitterの「ツイートする」ボタン 設置用のソースコード

ボタンを表示する箇所に:

<a
  href="https://twitter.com/share"
  class="twitter-share-button"
  data-count="none"
  data-lang="ja"
>ツイート</a>
<script
  type="text/javascript"
  src="//platform.twitter.com/widgets.js"
></script>


引用元:

素材 : ツイートボタン
http://twitter.com/goodies/tweetbutton

(2)「はてなブックマークに追加」ボタン 設置用のソースコード

ボタンを表示する箇所に:

<a
  href="http://b.hatena.ne.jp/entry/(※対象URL)"
  class="hatena-bookmark-button"
  data-hatena-bookmark-title="(※ブックマーク名)"
  data-hatena-bookmark-layout="standard"
  title="このエントリーをはてなブックマークに追加"
><img
  src="http://b.st-hatena.com/images/entry-button/button-only.gif"
  alt="このエントリーをはてなブックマークに追加"
  width="20"
  height="20"
  style="border: none;" 
/></a>
<script
  type="text/javascript"
  src="http://b.st-hatena.com/js/bookmark_button.js"
  charset="utf-8"
  async="async"
></script>


引用元:

はてなブックマークボタンの作成・設置について
http://b.hatena.ne.jp/guide/bbutton

(3)ページごとの「はてなブックマーク数」 設置用のソースコード

ボタンを表示する箇所に:

<a
  href="http://b.hatena.ne.jp/entry/(※URL)"
><img
  src="http://b.hatena.ne.jp/entry/image/(※URL)"
></a>

aタグは必須ではない。


引用元:

ブックマーク数を画像で取得するAPI
http://b.hatena.ne.jp/help/count#count

(4)サイト全体の「はてなブックマークカウンター」 設置用のソースコード

カウンターを表示したい個所に:

<a
  href="http://b.hatena.ne.jp/entrylist?url=(※URL)"
><img
  src="http://b.hatena.ne.jp/bc/de/(※URL)"
  class="bcounter"
  alt="この日記のはてなブックマーク数"
  title="この日記のはてなブックマーク数"
></a>


引用元とサンプル:

はてな以外のブログ(ウェブサイト)ではてなブックマークカウンターを設置する
http://b.hatena.ne.jp/help/bcounter

(5)Facebookの「いいね」ボタン 設置用のソースコード

ボタンを表示する箇所に:

<iframe
  src="http://www.facebook.com/widgets/like.php?href=(※URL)&layout=button_count"
  scrolling="no"
  frameborder="0"
  style="border:none; width:120px; height:20px"
></iframe>


引用元:

Facebookの「いいね!」ボタン設置方法
http://www.waldiz.com/article.php/fac...


「いいね!」ボタンを設置しよう / コードについて
http://www.facebook-japan.com/iine.html

  • URLのパラメータの詳しいカスタマイズ方法

(6)「Google +1(プラスワン)」ボタン 設置用のソースコード

head 要素内または body 終了タグの直前に:

<script
  type="text/javascript"
  src="https://apis.google.com/js/plusone.js"
></script>
  1. 1 ボタンを表示する箇所に:
<g:plusone></g:plusone>


引用元:

  1. 1 をウェブサイトに表示

http://www.google.com/webmasters/+1/b...

SEO上の効果に関する参考:

なぜ Google +1 は流行しない(と言われている)のか?
http://www.sem-r.com/news-2011/201106...

  • 大概の専門家は「Google +1は失敗」と予測
  • 検索結果をカスタマイズ(追加・修正・編集など)する類のサービスって、一度も成功したことがない
  • メリットもインセンティブも無いから
  • Googleが「ソーシャルに弱い」


グーグル+1(プラスワン)ボタンが日本でも開始
http://ascii.jp/elem/000/000/615/615846/

  • Facebookの「いいね!」(likes)同様に、ボタンをクリックすることでウェブページや広告を評価できる機能。ユーザーのクリックを集計して、評価クリックの高いものを他のユーザーの検索結果に反映させていく

なおプラスワンボタンは,ローカルのファイルで表示確認することはできない。

必ず,ApacheなどのWebサーバ上にHTMLを設置して表示確認すること。


(7)「Google+」ページへのリンクアイコン(静的) 設置用のソースコード

バッジとも呼ぶ。

アイコンを表示する箇所に:

<!-- Google Page -->

<a
  href="https://plus.google.com/(ID)?prsrc=3" 
  style="text-decoration:none;"
><img
  src="https://ssl.gstatic.com/images/icons/gplus-32.png" 
  alt="" 
  style="border:0;width:32px;height:32px;"
/></a>


引用元:

Link your Google+ page to your site
https://developers.google.com/+/plugi...

  • HTMLコードのジェネレータ


Google+ Pageと発行者サイトとの関連性を深めるバッジ
http://www.kots.jp/blog/google/5973/

  • アイコンのサイズはbadgeとsmallbadgeなどがある

(発展)サイトのはてなブックマーク数が増えてきた場合

(発展1)サイト内で,はてなブックマーク数が多い順のページランキングを表示

<script
  language="javascript"
  type="text/javascript"
  src="http://b.hatena.ne.jp/js/widget.js"
  charset="utf-8"
></script>
<script language="javascript" type="text/javascript">
Hatena.BookmarkWidget.url   = "(※URL)";
Hatena.BookmarkWidget.title = "(※バーのタイトル)";
Hatena.BookmarkWidget.sort  = "count";
Hatena.BookmarkWidget.width = 200;
Hatena.BookmarkWidget.num   = 10;
Hatena.BookmarkWidget.theme = "hatenadiary";
Hatena.BookmarkWidget.load();
</script>


生成ページ:

ブログのサイドバーに人気の記事を表示
http://b.hatena.ne.jp/guide/blogparts...

(発展2)サイト内で,はてなブックマーク数の遷移状況を表示

ブログ系のサイトに限定されるが,TopHatenarを利用できる。

画像を表示したい個所に:

<a
  href="http://tophatenar.com/view/(はてなID)"
  title="TopHatenar"
><img
  src="http://tophatenar.com/chart/bookmark_small/(はてなID)"
  width="160"
  height="120"
  border="0"
></a>


生成ページ:

TopHatenar
http://tophatenar.com/

補足

この手のまとめ記事はいくつか存在する。

Facebook・Twitterなどソーシャルボタン設置方法まとめ
http://design-spice.com/2011/08/09/so...

  • 記述は詳しいが,手軽な形でまとまってはいない。手順は載っているがソースコードはない


twitter、Facebook、mixiチェックなど公式のソーシャル系ボタンのまとめ
http://gryng.me/2010/09/social-button...

  • リンクが並んでいるだけでソースコードがない


【WordPress・Movable Type】ソーシャルメディアボタン設置方法のまとめ
http://tam-tam.co.jp/tipsnote/cms/pos...

  • WordPressやMovable Typeの独特の記法を使って紹介している


ソーシャルメディアに共有するボタンの設置方法(Twitter、facebook、mixi、GREE、Evernote)
http://creazy.net/2010/09/howto_setup...

  • はてながない


ソーシャルブックマーク&投稿ボタンの設置方法
http://www.seomode.jp/socialmedia/201...

  • はてブ数以外は載っている。マイナーなサービスも含まれる。コードは未整形