Twitterのウィジェット「埋め込みタイムライン」を使ってみよう

2012年09月06日
TEXT：編集部

TwitterよりWebサイトオーナー向けに「埋め込みタイムライン」の提供が開始となりました。このウィジェットを使うことで、TwitterのタイムラインをWebサイトへ手軽に組み込むことができます。さらに、埋め込んだタイムラインからほかのユーザーがつぶやく機能も用意されています。設定も非常に簡単なので、ぜひお試しください。

1. ウィジェットの設定画面にアクセス
PCのWebブラウザからTwitterにログインしたのち、設定画面から「ウィジェット」を選択します。ここから［新規作成］ボタンを押して作成を開始しましょう。

2. ツール画面で各種設定
［新規作成］ボタンを押すと、以下のような設定画面が表示されます。「タイムライン」「お気に入り」「リスト」「検索」とそれぞれに関する埋め込みタイムラインが作成できますが、ここでは通常のタイムラインを作成します。左側の「オプション」にある項目を変更してカスタマイズしていきます。カスタマイズした結果は右側のプレビューで確認が可能。オプションの項目は以下の通りです。設定が終わったら［ウィジェットを作成］ボタンをクリックします。

●ユーザー名
Twitterアカウント名を入力します。ほかのユーザーのアカウント名を入れることもできます。

●高さ
タイムラインの高さをピクセル単位で変更できます。なお、デフォルトのサイズは520×600ピクセル。横幅はWebサイトに合わせて自動で変更されます。

●テーマ
「明るい」「暗い」の2種類から設定できます。ツイートに添付した画像などを事前に開いた状態で表示させたい場合は「画像を自動的に開く」にチェックを入れましょう。

●リンクの色
リンクの色が設定できます。カラーピッカーから選択したり、Webカラーで指定しましょう

●ドメイン
埋め込むWebサイトのドメインを入力します。さらにTwitterのカスタマイズ機能を無効にしたい場合はチェックボックスをクリックしましょう。

3. コードを取得してWebサイトに埋め込む
すると画面下部に、コードが表示されました。このコードをコピーしてWebサイトに張り付けましょう。実際にこのWebページ最下部にも埋め込んでみました。たったこれだけで、WebサイトにTwitterのタイムラインが表示できますので、興味のある方はぜひお試しください。

@MdN_tsushin からのツイート !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");