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にログインした状態で下記リンクをクリックしてください。
公式サイト 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にログインした状態で、下記リンクをクリックしてください。
公式サイト ページプラグイン – ソーシャルプラグイン – ドキュメンテーション – 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ページを運営している方は、是非、埋め込みしておきましょう。
埋め込みたいデザインを選択して貼り付けるだけなので、時間は殆どかかりませんので是非お試しください。