Twitterタイムラインはワードプレスに連携させて表示させることができます。もちろん、リアルタイムのツイートが反映されます。
この記事では、ワードプレスのサイドバーにTwitterタイムラインを表示する方法について解説していきます。
英語のページが出てきますが、やることは超簡単なのでご安心下さい。
プラグインは使用しません。はじめての方でも2分で設定できますよ。
1.【STEP1】Twitterタイムラインのコードを取得する
まずは、ワードプレスに貼り付けるために必要な、Twitterタイムラインのコードを取得します。
以下のURLにアクセスして下さい。
※以前は、Twitterの「設定とプライバシー」→「ウィジェット」からコードを取得できていましたが、現在は仕様変更で使えなくなっています
上記のURLにアクセスしたら、「What would you like to embed?」と書かれたページが表示されたかと思います。
ここに、「https://twitter.com/ユーザ名」を入力して「→」をクリックしてください。ユーザ名は、自分のTwitterアカウントが「@tarou」だったらユーザ名は「tarou」となります。
次に、ディスプレイ表示の種類を選択します。今回は、タイムラインを表示したいので「Embedded Timeline」を選択して下さい。
すると、コードが表示されます。
ひとまずこれでOKなのですが、ワードプレスで表示されるタイムラインの高さを調整したいので、「set customization options」をクリックします。
設定すべき項目は、Height(px)です。推奨は600~800。私は600に設定しています。
この設定で、ワードプレス上でのTwitterタイムラインが綺麗に表示されます。
その他の項目はデフォルトでOKです。
一応説明しておくと、Width(px)がタイムラインの幅。2段目の「How would you like this to look?」がタイムラインの背景色とツイートのリンクカラーです。
ちなみに、タイムラインの背景色をデフォルトの「Light」から「Dark」にするとこんな感じで背景が真っ黒に。
微妙ですね・・。
3段目の「What language would you like to display this in?」は言語の選択という意味。「Automatic」のままにしておきましょう。
設定が終わったら、「Update」をクリックします。
これで詳細設定が反映されたコードが出力されます。「Copy Code」をクリックしましょう。
コピー完了の表示が出ます。
次は、コピーしたコードをワードプレスに貼り付けます。
2.【STEP2】取得したコードをワードプレスに貼り付ける
ワードプレスにログインしたら、ダッシュボードの「外観」→「ウィジェット」を選択してください。
「利用できるウィジェット」から「テキスト」を選んで、「サイドバー」に移動(ドラッグ&ドロップ)します。
次に、「テキスト」のタブを開いて、先ほどコピーしたコードを貼り付けます。最後に、「保存」をクリックしたら設定完了です。
実際に、表示が上手くいっているのか確認してみましょう。
いい感じですね。
なお、今回はTwitterタイムラインをサイドバーに表示させましたが、ウィジェットからフッターエリアにを表示することも可能です。
3.【おまけ】フォローボタンも一緒に付けてみよう
せっかくワードプレスにTwitterを埋め込むなら、タイムラインの表示だけでなくフォローもしてほしいですよね。
そんなときは、タイムライン表示+フォローボタンを設置します。先に完成形をお見せすると、こんな感じです。
やることは簡単。「先ほどコードを取得したページ」に戻って、ディスプレイオプションで「Twitter Buttons」を選びます。
設置ボタンの選択が表示されるので、「Follow Button」を選びます。
フォローボタンの詳細設定ができます。以下の2箇所をお好みで調整しましょう。
Would you like to simplify the button text?
→フォローボタンからユーザー名を隠す
How would you like the button displayed?
→フォローボタンを大きくする
私は、フォローボタンを大きくしたいので、「Large Button」にチェックを入れています。
設定が終わったら「Update」をクリック。タイムラインのときと同じ要領で、コードを取得してワードプレスに貼り付けます。
タイムラインのコードを貼り付けたテキストウィジェットに、貼り付けると綺麗に表示されます。タイムラインのコードから1行空けて貼り付けて下さいね。
以上で設定は完了です。
4.【まとめ】Twitterのタイムラインを埋め込んで、効率よくフォロワーを集めよう
ブログにアクセスしてくれるユーザーをファン化させるには、Twitterはとても有効です。
SNSの方が気軽にリーチできますし、ワードプレスより交流しやすいのがメリット。
なので、せっかくワードプレスでブログを運用するなら、Twitterのタイムラインやフォローボタンを埋め込んで、アピールしておくといいですよ。
設置時間は2分。効率よくフォロワーを集めるためにも、ぜひ実践してみましょう。