Twitter の公式 Tweet ボタンで bit.ly を利用する

2010.09.03

Author ： Daisuke Don Horie @dice

（昨日原田からbit.lyの紹介があったので、今日はそれにかぶせて、bit.lyブログにありましたTwitterの公式ボタンとbit.lyのリンクを連携させる記事を訳しました。）

Twitter が新たに公式 "Tweet" ボタンを公開しました。例えば Tech Crunch では、Tweet ボタンと bit.lyのカスタムドメイン (trcn.ch) を併用しています。この記事では、公式 "Tweet" ボタンで bit.ly の URLを利用する方法をご紹介します。

Tweet ボタンを使って、今までどおりに bit.ly のカスタムドメインを利用できます。bit.lyのリンクは変更されることも期限切れになることもないので、多くの場合、オリジナルの URL とそれに対応する短縮 URLはバックエンドに保存して、何度も再利用しているでしょう。特定のページの bit.ly 短縮 URL を保存していれば、後は "Tweet"ボタンの "url" 引数を使うだけで、その短縮 URL を利用できます (またオリジナルの URL を "counturl"引数に渡せば、"Tweet" ボタンの回数表示も正しく保持できます) 。

以下の例では、このブログの bit.ly 短縮 URL(http://bit.ly/2pqyWD) を共有するための Tweet リンクを作成しています。

<a href="http://twitter.com/share?url=http%3A%2F%2Fbit.ly%2F2pqyWD&counturl=http%3A%2F%2Fblog.bit.ly%2F">Tweet</a>

"url" 引数を使って、bit.ly 短縮 URL を JavaScript の "Tweet" ボタンに渡すことも出来ます。

<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
<div>
<a href="http://twitter.com/share?url=http%3A%2F%2Fbit.ly%2F2pqyWD&counturl=http%3A%2F%2Fblog.bit.ly%2F" class="twitter-share-button">Tweet</a>
</div>

同様に、IFrame の "Tweet" ボタンにも渡せます。

<iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://platform.twitter.com/widgets/tweet_button.html?url=http%3A%2F%2Fbit.ly%2F2pqyWD&counturl=http%3A%2F%2Fblog.bit.ly%2F"
style="width:130px; height:50px;"></iframe>

なお、URL を渡すときは必ず URL エンコードしておく必要があるので注意してください。

BLOG

Twitter の公式 Tweet ボタンで bit.ly を利用する

Blog お楽しみいただけましたか？ Orinoco 株式会社 Facebook ページもよろしくおねがいします！

関連記事

リアクション