TwitterとFacebookページのタイムラインをWordPressサイトに埋め込む方法（プラグイン不要）

先日、クライアントさんからの依頼で、TwitterとFacebookページのタイムラインをWordPressで作成したサイトに埋め込むという作業をしました。シェアボタンではなくて、最新のツイート・投稿の一覧を表示するエリアです。

この作業はそうそう頻繁にやるわけではないので、埋め込み用のコードをどこで取得するのか少し迷ってしまいました。忘れないうちに作業手順を残しておこうと思います。

TwitterとFacebookページの埋め込みコードを取得して、WordPressで作成したサイトにプラグインを使わずに表示させる手順をご紹介します。

Twitterのタイムラインの埋め込みコードを取得

Twitterの埋め込みコードといえば、以前は設定画面内で取得するやり方だった気がしますが、現在では専用のサイトができています。

こちらのサイトから埋め込み用のコードが取得できます。Twitterにログインしていない状態でも大丈夫です。

まずは、TwitterのプロフィールページのURL、もしくは@を付けてTwitter IDを入力します。Enterを押して次に進みます。

タイムラインの埋め込みかボタンかを選択できます。今回はタイムライン埋め込み用のコードを取得したいので、左側をクリックします。

これでコードが取得できるのですが、その前に「set customization options」と書かれたリンクをクリックして、埋め込みコードのパラメーターを指定します。

おすすめの設定は、高さのみを設定することです。高さを指定しておかないと、埋め込んだ時に縦長の領域を専有してしまいます。レスポンシブデザインのWordPressテーマであれば横幅は指定しなくて大丈夫だと思います。

ここでは高さを500（px）に指定しました。配色を「Light」と「Dark」の２種類が選べます。それと、リンクの色も指定することができます。このあたりは、埋め込む先のサイトに合わせて決めましょう。

設定が完了したら「Update」のボタンをクリックします。

「Copy Code」のボタンをクリックすると、埋め込み用のコードがクリップボードにコピーされます。

WordPressのウィジェットへの設定方法はこの記事の最後でご説明します。その前に、Facebookページ用の埋め込みコードも取得しておきましょう。

Facebookの開発者向けサイトで埋め込み用のコードを取得します。

ページを開いたら一番上のメニューにある「ドキュメント」をクリックします。

ドキュメント一覧の中で、下の方にある「ソーシャルプラグイン」をクリックします。（これは知らないと絶対迷う！）

さらに、ソーシャルプラグインの中から「ページプラグイン」をクリックします。

リンクをたどるのが面倒な方は、以下のURLをクリックすれば一発で表示されると思います。（URLが変更になる場合もあるかと思うのでご注意下さい。）

ページプラグインのページを開いたら、FacebookページのURLを入力します。

こちらも同様に幅と高さの設定があります。ですが、Twitterと違って高さはデフォルトで500pxになっているそうなので、ここでは未入力にしました。

画面をスクロールして「コードを取得」のボタンをクリックします。

取得できるコードは「Javascript SDK」と「IFrame」の２種類があります。今回はIFrameのコードを使いました。

「Javascript SDK」の方は、専用のjavascriptを読み込まないといけないので設定がやや面倒ですが、もしかしたら表示速度が早いかもしれません。

埋め込み用のコードを取得できたら、いよいよWordPressでの設定です。

方法はいくつかあると思いますが、サイドバーなどのウィジェットエリアに配置するのであれば「テキストウィジェット」を使うのが手っ取り早いです。

ダッシュボードのメニューの外観>ウィジェットを開きます。そして、テキストウィジェットを表示したい場所にドラッグしましょう。TwitterとFacebookページの両方を埋め込みたい場合は、それぞれ専用のウィジェットを追加するのが良いと思います。

タイトルは未入力で、内容に取得したコードを貼り付けます。保存を押したら作業完了です。正しく表示されているか確認してみて下さい。

以前のコードであれば、枠からはみ出すトラブルも起きがちでしたが、最新のものであれば大丈夫だと思います。（とはいっても、テーマ次第ではありますが…）