So-netブログにツイートボタンを設置する方法 [Web]
Twitterから「ツイートボタン」がリリースされた。
概要 → http://gigazine.net/index.php?/news/comments/20100813_tweet_button/
ツイートボタンのページ → http://twitter.com/goodies/tweetbutton
ここで出力されたコードを記事本文に挿入してあげれば、So-netブログにも簡単にボタンが設置できる。
ただ、このコードで取得されるURLやタイトル、カウントなどの情報は、表示されているページのものになる。なのでSo-netブログではこのコードをそのまま、HTMLの編集で記事(article)のフッタなどに挿入してしまうと、記事ページを表示した場合以外では期待したような動作にならない。
例えばトップページを表示した場合、ブログのルートURLに基づいた情報が取得され、各記事ごとのツイート数ではなくルートURLのカウントが並んでしまうといった残念な感じになる。
ということで、こりゃダメだあと思っていたら、DevページのTwitter Buttonのドキュメントにカスタマイズの方法が載っていて、URLパラメーターをいじる方向で試してみたらうまくいった。
<a href="http://twitter.com/share?url=<% article.page_url | html %>&text=<% article.subject %>" class="twitter-share-button" data-count="horizontal">Tweet </a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
リンクURL(http://twitter.com/share)に続けて、シェアするURLに〝ボタンが設置されてる記事のURL〟、本文に〝その記事タイトル〟が反映されるよう、So-netブログの変数を明示する。今回の具体的な追加部分は下記。
- url=<% article.page_url | html %>
- text=<% article.subject %>
これならトップページを表示した場合でも、各記事ごとにデータを取得してくれます。
このコードを、 [デザイン] > [ レイアウト] > [記事カラム] > [コンテンツHTML編集] で、好きなトコロに挿入すればOK。自分は共通テーマの下に入れてみた。
より詳しいカスタマイズは → http://dev.twitter.com/pages/tweet_button
参考にさせていただきました。ありがとうございます。
by ターク (2010-08-23 03:01)
>タークさま
参考だなんて恐縮です!
内容わかりにくくて、もうほんとスミマセン。。
by miyamomo (2010-08-27 14:38)