Twitterのタイムラインを表示したい

2016年6月9日

「twitterのタイムラインをサイドバーに表示したいです。」というご要望がありました。

手順としては、

1.twitterからタイムラインの埋め込みコードを取得する
2.WordPressに埋め込みコードを貼り付ける

の流れになります。

以下に説明しておきます。

1.twitterからタイムラインの埋め込みコードを取得する

はじめにtwitterにログインしておきます。

その状態で、以下のページを開きます。

twitterの「埋め込みユーザータイムライン」の説明ページ

tw-timeline-01

ページ内にある「新しい埋め込みユーザータイムラインの作成」のリンクを開きます。

以下のようなページが開きます。ログインしている自分のアカウントのタイムラインを表示したければ、そのまま「set customization options」をクリックして、カスタマイズ設定に進みます。

tw-timeline-02

もしくは、ログインしているアカウントとは別のアカウントのタイムラインを表示したい場合には、ページを上にスクロールさせると、以下の画面が表示されるので、ここに、設定したいtwitterのページのURLを貼り付けて、右にある→ボタンをクリックします。

tw-timeline-03

上部が閉じて、表示されるタイムラインが設定したものに変更していること(黄色部分)を確認します。その上で、「set customization options」をクリックして、カスタマイズ設定に進みます。

tw-timeline-04

 

上部に幅と高さを調整するための入力欄が表示されます。

tw-timeline-05

高さは、400程度、幅は300として、設定します。(幅は、貼り付けるサイドバーの幅にあわせます)。下部にプレビューが表示されるので、高さはお好みで調整します。

tw-timeline-06

サイズがよければ、「Update」ボタンをクリックします。
貼付け用コードが表示されるので、「Copy Code」をクリックしてコピーします。

tw-timeline-07

コピー完了の画面が表示されて、貼付けようコードの取得は完了です。

tw-timeline-08

続いて、WordPressへの貼り付け方法を説明します。

2.WordPressに埋め込みコードを貼り付ける

管理画面にログインして、左メニューの外観>ウィジェットを開きます。右側のウィジェット一覧より、「テキスト」ウィジェットをクリックします。

tw-timeline-10

右サイド領域がチェックされていることを確認して、「ウィジェットを追加」をクリックします。

tw-timeline-11

右サイド領域のウィジェットエリア内に、テキストウィジェットが追加されます。

tw-timeline-12

「内容」の入力欄に、さきほどコピーしたtwitterの貼付け用コードを貼り付けます。(Ctrl+Vキーなど)。貼付け後、保存ボタンをクリックします。

tw-timeline-13

特に、画面上は変化しませんが、これで完了です。

実際の公開されているページを確認します。こんな感じに表示されます。

tw-timeline-14

場所を調整する場合は、追加した「テキスト」ウィジェットの位置をドラッグ&ドロップで移動します。

tw-timeline-15

希望の場所に配置することで、設定完了です。

お客様での導入事例ご紹介

セルフラブコーチング様のサイドバーにて表示されています。ご参考にしてみてください。

tw-timeline-16

 

 

カテゴリー: 
ページトップへ