Facebookページに自分でTwitterタブをつけてみた

ふたたびFacebookネタ。TwitterのタイムラインをFacebookページの独立タブに表示するアプリを使っていたのですが、既成の物がいまいち好きになれなかったためDIYで作ってみました。iFrameタブをFacebookページに追加する方法は他のサイトにもたくさん載っていると思うので、とりあえずタブ内に表示するコンテンツ本体の制作手順を記します。

（画像をクリックするとジャンプしますが、現在のところはログインしていないとタブが表示されません。Facebookのバグだそうです。）

「ツイッター部長のおそれいりこだし」さんおよび「丸亀製麺」さんのFacebookページにも同タイプのTwitterタブを作らせていただきました。そちらではマルチアカウント表示にしたり、ハッシュタグに対応したり、Twitte APIを利用してアイコンにマウスオーバーした際にフォロー数やツイート数を見られるようにしたり、Twitterでアイコンを変更したらFacebookに反映されるようにしたりとアレンジを加えています。

---

A jQuery Twitter Ticker

使用したスクリプトは、こちらのチュートリアルで解説されているもの。

A jQuery Twitter Ticker | Tutorialzine

• 指定されたユーザのツイートを読み込むだけのシンプル機能
• マルチアカウントのツイート表示に対応
• jQUeryプラグイン「jScrollPane」でマウスホイールスクロールに対応
• サーバーサイドの処理が不要、PHPやデータベースに対応していないサーバでもOK
• ユーザ認証などの手順がなく、すぐに設置できる
• 英語が苦手でも比較的わかりやすい解説つき

---

かんたんな設定方法

1. 上のページにある「Download」ボタンをクリックして、入手できたファイルを解凍します。

   

2. ユーザアカウント名を設定する

   script.jsを開き、1行目の[' ']の中にあるアカウント名を書き換えて保存します。マルチアカウントに対応したい時は['aaa','bbb']のようにカンマで区切ればOKです。

   var tweetUsers = ['simzcom']; // アカウント名を指定
   

3. iFrameの表示領域に合わせてサイズを変更

   FacebookページのiFrame表示領域は横幅520ピクセルなので、コンテンツはそこに収まる幅にしておきます。モバイル端末で見ることも考えて、高さは600〜700ピクセルくらいで良いんじゃないかと思います。

   demo.cssを開きます。とりあえずテスト用なのでこのファイル名のままでいっときます。「#twitter-ticker」という文字列を検索して、そのあたりを書き換えました。

   #twitter-ticker{
   width:450px; // コンテンツ全体の横幅を設定
   height:600px; // コンテンツ全体の高さを設定
   ....
   （略）
   ....
   }
   
   #tweet-container{
   height:540px; // ツイートが並ぶ部分の高さを設定
   width:auto;
   overflow:hidden;
   }
   

4. ブラウザで読み込むとこんな感じ

   demo.htmlをブラウザで読み込んでみました。上下の文字を削除したり、背景色を変えたりすればすぐに使えそう。
   

手早くカスタマイズ

1. ヘッダのパターンを変更

   ヘッダ部分の青いグラデーションは、imgフォルダ にあるtop_bar.pngという小さな画像ファイルを背景パターンに指定してあります。

   

   例えば下のような画像に差し替えると、こんなヘッダになります。けっこう雰囲気変わりますね。

   

2. アイコンを検討

   デフォルトのかわいらしい鳥アイコンにはクリエイティブ・コモンズ・ライセンス3.0が適用されています。非営利であれば使用可ですが、商用目的の場合は他の画像に差し替えるか削除してください。

   Twitter Bird by ~freakyframes on deviantART

   
   

   クリエイティブ・コモンズ3.0
   Creative Commons — Attribution-NonCommercial-NoDerivs 3.0 Unported — CC BY-NC-ND 3.0

   Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 License.

   ・本作品を複製、頒布、展示、実演することができます。
   ・あなたは原著作者のクレジットを表示しなければなりません。
   ・あなたはこの作品を営利目的で利用してはなりません。
   ・あなたはこの作品を改変、変形または加工してはなりません。
   

   
   

3. ハッシュタグでの読み込みに対応する

   ユーザ名でなくハッシュタグでツイートを集めて表示するには、script.jsの17行目を変更します。「%23」が「#」に変換されるので、「#cat」というハッシュタグを収集するなら「q=%23cat&callback=...」と入力します。

   fileref.setAttribute("src", "http://search.twitter.com/search.json?q=%23ハッシュタグ&callback=TweetTick&rpp=50"); 
   

さらに

必要なカスタマイズが完了したらdemo.htmlのファイル名をindex.phpに変更し、ファイルを自サーバにアップしてFacebookのiFrameに表示させます（このへんも余裕があれば後で書きます）。おつかれさまでした。

今後はTwitterのアカウント名を変更した場合にもツイートの読み込みが途切れないよう、ユーザ固定のID番号を使って読み込む方式にアレンジしようと思ってます。