2011年12月18日日曜日

BloggerでTweetボタン、+1ボタン、はてなブックマークボタンを設置

いちおう問題なく動くようなので、覚え書きとしてエントリーにしておきます。




Tweetボタンのソース取得


ソースはここ↓で取得できます。日本語にも対応しています。
https://twitter.com/about/resources/buttons

ただし、なぜかここ↑だとTweet回数の表示位置が選択できません。もっと自分好みにカスタマイズしたい場合は、こちら↓のサイトを参照するといいと思います(ただし全て英語です)。
https://dev.twitter.com/docs/tweet-button

Properties which can be used by all types of the Tweet Button のところを読むと、何ができるか書いてあります。URLを指定するかどうか、テキストを指定するかどうか、@付きにするかどうか、ハッシュタグをつけるかどうか、ボタンの大きさ、Tweet回数の表示方法などです。

ボクの場合、URLは表示しているページのままでいいし、テキストもタイトルのままでいい、Mentionsも飛ばして欲しくない、ハッシュタグはいらない、Tweet回数表示はボタンの上にしたい、という感じだったので、ソースはこんな感じになりました。

<a href="https://twitter.com/share" class="twitter-share-button" data-lang="en" data-count="vertical">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

要するに、太字の部分が追加されていれば、Tweet回数表示がボタンの上になります。必要ない項目は削っちゃえばOKです。



+1ボタンのソース取得


ソースはここ↓で取得できます。日本語にも対応しています。
http://www.google.com/intl/ja/webmasters/+1/button/index.html

ボタンサイズ、Annotation(注釈)、幅、言語が指定できます。サイズ大でバルーン表示にする場合はこんなソースです。

<g:plusone size="tall"></g:plusone>

<!-- この render 呼び出しを適切な位置に挿入してください --> 以下は、Bloggerでは必要ないみたいです。



はてなブックマークボタンのソース取得


ソースはここ↓で取得できます。
http://b.hatena.ne.jp/guide/bbutton

いきなり「ボタンを設置するページの情報を入力」とありますが、URLは表示しているページのままでいいし、テキストもタイトルのままでいいなら、空欄のままボタンの種類だけ選べばOKです。

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


[3/13追記]はてなブックマークボタンは撤去しました。詳細はこちらのエントリーをご覧下さい。
【お詫び】はてなブックマークのボタンを撤去し退会しました。
http://wildhawkfield.blogspot.com/2012/03/blog-post_13.html


ソースの貼付け方

  1. Bloggerの管理メニューから「レイアウト」→「ガジェットを追加」→「HTML/JavaScript」を選択します。
  2. 「コンテンツ」の所に、上記のソースを貼り付けます。見出しをつけない場合「タイトル」は空欄でOKです。きれいに配置したい場合は、適当なHTMLを追加してください(ボクはCSSがうまいこと使えないので、TABLEタグでレイアウトしました……邪道です)
  3. 「保存」をクリックすれば、完了です。配置を変えたい場合は、ドラッグ&ドロップして「配置を保存」すればOKです。

週間人気投稿

月間人気投稿