読者です 読者をやめる 読者になる 読者になる

南国うまうま日記/バリ島ウブドの生活

南国バリ島のウブドに暮らすもんぶぅのうまうまな毎日を綴った日記です。海外生活豆知識やタイなどの旅行記もあります

にほんブログ村 海外生活ブログ バリ島情報へ   ←クリックよろしくお願いします

4大ブックマークボタンをサイトに設置する

先日、Googleより「Google+1ボタンが日本語に対応しました」というお知らせがありました。
これで、メジャーなブックマークボタンは大体出そろったように思います。
そこで、今回は人気の4大ブックマークボタンのサイト設置方法について、まとめてみたいと思います。


その前に、4大ブックマークボタンと言うと

ということです。


各ボタンを設置するためのコードを自動生成するためのページは、対応する各ページに載っております。


ただし、どのコードもそれほど難しい物ではありません。
基本的には、以下のコードをサイトの好きな位置に貼りつけてやれば、ブックマークボタンが生成されます。


Twitter

<a href="http://twitter.com/share" class="twitter-share-button"
 data-count="horizontal" data-lang="ja">Tweet</a>
<script type="text/javascript" 
src="http://platform.twitter.com/widgets.js" charset="utf-8">
</script>

このタグの中で「data-count="horizontal"」を変更すると、ボタンサイズ変わります。
(デフォルトはhorizontalです)


はてなブックマーク

<a href="http://b.hatena.ne.jp/entry/" class="hatena-bookmark-button" 
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>

このタグの中で「data-hatena-bookmark-layout="standard"」を変更すると、ボタンサイズが変わります。
(デフォルトはstandardです)


Facebookいいねボタン>

<script src="http://connect.facebook.net/ja_JP/all.js#xfbml=1">
</script>
<fb:like layout="standard" width="75"></fb:like>

このタグの中で「layout="standard"」を変更するとボタンサイズが変わります。
(デフォルトはstandardです)


Google+1ボタン>

<script type="text/javascript" 
src="https://apis.google.com/js/plusone.js"></script>
<g:plusone size="standard" count="true"></g:plusone>

このタグの中で「size="standard"」を変更すると、ボタンサイズが変わります。

  • size="standard":標準サイズ
  • size="small":小サイズ
  • size="medium":中サイズ
  • size="tall":大サイズ

指定しないと標準サイズになります
また、「count="true"」を「count="false"」とすると、数の表示なしタイプのボタンとなります。
指定しないと数の表示ありになります。

なんと!Google+1ボタンですが、IE7以前とIE8の一部には対応していないそうです。
コードを書いても、表示しないとか・・・・(汗


注意
各タグコードは表示の関係で改行を入れています。
そのまま、コピペすると、改行コードが悪さをする事がありますから、ペースト後改行コードを消してください。


今回紹介したタグは、設置したページのURLをブックマークするものです。
ブログの記事一覧など特定ページのURLをブックマークする場合のコードについては、また次回紹介したいと思います。