JavaScriptでReTweetさせる「Easy Retweet Button」

twitterが昨今話題につき、関連JavaScriptも増加中です。
今回はReTweet(RT)が簡単に設置できるJavaScript「Easy Retweet Button」を紹介します。
JavaScriptでReTweetさせる「Easy Retweet Button」サンプル

使用方法
Easy Retweet Buttonからretweet.jsをダウンロードします。
短縮URLサービスbit.lyのAPI Keyが必要になるので、取得します。
サイトの右にある「Sign Up」から登録して表示される【API Key】をコピーします。
上記でコピーした【API Key】をretweet.js18行目と、登録時の【Account名】をretweet.js14行目と書き換えます。
後は、jsをhead内に埋め込みます。
<script type="text/javascript" src="retweet.js"></script>
次にretweetさせたいページなどを以下の通り記載します。
<a class="retweet" href="リンク先">テキスト</a>
twitter側では次のように表示されます。
テキスト http://bit.ly/***
【設定変更】
1)html側の表示:22行目で変更可能です。 " Retweet",
2)click数表示:25行目で変更可能です。 count_type: "clicks",(なしの場合はnone)
3)prefix(接頭語):29行目で調整可能です。
prefix: "CB > @skuare ",
上記のようにすると以下のような表示になります。
CB > @skuare テキスト http://bit.ly/***
4)style:32行目以下で設定可能です。
styling: "a.retweet { font: 12px Helvetica,Arial; color: #000; text-decoration: none; border: 0px; }" +
"a.retweet span { color: #FFF; background: #94CC3D; margin-left: 2px; border: 1px solid #43A52A; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; padding: 3px; }" +
"a.vert { display: block; text-align: center; font-size: 16px; float: left; margin: 4px; }" +
"a.retweet strong.vert { display: block; margin-bottom: 4px; background: #F5F5F5; border: 1px solid #EEE; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; padding: 3px; }" +
"a.retweet span.vert { display: block; font-size: 12px; margin-left: 0px; }"
};

5)現在のページの場合
classにselfを付けます。
<a class="retweet self">このページ</a>
6)表示を縦にしたい場合
classにvertを付けます <a class="retweet vert" href="http://www.skuare.net/test/">JavaScript一覧</a>
JavaScriptでReTweetさせる「Easy Retweet Button」サンプル

sponsors

「JavaScriptでReTweetさせる「Easy Retweet Button」」をシェアする

記事作成:
記事URL:

TOP > > > JavaScriptでReTweetさせる「Easy Retweet Button」