WordPressサイトにSNS（TwitterやFacebookページなど）のタイムラインを表示させる方法をお探しの方向け。
SNS（TwitterやFacebookページ）のタイムラインをWebサイトに表示させる事で、SNSとの相乗効果が見込め、検索以外のアクセス流入を獲得できるようになります。
この記事では、TwitterやFacebookページ等のSNSタイムラインをサイドバーやフッターに埋め込み表示させる手順を解説します。
好きなところから読めます
WordPressにSNSタイムラインを表示させる時の事前準備は2つ
WordPressサイトにSNSのタイムラインを表示させる際、最初に次の2つのことを決めておきましょう。
- タイムラインを設置するエリア
- タイムラインの幅・高さを決める
上記のとおりです。
タイムラインを設置するエリア
SNSのタイムラインをサイドバーに設置するのか、フッターウィジェットエリアに設置するのかを最初に決めておくようにしましょう。
理由は、サイドバーとフッターウィジェットエリアの横幅はサイズが異なる場合が殆どですので、予め設置するエリアを決めておき、その後にサイズを決めた方が見た目が良くなるからです。
タイムラインのサイズ（幅・高さ）を決める
表示させるエリアが決まったら、タイムラインのサイズ（幅・高さ）を決めましょう。
「Lightningテーマ」はレスポンシブテーマなので、多少、サイズが大きくても自動修正されますので、見た目的な問題は特にありません。
しかし、サイズが小さいと横幅がバラバラになってしまい、見た目が悪くなりますので、サイズは統一するようにしましょう。
WordPressサイトにTwitterのタイムラインを表示する手順
WordPressサイトにTwitterのタイムラインを表示する手順を解説します。
- 手順①：Twitter埋め込みコードを取得する
- 手順②：埋め込みコードをウィジェットに貼り付ける
上記のとおりです。
手順①：Twitter埋め込みコードを取得する
WordPressサイトにTwitterのタイムラインを表示させるには、埋め込み用のHTMLコードが必要になります。
Twitterの埋め込み用のHTMLコードは、Twitterウィジェットの作成ページから取得できます。
Twitterにログインした状態で下記リンクをクリックしてください。
参考リンク：Twitter Publish
クリックすると、下図の画面が表示されますので、タイムラインを表示させたいTwitterアカウントのURLを入力し、「→」をクリックします。
アカウントのURLは下記形式となっています。
https://twitter.com/〇〇〇〇 ←あなたのアカウントID
URLを入力すると、埋め込み表示の形式を選択できます。
左側の「Embeded Timeline」を選択すると、タイムライン形式で表示されます。
埋め込み用のHTMLコードとタイムラインのプレビューが表示された画面に移動します。
このままではサイズが大きいので、「set customization options」でタイムラインの幅・高さ・デザインを設定します。
ウィジェットのサイズや見た目を変更できます。
「Lightningテーマ」のサイドバーに設置する事を想定し、横幅は262pxで設定してみます。
各項目の設定方法は次のとおりです。
- ①「横幅」を指定します。
- ②「高さ」を指定します。
- ③ウィジェットの背景を「Light：白」「Dark：黒」の２種類選択できます。
- ④タイムライン内のリンクの色を変更でき、６種類の中から選択できます。
- ⑤言語セレクタです（初期設定は「Automatic」です）。
- ⑥決定ボタンです。
- ⑦プレビューです。
プレビューでサイズや見た目を確認し、設定が決まりましたら「Updete」をクリックします。
カスタマイズで設定されたHTMLコードが出力されますので、HTMLコードをコピーします。
手順②：埋め込みコードをウィジェットに貼り付ける
Twitterの埋め込みコードを取得したら、WordPressのサイドバーウィジェットに埋め込みコードを貼り付けます。
ダッシュボード＞外観＞ウィジェット を選択します。
「カスタムHTML」をタイムラインに表示させたいウィジェットエリアにドラッグします。
取得したTwitter埋め込みコードを、①ウィジェットの内容蘭にコピーして、②「保存」をクリックします。
プレビューで確認すると、サイドバーにTwitterタイムラインが表示されている事が確認できます。
以上でWordPressサイトにTwitterのタイムラインを表示する手順は終了です。
WordPressサイトにFacebookページのタイムラインを表示する手順
WordPressサイトにFacebookページのタイムラインを表示する手順を解説します。
- 手順①：Facebook埋め込みコードを取得する
- 手順②：埋め込みコードをウィジェットに貼り付け
上記のとおりです。
手順①：Facebookページの埋め込みコードを取得する
WordPressサイトにFacebookページのタイムラインを表示させるには、埋め込み用のHTMLコードが必要になります。
Facebookページの埋め込み用のHTMLコードは、Facebookデベロッパーツールから取得できます。
Facebookにログインし、下記リンクをクリックしてください。
ページプラグイン – ソーシャルプラグイン – ドキュメンテーション – Facebook for Developers
埋め込み表示の設定画面が表示されますので、表示させたいFacebookページの設定を行います。
先程と同様、横幅は262pxで設定しておきます。
各項目の設定方法は次のとおりです。
- ①FacebookページのURLを入力します。
- ②タブは初期設定のまま「timelime」にしておきます。
- ③「横幅」を指定します。
- ④「高さ」を指定します。
- ⑤スモールヘッダーをし使用する場合はチェックします。
- ⑥カバー写真を非表示にしたい場合はチェックします。
- ⑦plugin containerの幅に合わせる場合はチェックします。
- ⑧友達の顔を表示する場合はチェックします。
- ⑨プレビュー表示エリアです。
- ⑩設定が終わりましたら「コードを取得」をクリックします。
プレビューでサイズや見た目を確認し、設定が決まりましたら「コードを取得」をクリックします。
Facebookページ埋め込み用のコードが表示されますので、上・下両方のコードをコピーします。
メモ帳などに保存しておくと良いかと思います。
以上でFacebookページ埋め込み用のコード取得は完了です。
手順②：埋め込みコードをウィジェットに貼り付け
Facebookページの埋め込みコードを取得したら、WordPressのサイドバーウィジェットに埋め込みコードを貼り付けます。
ダッシュボード＞外観＞ウィジェット を選択します。
「カスタムHTML」をタイムラインに表示させたいウィジェットエリアにドラッグします。
取得したFacebookページの埋め込みコードを①ウィジェットの内容蘭にコピーして、②「保存」をクリックします。
プレビューで確認すると、サイドバーにFacebookページのタイムラインが表示されている事が確認できます。
以上でFacebookページにタイムラインを表示させる手順は完了です。
まとめ
以上、WordPressにTwitter・Facebookページ等のSNSタイムラインを表示させる手順を解説しました。
運営しているSNSのタイムラインを設置する事でSNSのフォロワー獲得につながる可能性がありますので、TwitterやFacebookページを運営している方は、是非、埋め込みしておきましょう。
埋め込みたいデザインを選択して貼り付けるだけなので、時間は殆どかかりませんので是非お試しください。
