ソーシャルメディア 2-04
WebページにTwitterを組み込む

Twitterを自サイトに組み込む場合、簡単なものならTwitterの公式APIからサイズやカラーをカスタマイズするだけで充分だ。しかし、公式プラットフォームである＠anywhereを利用すれば、さまざまなTwitterコンテンツを活用できる。

制作・文／白木達也（アローグ・プランニングス）　飯塚まり子

充実しはじめたTwitter公式API

Twitterは、もはやネットワーク社会のひとつのツールとして完全に定着した感がある。2011年4月の公式発表によると、アカウント数は2億を突破し、ツイート数は1日あたり15億以上にのぼる（そのうち日本からのツイートは25％で、アメリカの40％に次いで世界2位）。

これだけの規模に成長すれば、当然ながらWeb制作もTwitterを組み込む、あるいは連携するべきシーンが多くなるだろう。Twitter公式APIも充実してきているので、自サイトと一体化させることも容易にできるようになってきた。なお、公式TwitterAPIのソースは公式の配布ページ(http://twitter.com/about/resources)で公開されている【01】。

【01】Twitterの公式API配布ページ。簡単なものならこれだけで充分対応できる。

ウィジェットを組み込む

まずは、外部のWebサイトに特定のツィートを表示しよう。上記のページのメニューから［ウィジェット］【02】＞［自分のサイト]＞［プロフィールウィジェット］を選択。ユーザー名を入力すると、自動的にツイート情報を取得してくれる【03】。

必要に応じて文字や背景の色、サイズなどをカスタマイズして【04】［完了＆コード取得］をクリックすると、組み込み用のソースコードを表示してくれるので、これを貼付ければ完了だ【05】。

［ウィジェット］＞［自分のサイト］＞［検索ウィジェット］を選択すると、キーワードの検索結果を表示できる。検索キーワード、表示ウィジェットのタイトルとサブタイトルを設定したら、プロフィールウィジェット同様に表示件数やサイズ・デザインを設定して、［完了＆コード取得］をクリックするとソースコードがき出される【06】。

【02】最初のページで「ウイジェット」を選択すると、あらかじめ用意されたいくつかの雛形を選択するページに飛ぶ。

【03】ユーザ名を入れるだけで、ウイジェットのカスタマイズが始められる。

【04】プレーンテキスト、背景、リンクテキスト、ボーダーなどの色がカスタマイズできる。

【05】デザインやサイズをカスタマイズしたら、ソースを生成して自分のサイトにコピーするだけだ。

【06】【02】で「検索ウィジェット」を選択すると、特定のキーワードやハッシュタグが含まれるツイートのウィジェットが取得できる。

@anywhereを利用する

@anywhereは、Twitterが提供している公式なプラットフォームである。これにより、一般のWebサイトにTwitterを組み込みやすくなった。例えばニュースサイトを読みながらそのページを離れることなしに記事に対するコメントをツィートしたり、筆者をフォローすることができたりと、より密にTwitterと連携することができる。その@anywhereを利用するためのjQuery プラグイン「jTweets Anywhere」を紹介しよう。

jTweetsAnywhere【07】からプラグインをダウンロードし、jQueryと一緒に読み込ませる。その上でJavaScriptを記述する【08】。「username」はTwitterのアカウントを、countは表示したいツイート数を記述する。そして、表示したいところにdivで記述すればいい【09】。

これ以外にも、jTweetsAnywhereには多くのデモが紹介されている。ツイートボックスをカスタマイズしたり、リストからツイートを表示させることも可能だ。

【07】＠anywhereの公式サイト追加。右側にある「DEMO」のリンクには、このプラグインを用いたさまざまなTwitterウィジェットの例が公開されている。

【08】JavaScriptの例。単純なウィジェットなら、たったこれだけのコードで済んでしまう。

【09】divの記述例。特に特別なコマンドは必要ない。

ツイートの方向性をどう定めるか

Twitterを自サイトのブラウザに取り込むとき、その方向性はいくつか考えられる。更新履歴を入れるとか、サイトの中の注目コンテンツに誘導するとか、キャラクターなどを擬人化して親しみを持たせるなどが代表例だろう【10】。

しかし、さまざまな方向性をひとつのTwitterアカウントでまとめるのは難しい。例に挙げたロックバンドのサイトでも、新しいファンを獲得する、既存ファンと交流する、イベントやCDの告知をするなど、さまざまな方向性が考えられる。けれどそれらをひとつのアカウントで運用するとわかりにくいし、複数のアカウントにするとサイトがうるさくなってしまう。

あらゆる商用のTwitterには、常にこの問題点が内在している。サイトに取り込む前に、どのような情報をどのような層に向けて発信すべきか、コンテンツの精査に取り組んでおくべきだ。

【10】インディーズバンド「犠牲フライズ」のTOPページ(http://alogue.com/giseiflys/)。更新履歴の次にtwitterのウィジェットを貼り付けている。カラーリングはサイトのバックグラウンドに合わせている。

[目次に戻る]

【本記事について】
2012年1月28日発売のweb creators特別号「Webサイト制作最新トレンドの傾向と対策」から、毎週記事をピックアップしてご紹介! HTML5・CSS3によるコーディングから、次々と生まれてくる新しいソーシャルサービス、Webアプリケーション、スマートフォンやタブレット端末への対応など、いまWeb制作で話題になっているトピックを網羅した内容になっています。

※本記事はweb creators特別号『Webサイト制作最新トレンドの傾向と対策』からの転載です。この記事は誌面でも読むことができます。