iPhone 11を安く買うなら

2分で完了!ワードプレスのサイドバーにTwitterのタイムラインを埋め込む方法

ワードプレスにツイッターのタイムライン埋め込み

Twitterタイムラインはワードプレスに連携させて表示させることができます。もちろん、リアルタイムのツイートが反映されます。

この記事では、ワードプレスのサイドバーにTwitterタイムラインを表示する方法について解説していきます。

英語のページが出てきますが、やることは超簡単なのでご安心下さい。

プラグインは使用しません。はじめての方でも2分で設定できますよ。

1.【STEP1】Twitterタイムラインのコードを取得する

最初に何をすればいいですか?

専用ページからワードプレスに埋め込むコードを取得するの。

まずは、ワードプレスに貼り付けるために必要な、Twitterタイムラインのコードを取得します。

以下のURLにアクセスして下さい。

>>Twitterタイムラインのコード取得ページ

※以前は、Twitterの「設定とプライバシー」→「ウィジェット」からコードを取得できていましたが、現在は仕様変更で使えなくなっています

上記のURLにアクセスしたら、「What would you like to embed?」と書かれたページが表示されたかと思います。

ここに、「https://twitter.com/ユーザ名」を入力して「→」をクリックしてください。ユーザ名は、自分のTwitterアカウントが「@tarou」だったらユーザ名は「tarou」となります。

twitterタイムラインをWPを表示

次に、ディスプレイ表示の種類を選択します。今回は、タイムラインを表示したいので「Embedded Timeline」を選択して下さい。

twitterタイムラインをWPを表示2

すると、コードが表示されます。

ひとまずこれでOKなのですが、ワードプレスで表示されるタイムラインの高さを調整したいので、「set customization options」をクリックします。

twitterタイムラインをWPを表示3

設定すべき項目は、Height(px)です。推奨は600~800。私は600に設定しています。

twitterタイムラインをWPを表示4

この設定で、ワードプレス上でのTwitterタイムラインが綺麗に表示されます。

その他の項目はデフォルトでOKです。

一応説明しておくと、Width(px)がタイムラインの幅。2段目の「How would you like this to look?」がタイムラインの背景色とツイートのリンクカラーです。

ちなみに、タイムラインの背景色をデフォルトの「Light」から「Dark」にするとこんな感じで背景が真っ黒に。

WPにtwitter

微妙ですね・・。

3段目の「What language would you like to display this in?」は言語の選択という意味。「Automatic」のままにしておきましょう。

設定が終わったら、「Update」をクリックします。

twitterタイムラインをWPを表示5

これで詳細設定が反映されたコードが出力されます。「Copy Code」をクリックしましょう。

twitterタイムラインをWPを表示6

コピー完了の表示が出ます。

twitterタイムラインをWPを表示7

次は、コピーしたコードをワードプレスに貼り付けます。

2.【STEP2】取得したコードをワードプレスに貼り付ける

タイムラインのコードを取得できました!

あとは、ワードプレスに貼り付けるだけね。ウィジェットを開いてちょうだい。

ワードプレスにログインしたら、ダッシュボードの「外観」→「ウィジェット」を選択してください。

「利用できるウィジェット」から「テキスト」を選んで、「サイドバー」に移動(ドラッグ&ドロップ)します。

twitterタイムラインをWPを表示8

次に、「テキスト」のタブを開いて、先ほどコピーしたコードを貼り付けます。最後に、「保存」をクリックしたら設定完了です。

twitterタイムラインをWPを表示8

実際に、表示が上手くいっているのか確認してみましょう。

WPにtwitter2

いい感じですね。

なお、今回はTwitterタイムラインをサイドバーに表示させましたが、ウィジェットからフッターエリアにを表示することも可能です。

3.【おまけ】フォローボタンも一緒に付けてみよう

狙い通り、Twitterのタイムラインをワードプレスに設置できました。

いい感じね。だけど、フォローボタンも同時に設置したくない?フォロワーを増やせるわよ。

せっかくワードプレスにTwitterを埋め込むなら、タイムラインの表示だけでなくフォローもしてほしいですよね。

そんなときは、タイムライン表示+フォローボタンを設置します。先に完成形をお見せすると、こんな感じです。

WPにtwitter3

やることは簡単。「先ほどコードを取得したページ」に戻って、ディスプレイオプションで「Twitter Buttons」を選びます。

twitterタイムラインをWPを表示11

設置ボタンの選択が表示されるので、「Follow Button」を選びます。

twitterタイムラインをWPを表示12

フォローボタンの詳細設定ができます。以下の2箇所をお好みで調整しましょう。

Would you like to simplify the button text?
→フォローボタンからユーザー名を隠す

How would you like the button displayed?
→フォローボタンを大きくする

twitterタイムラインをWPを表示13

私は、フォローボタンを大きくしたいので、「Large Button」にチェックを入れています。

設定が終わったら「Update」をクリック。タイムラインのときと同じ要領で、コードを取得してワードプレスに貼り付けます。

タイムラインのコードを貼り付けたテキストウィジェットに、貼り付けると綺麗に表示されます。タイムラインのコードから1行空けて貼り付けて下さいね。

twitterタイムラインをWPを表示14

以上で設定は完了です。

4.【まとめ】Twitterのタイムラインを埋め込んで、効率よくフォロワーを集めよう

ブログにアクセスしてくれるユーザーをファン化させるには、Twitterはとても有効です。

SNSの方が気軽にリーチできますし、ワードプレスより交流しやすいのがメリット。

なので、せっかくワードプレスでブログを運用するなら、Twitterのタイムラインやフォローボタンを埋め込んで、アピールしておくといいですよ。

設置時間は2分。効率よくフォロワーを集めるためにも、ぜひ実践してみましょう。

コメントを残す

メールアドレスが公開されることはありません。