WordPressにTwitterのタイムラインを設置する方法

公開日: 2015年11月24日
最終更新日: 2016年05月13日


wordpress-twitter-widget-top

 

WordPressとソーシャルメディア(Twitter・Facebook等)の連携は、コンテンツを主体としたマーケティングを加速させる上で非常に重要な施策です。

 

特に、サイトを立ち上げて間もない時期はSEOからの検索トラフィックが少ないため、記事の更新情報をTwitterのようなソーシャルメディアを使って告知し、サイトへ誘導するというのはとても効果的な手段です。

 

コンテンツが拡散されるというのはリンクが拡散されるのと同義です(Twitterであれば、あなたのサイトURLがリツイートに含まれている場合)ので、直接的な集客効果だけでなく、外部リンク対策としても(間接的な)SEO効果があります。


※外部リンク対策については、「検索上位表示の常連サイトが例外なくやっている3つの基本的なSEO対策」という記事の中で詳しく解説しているので、ぜひご一読下さい。

 

 

当記事では、WordPressサイトとTwitterを連携させる際に有効な、TwitterのタイムラインウィジェットをWordPressサイトに設置する方法について解説していきたいと思います。

早ければ3分程度で設置できてしまいますので、ぜひ採り入れてみて下さい。

 

 

― 目次 ―

1. WordPressにTwitterのタイムラインウィジェットを設置する手順

1-1. Twitterのページでタイムライン用のHTMLコードを取得する

1-2. WordPressにHTMLコードを設置する

1-3. スマホ表示に最適化してユーザビリティを上げる

 

 

1. WordPressにTwitterのタイムラインウィジェットを設置する手順

具体的な設置作業に入っていく前の事前準備として、あらかじめTwitterにログインしておいて下さい(例:当サイトであれば@NetBizRecipesというTwitterアカウントでログイン)。

 

それでは具体的な設置作業を始めていきましょう。

 

 

1-1. Twitterのページでタイムライン用のHTMLコードを取得する

こちら↓のリンクをクリックし、Twitterの「ウィジェット作成ページ」へ移動します。


Twitter・ウィジェット作成ページ

 

 

こちらのページでは、WordPressに設置するための、Twitterタイムライン用HTMLコードを作成します。「新規作成」をクリックして下さい。

wordpress-twitter-widget-001

 

 

次の画面↓では、設置するTwitterタイムラインのカスタマイズが可能です。「設定」をいじることで、設置するTwitterタイムラインのイメージを「プレビュー」で確認することができます。

ただし、(Twitterアカウントを新しく作った直後など)一度もツイートをしたことがない状態では、いくら「設定」を変えてみても「プレビュー」が表示されません。

そんな時は、一度適当な“テストツイート”をしてみることをオススメします(※ツイートは後で削除できます)。

wordpress-twitter-widget-002

 

 

ご自身のサイトイメージに合わせて、「高さ」「テーマカラー」「リンクの色」の設定を変えてみましょう。

wordpress-twitter-widget-003

 

 

ちなみに「リンクの色」には、好きなカラーコードを直接入力することが可能です。

wordpress-twitter-widget-004

 

 

「設定」が終わったら、「ウィジェットを作成」をクリック。

wordpress-twitter-widget-005

 

 

画面上部に「ウィジェットが作成されました。」と表示され、画面下部にタイムライン用のHTMLコードが表示されます。

wordpress-twitter-widget-006

 

 

こちらのHTMLコードをコピーして下さい。

wordpress-twitter-widget-007

 

 

1-2. WordPressにHTMLコードを設置する

次に、WordPressのダッシュボードへログインし、画面左側のメニューから「外観」→「ウィジェット」の順にクリックしましょう。

wordpress-twitter-widget-008

 

 

「ウィジェット」の中から「テキスト」という項目を探して下さい。見つけたらそこをクリック。

wordpress-twitter-widget-009

 

 

今回は例としてサイト内の「サイドバー」に設置してみたいと思います。設置する場所にチェックを入れ、「ウィジェットを追加」をクリック。

wordpress-twitter-widget-0010

 

 

テキストのウィジェットが表示されますので、ここに先ほど取得したTwitterのタイムライン用HTMLコードを貼り付けましょう。

wordpress-twitter-widget-011

 

 

「タイトル」を入力し、「内容」の部分にHTMLコードを貼り付けて、「保存」をクリックします。

wordpress-twitter-widget-012

 

 

ここまでで設置作業は完了です。試しにサイトを表示させてみましょう。

wordpress-twitter-widget-013

 

 

1-3. スマホ表示に最適化してユーザビリティを上げる

もしもあなたのサイトがレスポンシブデザインを採用しているのであれば、こちら↓のような形でTwitterウィジェットの横幅を調整することをオススメします。

現状のままではTwitterウィジェットの横幅が大きすぎるため、スマートフォンでの画面スクロールが非常にやりづらいです。

wordpress-twitter-widget-014

 

 

先ほどのHTMLコードに多少の変更を加えるだけで簡単に縮小できます

こちら↓のコードの赤字部分を、先ほどのコードに追加して下さい。「 width=”300″ 」の前後の半角スペースも忘れずに追加しましょう(※▲の部分はアカウントごとに違います)。


<div align=”center”>
<a class=”twitter-timeline” width=”300″ href=”https://twitter.com/▲▲▲▲▲▲▲” data-widget-id=”▲▲▲▲▲▲▲▲▲▲”>@▲▲▲▲▲▲▲ Tweet</a>

<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?’http’:’https’;if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+”://platform.twitter.com/widgets.js”;fjs.parentNode.insertBefore(js,fjs);}}(document,”script”,”twitter-wjs”);</script></div>

 

WordPressのダッシュボード左側メニューから、「外観」→「ウィジェット」と進み、先ほど追加した「テキスト」の「内容」に、書き換えたこちら↑のHTMLコードに貼り付けます。

最後に「保存」をクリックして下さい。

wordpress-twitter-widget-015

 

 

細かい部分ではありますが、ユーザビリティ向上のためにぜひ最適化しておきましょう。

 

コメントを残す

サブコンテンツ
ページトップへ戻る ページエンドへ進む