SSブログ

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 %>&amp;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


Related Posts Plugin for WordPress, Blogger...
nice!(1)  コメント(2)  トラックバック(1) 

nice! 1

コメント 2

ターク

参考にさせていただきました。ありがとうございます。
by ターク (2010-08-23 03:01) 

miyamomo

>タークさま

参考だなんて恐縮です!
内容わかりにくくて、もうほんとスミマセン。。
by miyamomo (2010-08-27 14:38) 

コメントを書く

お名前:
URL:
コメント:
画像認証:
下の画像に表示されている文字を入力してください。

Facebook コメント

トラックバック 1

トラックバックの受付は締め切りました

この広告は前回の更新から一定期間経過したブログに表示されています。更新すると自動で解除されます。