2011年7月10日日曜日

ツイートボタンといいね!ボタンとはてなブックマークボタンをヘッダーにまっすぐつける

このエントリーをはてなブックマークに追加


このブログを始めるにあたって考えたのが
「絶対にツイートボタンといいね!ボタンとはてなブックマークボタンはつけたいなー」
ということ。
ソーシャル時代のブログなんだから、そういうのついてるっしょ
という何ともまぁ安易な理由からなんですが
これをつけるのがまー安易ではなかったwww

ブログ記事に毎回書き込む形だと
「ブログのトップをリツイートしてしまう」ということがわかり、
色々試行錯誤してました(5,6時間ぐらい)

で、方法がわかりましたのでご紹介します。
この方法は
「記事のヘッダーに一列にツイートボタンとシェアボタンとはてなブックマークボタンをつける」
「ツイッターはちゃんとツイッターアカウントが表示され、なおかつどのページでも記事自体のURLがツイートされる。」
「フェイスブックのいいね!ボタンでも同様にちゃんと記事自体をいいね!してくれる」
という方法です。

【設置の仕方】

1,「ダッシュボード」 >「デザイン」 > 「HTMLの編集」

2,「ウィジェットのテンプレートを展開」にチェック

3,「data:post.body」でコードを検索

4,以下のコードを「/data:post.body」のすぐ上の行に貼付け
 ※もしフッターに置きたい場合は「/data:post.body」のすぐ下の行に貼付け
  あと「penpengusa」というのは外して、自分のツイッターアカウントにしてください。


<table border='0' cellpadding='0' cellspacing='0'> 
<tr>
<td align='left' width='130'>
<a class='twitter-share-button' data-count='horizontal' data-lang='ja' data-via='penpengusa' expr:data-text='data:title + &quot;: &quot;+ data:post.title' expr:data-url='data:post.url' href='http://twitter./share'>Tweet</a>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
</td>
<td align='left' width='110'>
<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot; &amp;send=false&amp;layout=button_count&amp;width=110&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:110px; height:21px;'/>
</td>
<td align='left' width='130'><a class='hatena-bookmark-button' data-hatena-bookmark-layout='standard' expr:data-hatena-bookmark-title='data:post.title' expr:href='&quot;http://b.hatena.ne.jp/entry/&quot; + data:post.url' title='このエントリーをはてなブックマークに追加'>
<img alt='このエントリーをはてなブックマークに追加' height='20' src='http://b.st-hatena.com/images/entry-button/button-only.gif' style='border: none;' width='20'/>
</a>
<script async='async' charset='utf-8' src='http://b.st-hatena.com/js/bookmark_button.js' type='text/javascript'/>
</td>
</tr>
</table>

以上です。
うまく行かない…という場合はご報告頂ければと思います。
(いずれ解説記事を書こうかとも思いますが、本業じゃないため間違えたことを書きそう…)

■参考記事

0 件のコメント:

コメントを投稿