ホームページだけでなく、FacebookやTwitterなどのSNSを一緒に運営しているWeb管理人さんもいらっしゃることと思います。
ホームページにSNSのタイムラインを表示させているのをご覧になって、アレやってみたい！と思ったことはございませんか？
意外とカンタンにできちゃうので、このページで紹介いたします。
Twitterのつぶやきをブログやホームページに引用する
こんな感じです。
【シナプス・マガジン】 Windows 10登場直前特集 vol1「Windows 10へアップグレードするには?」 http://t.co/hIslMHSYvs
— シナプス・ステーション (@synapse_station) 2015, 6月 10
これはつぶやき単体を引用しています。 ちなみに鍵のついているアカウントの発言の引用はできません。
Twitterの発言一覧から
Twitterの発言の中にあるオプションをクリックします。 
「ツイートをサイトに埋め込む」をクリックします。 
コードが発行されるので、ホームページやブログ記事内の任意の場所にコピー＆ペーストで表示されます。 
シナプスブログに貼り付ける場合はフォーマットを「リッチテキスト」にして「HTMLの編集」にチェックを入れてからペーストしてくださいね。
Twitterのタイムラインをホームページやブログに埋め込む
こんな感じです。 @synapse_stationさんのツイート
こっちは上記のとは違いつぶやき単体ではなく発言一覧を表示しています。
ちなみにこれも、鍵つきのアカウントの引用はできません。
Twitterの設定画面から
まずはTwitterの設定にアクセス。
https://twitter.com/settings/account
次に設定画面の左下の「ウィジェット」をクリックします。
ウィジェットの「新規作成」をクリックします。
細かい設定を決めます。
ユーザータイムライン→「ユーザー名」で指定したアカウントの発言一覧
お気に入り→「ユーザー名」で指定したお気に入り一覧
リスト→自分で作成した、もしくは保存したリストに登録されている人たちの発言一覧
検索→検索ワードを指定し、ヒットしたつぶやき一覧を掲載。自社サービス名や、お店の名前、ハッシュタグを指定している企業が多いですね
コレクション→文字通り、自分の気に入ったつぶやきを一覧にしてくれる機能のよう。お気に入りと違うのは並び替えが容易な点のようです
ここではユーザータイムラインで、自分のアカウントを指定し「ウィジェットを作成」ボタンを押します。
コードが発行されるので、ホームページやブログ記事内の任意の場所にコピー＆ペーストで表示されます。
シナプスぶろぐのブログパーツとして表示する
こんな感じで、サイドバーにブログパーツとしてTwitterのタイムラインを常時表示する方法もあります。
サイドバーの設定は「デザイン」から
Twitter側の設定は、上記のTwitterの「ウィジェットの作成」で作成したコードをそのまま使います。
シナプスぶろぐにログイン。
「ブログ」タブをクリックします。
「デザイン」をクリックします。
「表示項目を選択」をクリックして
「カスタムHTML」の「モジュールを追加」をクリックします。
カスタムHTMLの名前（任意）を入力し、HTMLのところにTwitterの管理画面のウィジェット設定からコピーしたコードをペーストして保存します。
追加されたカスタムHTMLにチェックを入れて「変更を保存」。
この画面に戻り、今度は「並べ方を変更」します。
サイドバーの好きなところに「タイムライン」を配置し、「変更を保存」して終了です。
ちなみに、このタイムラインウィジェットの縦幅の変更をしたい場合はTwitterの管理画面で設定ができます。横幅についてはサイドバーの大きさに応じて自動で設定されるようですが、200px以下にはならないようで、サイドバーが狭いテンプレートを使う場合は記事まで飛び出してきてしまうので要注意です。
Facebookページのタイムラインをホームページに埋め込む
お店のFacebookページならFBアカウントを持ってない人でも誰でも見れるので、ホームページに埋め込んで最新の情報や写真をみんなに見てもらうことができます。
こんな感じです。
いいねボタンもありますので、いいねしてもらえる機会も増えるかも？
ちなみに個人のFacebookのタイムラインを埋め込むことはできません。あくまでお店や企業・ファンページなどの「Facebookページ」だけです。
Page Pluginを導入する
Facebookページの埋め込みは「Likebox」がよく使われていたんですが、この「Likebox」は2015年6月22日でなんと終了してしまうそうです。
そのため今回ご紹介する「Page Plugin」の導入が各所でオススメされています。新規導入をされる方も、「Likebox」からの乗り換えの方もぜひ。英語だけど大丈夫！
Facebookページアカウントではなく、Fancebookページを管理している個人FBアカウントでログインしたまま以下のPage Pluginのページにアクセスします。
Facebookページアカウントでログインしているとコードが発行されないこともあるようです。
https://developers.facebook.com/docs/plugins/page-plugin
Facebook Page URL→FacebookページのURLを入れます。
Width、Height→それぞれ広さと高さです。
Use Small Header→チェックを入れると少しコンパクトな表示になります。
Adapt to plugin container width→チェックを入れるとサイドバーなどの広さに応じて自動でウィジェットの幅を変更してくれます。
Hide Cover Photo→チェックを入れるとカバー写真が隠れます。
Show Friend’s Faces→チェックを入れるとこのページにいいねをしたことがある友達のアイコンが表示されます。
Show Page Posts→チェックを入れるとPagePosts、つまりタイムラインが表示されます。Likeboxと同じ機能を求めるならチェックを入れましょう。
必要事項にチェックを入れて「Get Code」をクリックするとコードがふたつ発行されます。
1のコードは<body>タグの直後に、2のコードはホームページの表示させたい部分にコピペすると埋め込み完了です。
ローカル環境だと表示されないことがあるので、埋め込みができているかどうかはhtmlファイルをアップロードして確認してみてください。
シナプスぶろぐの場合はHTMLの編集をオンにして、1のコードと2のコードを続けてコピペすると表示されます。
こんな感じです。
FBページのタイムラインをブログパーツで表示する
Facebookページのタイムラインをシナプスぶろぐのサイドバーに表示させることもできます。
これもPage Pluginを使います。
注意事項としてはこのPage Pluginも最小横幅が180pxなので、サイドバーが狭いテンプレートを使っている場合は飛び出してしまうようです。
コード取得時に「Adapt to plugin container width」にチェックを入れておくとサイドバーの幅に応じてウィジェットの幅も自動で調節されるのでサイドバーの幅がどれくらいだったかわからない人はチェックを入れておくと安心です。（それでも180未満にはなりませんが…）
Page Pluginはここのところ割と頻繁に改良されているのでより細かいカスタマイズができるようになる可能性もあるので気長に待ちましょう。
Twitterのブログパーツと要領は同じです。
カスタムHTMLの「モジュールを追加」で、Page Pluginで取得した1と2のコードを両方続けてコピペして保存します。
サイドバーに表示されました。
