WordPressにTwitter・Facebookページ等のSNSタイムラインを表示させる設定方法

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

TwitterやFacebookページ等のSNSタイムラインをサイドバーやフッターに埋め込み表示させる設定方法をご紹介します。

事前準備

ウェブサイトにSNSのタイムラインを表示させる際、下記2つを決めておくことをお勧めします。

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

表示させるエリア

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

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

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

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

「Lightningテーマ」はレスポンシブテーマなので、上記サイズより幅が大きくても自動で修正されますが、それ以下のサイズで作ってしまうと横幅がバラバラとなってしまい、見た目的にあまり良くないので、サイズは統一した方が良いです。

 

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

Twitterのタイムラインをウェブサイトに設置する方法について解説します。

Twitter埋め込みコードを取得する

あなたのTwitterのタイムラインをウェブサイトに表示させるため、埋め込み用のHTMLコードを取得します。

Twitterの埋め込み用のHTMLコードは、Twitterウィジェットの作成ページから取得する事ができます。下記リンクをクリックし、Twitterにログインしてください。

https://twitter.com/settings/widgets

ログインするとウィジェットの作成画面に移動しますので、新規作成から「プロフィール」を選択して下さい。

下記画面が表示されますので、タイムラインを表示させたいTwitterアカウントのURLを入力し、「→」をクリックします。

アカウントのURLは下記形式となっています。
https://twitter.com/〇〇〇〇 ←あなたのアカウントID

URLを入力すると、埋め込み表示の形式を選択できます。左側の「Embeded Timeline」を選択すると、タイムライン形式で表示されます。

埋め込み用のHTMLコードとタイムラインのプレビューが表示された画面に移動します。

このままではサイズが大きいので、「set customization options」でタイムラインの幅・高さ・デザインを設定します。

ウィジェットのサイズや見た目を変更できます。「Lightningテーマ」のサイドバーに設置する事を想定し、横幅は262pxで設定してみます。

「横幅」を指定します。

「高さ」を指定します

ウィジェットの背景を「Light:白」「Dark:黒」の2種類選択できます。

タイムライン内のリンクの色を変更でき、6種類の中から選択できます。

言語セレクタです(初期設定は「Automatic」です)。

決定ボタンです。

プレビューです。

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

カスタマイズで設定されたHTMLコードが出力されますので、HTMLコードをコピーします。

埋め込みコードをウィジェットに貼り付ける

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

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

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

取得したTwitter埋め込みコードを内容にコピーして、「保存」をクリックします。
※タイトルは入れても入れなくてもどちらでも良いかと思います。

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

これで、Twitterタイムラインの設置は完了です。

 

Facebookページのタイムラインを設置する方法

Facebookページのタイムラインをウェブサイトに設置する方法について解説します。

Facebook埋め込みコードを取得する

あなたのFacebookのタイムラインをウェブサイトに表示させるため、埋め込み用のHTMLコードを取得します。Facebookにログインし、下記リンクをクリックしてください

https://developers.facebook.com/docs/plugins/page-plugin/

埋め込み表示の設定画面が表示されますので、表示させたいFacebookページの設定を行います。

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

FacebookページのURLを入力します。

タブは初期設定のまま「timelime」にしておきます。

「横幅」を指定します。

「高さ」を指定します。

スモールヘッダーをし使用する場合はチェックします。

カバー写真を非表示にしたい場合はチェックします。

plugin containerの幅に合わせる場合はチェックします。

友達の顔を表示する場合はチェックします。

プレビュー表示エリアです。

設定が終わりましたら「コードを取得」をクリックします。

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

Facebookページ埋め込み用のコードが表示されますので、上・下両方のコードをコピーします。メモ帳などに保存しておくと良いかと思います。

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

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

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

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

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

取得したFacebookページの埋め込みコードを内容にコピーして、「保存」をクリックします。
※タイトルは入れても入れなくてもどちらでも良いかと思います。

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

これで、Facebookページのタイムラインの設置は完了です。

 

まとめ

運営しているSNSのタイムラインを設置しておくと見やすくなりますし、SNSへのアクセスアップにつながるので、TwitterやFacebookページを運営している方は、是非、埋め込みしておきましょう。

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

Follow me!

PROFILE

Takashi Sema
上野を拠点に中小企業の資金繰り・事業再生コンサルタントとして活動しています。
最近は自分でウェブサイトを作りたいという企業や、独立された方、独立を考えている方等にWordPressを活用したウェブサイト作り方をレクチャーしています。

他にも、チャットボットを作ったり、業務効率化のためにRPAを研究したり、目新しいものに飛びつく傾向があります。

はじめてのWordPressサイト作成講座:1日でできるサイト制作

誰でも簡単にプロが作ったようなウェブサイトを作る事が出来ます。

この講座では1人1台パソコンを使用し、WordPressを使用したスマホ対応のウェブサイトを作成します。WordPressのシンプルな決まった型(デザインテーマ)を使用しますので、初心者の方でもプロが作ったようなウェブサイトを作る事ができます。