■１．スクリプトを読み込ませる
まずは以下のスクリプトタグを、Bloggerテンプレートの<head>要素内に設置します。
<script src='http://ejohn.org/files/retweet.js'/>
■２．ボタンを配置する
スクリプトタグを置いたら、後はボタンを好きな場所に置くだけです。以下のソースを任意の場所にコピペしてあげてください。
<a class='retweet' expr:href='data:post.url' expr:title='data:title + ": "+ data:post.title' />たったのこれだけでretweetボタンを配置することができます。いやー便利。
■トラブルシューティング
(1) もし上記のソースをコピペしても動かない！という場合には・・・
コピペする際にソースコード中の
"を
& quot;要するにHTMLの文字実体参照に差し替えてください。
※残念ながら、Bloggerの本文中にこの記号が含められないのです・・・
(2) もしボタンを配置する場所が分からない場合には・・・
コメント欄でご指摘いただいたのですが、Bloggerのテンプレートは長くて複雑で、初めての人には何処に何を置けばいいのか分かりづらいです。ということで、各投稿のフッター欄（post-footer-line）にRetweetボタンを配置するサンプルソースを書いてみました。
<div class='post-footer'>
<div class='post-footer-line post-footer-line-1'>
<span class='post-ほげほげ'>
<!-- ここになにやら難しい記述がたくさん -->
</span>
<!-- post-footer-line post-footer-line-1の一番最後に追加 -->
<a class='retweet' expr:href='data:post.url' expr:title='data:title + ": "+ data:post.title' />
</div> <!-- post-footer-line post-footer-line-1 ここまで -->
<div class='post-footer-line post-footer-line-2'>
<!-- ここになにやら難しい記述がたくさん -->
</div>
<div class='post-footer-line post-footer-line-3'>
<!-- ここになにやら難しい記述がたくさん -->
</div>
</div>
</div>
</b:includable>
■ちょっとだけ補足説明
http://ejohn.org/blog/retweet/に記載されているコードをそのまま何も考えずに貼り付けると、Retweet先が現在ロケーションバーに表示されている先になってしまいます。
このコードを貼り付けて自分のBlogのトップページなどからRetweetボタンを押してみると、すぐに変だと気づくはずですそこでBloggerのテンプレートXMLの記法を利用して、現在の記事のタイトルとURLを正しく指定してやります。具体的にはexpr:hrefとかdata:post.urlとかです。どうやら、expr:をhtmlの任意の属性に付けてやると、data:post.urlとかdata:titleとかが利用可能になるっぽいです。expr:を付けた属性の中で任意の文字列リテラルを利用したいときは
<a class='retweet self' href='' />
& quot;で文字列を囲み、+で文字列を結合してやることができるみたいです。
投稿
8 コメント:
俺もできますた、ありがとうございます！
BloggerのTemplate慣れしていない人の為に追記すると、「どこに埋め込めばいいんだよ！！」
って思う場合は、まずはHTML編集画面のTextAreaの右上にある「Expand Widget Templates」をチェックしてから、「data:post.title」という単語でHTML編集ページ内を検索して、Template内のどの箇所がエントリごとのタイトルか？を発見すると良いと思います。
私はテンプレートをいじるが面倒なのでフリーエリアに記述できるものを作りました More improvement of "Comment on Twitter"
他人のサイトを RT する用ブックマークレットもあります How to send a YouTube link to Twitter
>shin1ogawaさん
補足ありがとうございます！確かにBloggerのテンプレート自体がそもそも長くて、どこに埋め込むべきか探すのが大変ですね−。
ということで、お勧めの埋め込み箇所を本文に追記しておきます。
>Hitさん
コメントありがとうございます！なるほど、テンプレートに埋め込むのではなくて、ブックマークレットみたいにJavaScript使って記述してるんですね。フリーエリア欄を使うアイディアは思いつきませんでした＞＜
各投稿のフッターに、フリーエリアと同じような感覚で自由にウィジェットを追加できればいいな−。→Blogger
はじめまして、おかげさまで自分も出来ました ありがたく使わせて頂きます。
自分のテンプレートは、管理人さんがサンプルで開示して下さってる ものとは若干異なってて ちと焦りました
ちょっとした勉強になって良かったです
> 白さん
よかったです！もうちょっとカッコイイボタンないかなとか探してます。また見つかったら試してみますね。
初心者の私にもできました、ありがとうございました。
右よりに置きたかったのですが、よくわからず、今の私には
これが精一杯でした。
> fasuさん
ばっちりできてるみたいでよかったです！
私のブログみたいに右よりにRetweetボタンを表示したい場合には、
＜div style='text-align:right; float:right;'＞
＜a class='retweet' expr:href='data:post.url' expr:title='data:title + ": "+ data:post.title' /＞
＜/div＞
のように、styleつきのdivタグで囲んでやるとうまくいくと思いますよ！
できました！！重ね重ねありがとうございました。
コメントを投稿