WordPressにTwitter・FacebookページのSNSタイムラインを表示させる手順

WordPress

TwitterやFacebookページ等といった、SNSのタイムラインをWebサイトに表示させる事で、SNSとの相乗効果が見込め、検索以外のアクセス流入を獲得できるようになります。

この記事では、TwitterやFacebookページ等のSNSタイムラインをサイドバーやフッターに埋め込み表示させる手順を解説します。

スポンサーリンク

WordPressにSNSタイムラインを表示させる時の事前準備

WordPressサイトにSNSのタイムラインを表示させる際、最初に次の2つのことを決めておくようにしましょう。

  • 表示させるエリア
  • タイムラインの幅・高さを決める

上記のとおりです。

表示させるエリア

SNSのタイムラインをサイドバーに設置するのか、フッターウィジェットエリアに設置するのか最初に決めた方が良いです。

理由は、サイドバーとフッターウィジェットエリアの横幅はサイズが異なる場合が殆どですので、予め設置するエリアを決めておき、その後にサイズを決めた方が見た目が良くなります。

タイムラインのサイズ(幅・高さ)を決める

参考までに、「Lightningテーマ」のサイドバーの幅は262pxで、フッターウィジェットエリアの幅は360pxです(GoogleChromeの要素検証でチェックする限り)。

「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で設定してみます。

  1. 「横幅」を指定します。
  2. 「高さ」を指定します。
  3. ウィジェットの背景を「Light:白」「Dark:黒」の2種類選択できます。
  4. タイムライン内のリンクの色を変更でき、6種類の中から選択できます。
  5. 言語セレクタです(初期設定は「Automatic」です)。
  6. 決定ボタンです。
  7. プレビューです。

プレビューでサイズや見た目を確認し、設定が決まりましたら「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で設定しておきます。

「plugin containerの幅に合わせる」にチェックを入れると、横幅を指定しなくても設置場所の横幅に収まるよう最適化されます。

  1. FacebookページのURLを入力します。
  2. タブは初期設定のまま「timelime」にしておきます。
  3. 「横幅」を指定します。
  4. 「高さ」を指定します。
  5. スモールヘッダーをし使用する場合はチェックします。
  6. カバー写真を非表示にしたい場合はチェックします。
  7. plugin containerの幅に合わせる場合はチェックします。
  8. 友達の顔を表示する場合はチェックします。
  9. プレビュー表示エリアです。
  10. 設定が終わりましたら「コードを取得」をクリックします。

プレビューでサイズや見た目を確認し、設定が決まりましたら「コードを取得」をクリックします。

Facebookページ埋め込み用のコードが表示されますので、上・下両方のコードをコピーします。

メモ帳などに保存しておくと良いかと思います。

以上でFacebookページ埋め込み用のコード取得は完了です。

手順②:埋め込みコードをウィジェットに貼り付け

Facebookページの埋め込みコードを取得したら、WordPressのサイドバーウィジェットに埋め込みコードを貼り付けます。

ダッシュボード>外観>ウィジェット を選択します。

「カスタムHTML」をタイムラインに表示させたいウィジェットエリアにドラッグします。

取得したFacebookページの埋め込みコードを①ウィジェットの内容蘭にコピーして、②「保存」をクリックします。

タイトルは入れても入れなくてもどちらでも良いかと思います。

プレビューで確認すると、サイドバーにFacebookページのタイムラインが表示されている事が確認できます。

以上でFacebookページのタイムラインの設置は完了です。

 

まとめ

以上、WordPressにTwitter・Facebookページ等のSNSタイムラインを表示させる手順を解説しました。

運営しているSNSのタイムラインを設置する事でSNSのフォロワー獲得につながる可能性がありますので、TwitterやFacebookページを運営している方は、是非、埋め込みしておきましょう。

埋め込みたいデザインを選択して貼り付けるだけなので、時間は殆どかかりませんので是非お試しください。

 

 

人気記事【Twitter】効率的にフォロワーを増やすアカウント運用ツール「SocialDog」

人気記事【無料あり】オンラインプログラミングスクールおすすめ3選【通学不要】

トップへ戻る
タイトルとURLをコピーしました