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

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

Tweetボタンのソース取得

ソースはここ↓で取得できます。日本語にも対応しています。

https://twitter.com/about/resources/buttons

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

Guides

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ボタンのソース取得

ソースはここ↓で取得できます。日本語にも対応しています。

301 Moved

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

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

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

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

ソースはここ↓で取得できます。

はてなブックマークボタンの作成・設置について

いきなり「ボタンを設置するページの情報を入力」とありますが、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追記]はてなブックマークボタンは撤去しました。詳細はこちらのエントリーをご覧下さい。

【お詫び】はてなブックマークのボタンを撤去し退会しました。

【お詫び】はてなブックマークのボタンを撤去し退会しました。
さきほどこのブログからはてなブックマークボタンを撤去し、ボク自身も退会しました。理由は、はてなブックマークボタンの仕様を突然変えて、トラッキング(訪問者の行動情報取得)をするようになったからです。仕様変更が去年の9月1日、ボ...

ソースの貼付け方

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

タイトルとURLをコピーしました