サイドバーにTwitterのタイムラインウィジェットを設置する方法

Twitterは、ウェブサイトとの連携する機能が豊富に用意されているのが特徴です。Twitterのウィジェットを使用すると記事内やサイドバーにツイートやタイムラインを埋め込むことができます。

本記事では、パソコン画面のサイドバーにTwitterのタイムラインウィジェットを設置する方法を紹介します。

[post_ads]

サイドバーにTwitterのタイムラインウィジェットを設置する方法

Twitter タイムライン ウィジェットの作成

パソコンのブラウザでTwitterのページを表示して、ページの右上のアカウントアイコン（ツイート作成ボタンの左隣）をクリックするとドロップダウンメニューが表示されます。メニュー項目の中の「設定とプライバシー」を選びます。

設定ページの左の項目の中から、［ウィジェット］をクリックすると、ウィジェット作成ページが表示されます。［新規作成］のボタンを押します。

作成するウィジェットの種類を選ぶドロップダウンメニューが表示されます。

現在、以下の5種類のウィジェットが用意されています。

• プロフィール
• いいね
• リスト
• コレクション
• 検索

ここでは、プロフィールを選びます。

"What would you like to embed?" （何を埋め込みたいですか？）と言うメッセージが表示されます。その下にある入力欄に埋め込むTwitter プロフィールのURLを入力します。

埋め込みタイムラインかTwitterボタンの選択画面が表示されます。ここでは、埋め込みタイムラインを選びます。

埋め込みタイムラインウィジェットが作成され、コードとプレビューが表示されます。ウィジェットはサイズなどのカスタマイズが可能です。"Set customization options"をクリックします。

カスタマイズ設定できるのは、以下の5項目です。

• 高さ
• 幅
• 明るい or 暗い
• リンクカラー
• 言語

設定した項目の内容に応じて、リアルタイムでウィジェットがプレビュー表示されます。

ここでは、高さ550px、幅300pxを設定しました。設定後、[Update]ボタンを押します。

カスタマイズ設定更新後のウィジェットのコードとプレビューが表示されます。[Copy Code]ボタンを押して、コードをコピーします。

Twitter ウィジェットをBloggerのサイドバーに設置する

作成したTwitterウィジェットのコードをサイトに設置します。ここではBloggerでの例を紹介しますが、基本的なやり方はWordPress等、他のCMSでも同じです。

Bloggerの管理メニューからレイアウトを選びます。サイドバーのガジェットエリア内の「ガジェットを追加」をクリックします。

ウィジェットを選択する小ウィンドウが表示されます。「HTML/JavaScript」を選びます。

タイトルを入力（オプション）してコンテンツの欄に作成してコピーしたTwitterウィジェットのコードを貼り付けます。

［保存］ボタンを押すと、ガジェットのウィンドウが閉じて、Bloggerのレイアウトに戻ります。サイドバーに追加したガジェットが表示されます。

ガジェットの配置は、ドラッグアンドドロップで簡単に変更可能です。ここでは、Twitterタイムラインウィジェットをサイドバーの下に移動しています。

作業は以上です。ブログを表示して、サイドバーにTwitterタイムラインウィジェットが表示されているか確認します。

記事での説明は長めですが、実際の作業は比較的簡単です。本記事の内容をYouTubeの動画でも紹介しています。よろしければ、ご覧になって下さい。（本設定の場合は、動画の方が簡単で、分かりやすいかもしれません。）