WordPressにSNSタイムラインを埋め込む方法

WordPressブログにTwitterやFacebook、InstagramなどSNSのタイムラインを表示させることは、SNSからの集客やセルフブランディングの面から見てとても有効です。

でも、実際にどうやったらタイムラインを挿入（埋め込み）できるのか、初心者には難しいところもありますよね。

そこでこの記事では、これからWordPress を始める方やブログ初心者の方向けに、TwitterやFacebook、Instagramのタイムラインをブログに埋め込む簡単な3つの方法をご紹介します。

それほど難しい作業ではないので、この記事を読んでサクッと済ませてしまいましょう。

それではさっそく、ご説明します。

1．Twitterタイムラインの埋め込み方法

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

まず、Twitterの埋め込み用コードを作成する公式サービス「Twitter Publish」にアクセスして、表示させたいTwitterアカウントのURLを入力します。

Twitterの表示形式を選択します。ここではタイムラインを表示させたいので、「Embedded Timeline」の方を選びます。

すると、下の画像のように、タイムラインの埋め込み用コードが表示されるので、それをコピーしてWordPressブログの好きな場所に貼り付ければ、埋め込みができます。

ただ、これだけだと、自分の好きなサイズに調整できないので、少しカスタマイズしてみましょう。

「set customization options」をクリックします。

タイムラインの縦横のサイズ（px）を入力します。例えば、縦幅を500px、横幅を300pxと入力すると、以下のようにスマホ表示に最適化されたタイムライン表示にカスタマイズできます。

これでよければ、「Update」をクリックします。

再び、タイムラインの埋め込み用コードが表示されるので、これをコピーします。

サイドバーにTwitterのタイムラインを埋め込む

WordPressにログインして、外観 ＞ ウィジェット を開きます。

サイドバーエリアに「カスタムHTML」というウィジェットを追加します。

カスタムHTMLに、先ほどコピーした埋め込み用コードを貼り付けて、ウィジェット名（タイトル）をつけて保存します。

ブログを確認してみると、サイドバーエリアにきちんとTwitterのタイムラインが表示されています。

これでTwitterタイムラインの埋め込みが完了です。

ちなみに、同様の方法で、フッターエリアなど他のウィジェットエリアにも埋め込むことができます。

フッターにTwitterのタイムラインを埋め込む

フッターエリアにカスタムHTMLのウィジェットを追加して、埋め込み用コードを貼り付けます。

設定を保存すると、以下のようにフッターエリアにTwitterのタイムラインが表示されます。

ただし、サイドバーエリアとフッターエリアのサイズが異なると、上の画像のように横幅が合わない（少し隙間が空いてしまう）場合があります。

その場合は、またTwitter Publishに戻って、サイズを再調整しましょう。

フッターエリアの横幅にサイズを再設定すれば、下のようにぴったりと合わせることができます。

事前に、表示させたいウィジェットエリアのサイズ（px）を調べておくと、スムーズに設置できますね。

Twitterタイムラインのスマホ表示も確認しよう

近年、パソコンよりもスマホからのアクセスが急増しています。ブログをカスタマイズしたら、必ずスマホ表示もチェックするようにしましょう。

Twitterのタイムラインのスマホ表示を確認してみたところ、以下のようになりました。

サイドバーエリアにぴったりと合うサイズで表示されています。これでひと安心ですね。

次に、Facebookのタイムラインを埋め込む方法をご紹介します。

2．Facebookページのタイムラインの埋め込み方法

Facebookページの埋め込み用コードを取得する

WordPressブログのFacebookページを開設している場合、ブログ内にFacebookページのタイムラインを表示させることができます。

まず、Facebookのページプラグインにアクセスします。

表示させたいFacebookページのURLを入力し、タブには「timeline」と入力します。

すると、下の画像のように、Facebookページのタイムラインが表示されます。

ここで、タイムラインのサイズを調整したい場合は、縦横のサイズ（px）を入力します。例えば、ブログのサイドバーの幅に合わせて、横幅を300px、縦幅を500pxと入力します。

そのほか、Facebookページのタイムラインでは、次の4種類の設定ができます。

①スモールヘッダーを使用

小さめのヘッダー（スモールヘッダー）を使用して、シャープな印象を与えるデザインになります。

②カバー写真を非表示にする

ヘッダーのカバー写真を非表示にして、シンプルなデザインにします。

③plugin containerの幅に合わせる

タイムラインをウィジェットエリアの横幅に合わせて表示させます。レスポンシブデザインのブログに表示させる際に有効です。

レスポンシブデザインとは、パソコンやスマホ、タブレットなどの各種デバイスのディスプレイの大きさに合わせて最適化して表示してくれるデザインのことです。

あなたのWordPressブログがレスポンシブデザイン対応であれば、ここにチェックを入れておけば大丈夫です。

④友達の数を表示する

Facebookページに「いいね！」してくれた友達の顔を表示します。「いいね！」の数が多くなると、ブログ全体ににぎわい感を持たせる効果があります。

以上が、Facebookのタイムラインをカスタマイズする4つの設定項目になります。

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

Facebookのタイムラインは、JavaScript SDKというコードを使った埋め込み方法とIFrameを使った埋め込み方法の2つがあります。

ここでは、IFrameを使った方法をご紹介します。（JavaScript SDKを使った方法だと過去にレイアウト崩れが起きたことがあったため、IFrameの方をおすすめしています）

サイドバーにFacebookページのタイムラインを埋め込む

WordPressにログインして、外観 ＞ ウィジェット を開き、サイドバーエリアに「カスタムHTML」を追加します。

カスタムHTMLに、先ほど取得したIFrameのコードを貼り付けて保存します。

ブログを確認してみると、サイドバーエリアにきちんとFacebookページのタイムラインが表示されています。

Facebookページのタイムラインは、フッターエリアなど他のウィジェットエリアにも埋め込むことができます。

フッターにFacebookページのタイムラインを埋め込む

フッターエリアにカスタムHTMLのウィジェットを追加して、IFrameのコードを貼り付けます。

設定を保存すると、以下のようにフッターエリアにFacebookページのタイムラインが表示されます。

ここで、サイドバーエリアとフッターエリアのサイズが異なると、上の画像のように横幅が合わない場合があります。

しかし、Facebookページの場合は、Twitterのタイムラインと異なり、フッターの横幅に合わせてしまうと、スマホ表示の際に画面からはみ出してしまう現象が起きることがあります。

なので、サイズは変えずに位置を中央寄せに変えます。

位置を中央寄せにする場合は、次のようなhtmlタグでIFrameコードを囲みます。

<div style="text-align:center;"> IFrameのコード</div>

すると、以下のように表示させることができます。

Facebookページタイムラインのスマホ表示も確認しよう

Facebookページのタイムラインをスマホで見たときの表示も確認しておきましょう。

これでFacebookページのタイムライン埋め込みが完了です。

3．Instagramのタイムラインの埋め込み方法

Instagramの埋め込み用コードを取得する

まず、InstagramをWordPressに挿入するプラグイン「Smash Balloon Social Photo Feed」をインストールします。

WordPressの管理画面 ＞ プラグイン を開いて、「新規追加」をクリックします。

検索窓で「Smash Balloon Social Photo Feed」を検索して、「今すぐインストール」をクリックします。

インストールしたら、「有効化」をクリックします。

次に「設定（Settings）」をクリックします。

「Connect an Instagram Account」をクリックします。

現在ログインしているInstagramアカウントが表示されるので、「Authorize」をクリックします。

これでプラグインとInstagramアカウントが接続されます。接続が確認できたら、設定を保存しておきます。

下のように、Instagramのタイムラインを表示させるためのショートコードが発行されるので、これを表示させたい場所に貼り付けます。

サイドバーにInstagramのタイムラインを埋め込む

WordPressにログインして、外観 ＞ ウィジェット を開きます。

サイドバーエリアに「カスタムHTML」というウィジェットを追加します。

カスタムHTMLに、先ほどのInstagram埋め込み用のショートコードを貼り付けて、ウィジェット名（タイトル）をつけて保存します。

ブログを確認してみると、サイドバーエリアにInstagramの投稿写真が表示されています。

わりと素敵なデザインになりましたね。普段からInstagramを使っている方や写真画像にこだわりたい方にはおすすめです。

同様の方法で、フッターエリアにも埋め込むことができます。

フッターにInstagramのタイムラインを埋め込む

フッターエリアにカスタムHTMLのウィジェットを追加して、ショートコードを貼り付けます。

設定を保存すると、以下のようにフッターエリアにInstagramの投稿写真が表示されます。

私が使っているWordPressテーマでは、Instagramの背景色がフッターと同じ色になり、ブログに溶け込むようなデザインに仕上がりました。

これもすごくおしゃれなデザインですね。（仕上がりのデザインは使用するWordPressテーマによって異なります）

Instagramタイムラインのスマホ表示も確認しよう

Instagramのタイムラインをスマホで見たときの表示も確認しておきましょう。

パソコン表示では小さめの投稿写真が一覧表示されていましたが、スマホ表示ではサイドバーエリアの横幅いっぱいのサイズで投稿写真が表示されました。

Instagramのタイムラインのデザインは、プラグインの設定によって自由にカスタマイズができるので、好みのデザインに変更することも可能です。

「Smash Balloon Social Photo Feed」というプラグインは、WordPressブログにとても簡単にInstagramを表示できるおすすめのプラグインです。

まとめ

セルフブランディングという意味でも、ブログ上でのタイムラインの魅せ方はとても大事ですよね。でも、これらの方法を使えば、Twitter、Facebook、InstagramなどのSNSをWordPressブログに合わせて簡単にカスタマイズして導入できます。

SNSとの連携をうまく活用できれば、あなたのブログのファンを増やすこともできます。

ぜひ、これらの方法を使って、あなたのブログをもっと魅力的にデザインしてみてください。

以上、WordPressブログにSNSのタイムラインを埋め込む方法についてでした。