ソーシャル系ボタンの設置用サンプルコード (はてブ・Twitter・Facebook・Googleプラスワン等のプラグインをサイト上に表示する方法)
はてブ・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 ボタンを表示する箇所に:
<g:plusone></g:plusone>
引用元:
- 1 をウェブサイトに表示
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...
- はてブ数以外は載っている。マイナーなサービスも含まれる。コードは未整形