FC2ブログでRTボタンを設置する方法

365日×24時間×60分×60秒=31536000秒の中で起きたことをただ書き残す日記

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
twitter_001.gif


 FC2ブログでtwitterのRTボタンを
 設置する方法を紹介します。






ブログの記事をRTできるボタンが欲しいと思ったので調査し設置しました。
今回の作業の際に以下の二つのサイトを参考にさせていただきました。

ブログに「この記事をtwitterへRTする」ボタンをつける方法

こちらのサイトではFC2ブログでaタグを使用して簡単にRTボタンを
設置する方法を紹介してくださっております。
簡単に設置が行える反面、URLがそのままツイートされてしまいます。
理想はbitlyによる短縮URLでツイートされることであったため、
別の方法を探しました。

bitly API (javascript) を使ってTwitterボタンを設置する方法まとめ

こちらのサイトではJSを使用し、bitlyで短縮したURLによる
ツイートが可能なRTボタンの設置方法を紹介してくださっております。
しかし、aタグ内でJSの関数を呼び出すために、
ブラウザで別ウィンドウで開くことが困難になっております。(ポップアップブロックにかかる)


上記二つのサイトをうまく改良することで、短縮URLでポップアップブロックにもかからない
RTボタンの設置方法を考えました。あまり綺麗ではないですが。

<!-- twitter RT -->
<script type="text/javascript"><!--
  function tweet() {
    var login  = '************'; // ← bitly に登録したユーザ名
    var apiKey = 'R_***************'; // ← bitly API Key
    bitly = 'http://api.bit.ly/shorten'
        + '?version=2.0.1&format=json&callback=callback'
        + '&login=' + login
        + '&apiKey=' + apiKey + '&longUrl=';
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = bitly + encodeURIComponent(location.href) ;
    document.body.appendChild(script);
  }
  function callback(bitlyResponse) {
    var title = '<%topentry_enc_utftitle>';
    var twuser = 'twitterユーザ名';
    var url = 'http://twitter.com/home/?status=RT @'
        + twuser + ' ' + title + ' ' + encodeURIComponent(
             bitlyResponse.results[location.href]['shortUrl']
          );
    var tw_atag = '<a href="' + url + '" target="_blank" title="この記事をtwitterへRTする">';
    var tw_imgtag = '画像ボタンにしたい方は好きな画像を指定';
    var rt_button = tw_atag + tw_imgtag + '</a>';
    document.write(rt_button);
  }
  tweet();
  //-->
</script>
<!-- /twitter RT -->

JSに詳しくないのでdocument.writeでaタグを吐き出すと言うダサい方法です。笑
何か良い方法がありましたらどなたか押してください。
とりあえずこれで tweet();を置いた場所にRTボタンが設置されました。

var url に関しては個々で改良して良いと思います。
aタグ部分も個々で使いやすいように記述してください。
ボタンの画像は公式サイトにあるものを利用できます。

Twitterボタン

次はソーシャルブックマークを設置したいと思います。

↓気になるtwitter関連の書籍です。気になる方はぜひ。↓






タグ : twitter API javascript bitly

この記事へのコメント
このコメントは管理人のみ閲覧できます
2010/04/19(月) 17:09 | | #[ 編集]
URL:
Comment:
Pass:
秘密: 管理者にだけ表示を許可する
 
この記事のトラックバックURL
http://blankeyandbump.blog54.fc2.com/tb.php/106-d915fdf8
この記事にトラックバックする(FC2ブログユーザー)
この記事へのトラックバック

 | Copyright © 三一五三六000日記 All rights reserved. | 

 / Template by 家族 ペット 自分史 ブログ
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。