ブロギングライフ

ブログサイト運営関連、AdSenseについての情報などを発信しています。

Twitterのタイムラインをサイドバーに組み込む

Twitterのタイムラインをサイドバーに組み込む

Twitterは、アカウントなどのタイムラインを他のサイトで表示させるウィジェットを提供しています。Twitterのタイムラインウィジェットを利用すると、ブログ運営者のツイッターアカウントのツイートのタイムラインをブログなどに表示することができます。

Twitterのタイムラインウィジェットを利用して、パソコン表示のブログ画面右側のサイドバーにTwitterのタイムラインを表示させる方法について紹介します。

以下は本記事で紹介している手順を実際に行ったYouTubeビデオです。

ツイッターのタイムライン・ウィジェットを作成する

ツイッターのアカウントにログインします。トップメニューバーの右にあるアカウントのアイコンをクリックし、ドロップダウンメニューの中から設定を選びます。

01

① 設定画面の左側のメニューの一番下に表示されている”ウィジェット”をクリックします。

② 表示されるウィジェットの設定の右側の”新規作成”のボタンをクリックします。

02

ユーザーウィジェットの作成画面が表示されます。設定内容を確認してください。テーマは、”明るい”と”暗い”から選択できます。

03

ツイッターのタイムラインを埋め込むブログのテンプレートのバックグラウンドが黒のため、ここではテーマは”暗い”を選択しました。

プレビューの表示がバックグラウンドが暗い色に変更になりました。

04

設定とプレビューの表示を確認の上、それで良ければ、”ウィジェットを作成”の青色ボタンを押します。冗談に”ウィジェットが作成されました。”のメッセージが表示され、下段の枠内(赤枠で囲ってある箇所)にコードが生成され表示されています。

このコードをコピーします。(コントロール+”C”やマウス右クリックで”コピー”)

05

BloggerにTwitterのタイムライン・ウィジェットを追加する。

ブロガーのアカウントにログインして、管理画面左のメニューの中の”Layout”(レイアウト)をクリックします。

06

レイアウト画面にて、サイドバーエリアの”Add a Gadget” (ガジェットを追加する)をクリックします。

08

小ウインドウが開かれます。その中の”HTML/JavaScript(赤枠の中)の右に表示されている+ボタンをクリックします。

09

ウィジェットの設定画面が表示されます。タイトルに”ツイッター”と入力しています。

入力欄右上の赤枠で囲ってある”Rich Text”をクリックし、入力をHTMLに切り替えます。

10

入力欄右上の表示が”Edit Html”に変わっています。赤枠の内側に、Twitterのアカウントで作成したタイムライン・ウィジェットのコードをペースト(貼り付け)します。

オレンジ色のSave (保存)ボタンを押します。

11

小ウインドウが閉じ、レイアウト設定画面が表示されます。サイドバーのエリアに、ツイッターのガジャットが追加されています。(画面赤枠で囲った部分)

オレンジ色のSave  arragenment(変更を保存)ボタンを押します。

12

以上で設定完了です。

ブログを表示して、確認してみます。サイドバーにツイッターのタイムラインが追加されています。

尚、この時点で表示しているツイッターのタイムラインには、一つのツイートしかありません。これは、このツイッターのアカウントが作成されたばかりで、ツイートが一つしかないためです。

07

今回作成したツイッターのタイムラインの組み込み事例は、Bloggerの”ブログライフ Tutorial“で実際にご覧になることができます。

コメントを残す(承認後表示されます)

*
*
* (公開されません)

Return Top
error: Content is protected !!