Home » Twitter » ブログに「Twitterに送る(Retweet)」ボタンを追加する
9月
12

最近ではニュースや情報サイトだけでなく、記事の情報やURLなどの情報をTwitterに簡単に送ることができるRetweet機能を実装しているブログが増えてきています。
livedoor Blogでは独自タグにてつぶやきボタンを実装し、WordPressではプラグインも配布。 jQuery他JavaScriptでつぶやきボタンを設置する方法や、Retweetボタンを提供してくれるTweetMemeのようなサイトもあります。
つぶやきボタンをいうのは構造上はとても簡単な作りになっています。

http://twitter.com/home?status=(サイトのURL)


これを個別記事毎にその記事のURLと記事タイトルの情報をTwitterに送れるようにし、かつその記事をTweetした人数をカウントしてくれるようにブログに設置していきます。
今回は当サイトでも利用させて頂いている、John ResigサマのJavaScriptを利用したつぶやきボタンを設置する方法をご紹介させて頂きます。(John Resig – Easy Retweet Button

STEP1 : JavaScriptをダウンロード
http://ejohn.org/files/retweet.js にアクセスして、オリジナルのJavaScriptをダウンロード(若しくはコピー&ペースト)して保存します。 その際の拡張子は 「.js」 にし、文字コードはサイトのものと合わせておきましょう。(例:retweet.js)
※以降は 「retweet.js」 と名前を付けて保存したと仮定して説明を進めていきます。

STEP2 : スクリプトのカスタマイズ
秀丸エディタやTeraPadなどのテキストエディタでダウンロードした 「retweet.js」 を開き、カスタマイズしていきます。 コードの変更時はこの色の部分だけ変えてください。

▼ 14行目:Bit.lyのユーザー名を変更

bitly_user: “Bit.lyのユーザー名“,

すでにデフォルトで設定されているので、このスクリプトを利用するためにわざわざアカウントを作成する必要はありません。 ただすでにアカウントをお持ちの方は変更しておきましょう。

▼ 18行目:Bit.lyのAPI Keyを変更

bitly_key: “Bit.lyのAPI Keyを変更“,

これも14行目と同様に、Bit.lyのアカウントを持っていなければ変更する必要はありません。

▼ 22行目:テキストリンクの変更

 Retweet“,

「Twitterに送る」 でも 「つぶやく」 でもお好きにどうぞ。

▼ 25行目:つぶやいた人数をカウントするかどうかの設定

count_type: “clicks“,

カウントするなら 「clicks」、カウントしないならば 「none」 に変更。

▼ 29行目:記事情報の文頭に表示させるテキストの設定

prefix: “”,

誰かが自分の記事についてつぶやいてくれたことを知りたい場合は以下のように設定します。

prefix: “RT @TwitterID “,

上記のように設定した場合、RetweetボタンをクリックしてTwitterにアクセスした際、以下のように表示されます。

RT @TwitterID 記事名 サイト記事URL


▼ 32~36行目:スタイルシートの変更

styling: "a.retweet { font-size:90%; color:#444; text-decoration:none; border:0px; }" +
  "a.retweet span { color: #fff; background:#94CC3D; margin-left:1px; border:1px solid #43A52A; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px; padding:2px 4px; }" +
  "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; }"

このスタイルシートは以下のように反映されます。

<a href="…" class="retweet"><strong>4 </strong><span>Retweet</span></a>

<a href="…" class="retweet vert"><strong class="vert">4 </strong><span class="vert">Retweet</span></a>


STEP3 : アップロードと保存場所の指定
設定した 「tweet.js」 をサーバーにアップロードし、<head>内に以下のタグを記載します。

<script type="text/javascript" src="http://JavaScriptの保存場所/retweet.js"></script>


STEP4 : つぶやきボタン設置タグの記載
デフォルトでは同窓での表示となっていますので、リンク先のTwitterのページを新しいウィンドウで表示させたい場合は<a>タグ内に 「target=”_blank”」 と追加します。

▼ 自分のサイトのトップページとURLを送る場合

<a class="retweet self"></a>


▼ 他の人のサイトのトップページとURLを送る場合

<a class="retweet" href="サイトURL">サイト名</a>


▼ 個別記事のタイトルとURLを送る場合
各ブログツールによってタグが異なるので注意してください。 基本構造は以下の通りです。

<a href="記事URL" class="retweet">記事タイトル</a>


▽ 例:Serene Bachの場合

<a href="{entry_permalink}" class="retweet">{entry_title}</a>

▽ 例:WordPressの場合

<a href="<?php the_permalink() ?>" class="retweet"><?php the_title(); ?></a>

▽ 例:MovableTypeの場合

<a href="<$MT:EntryPermalink$>" class="retweet"><$MT:EntryTitle$></a>


▼ STEP5 : HTMLテンプレートのアップ&更新
上記の記載が終わったらテンプレートをアップ&更新して実際にサイトにアクセスし、うまくつぶやきボタンが設置されているか確認してみてください。
おそらくこれで大丈夫なはず。 なにか変なとこがあれば教えてくださると嬉しいです(;´∀`)

,

Comments are closed.