【HOW TO】アメブロにフェイスブック投稿を埋め込む方法
はいはい(^-^)ノ
昨日アップしたこの記事に関して
貴重な読者の方から
以下のようなご質問を頂戴しました。
「フェイスブックの投稿をアメブロに埋め込むにはどうしたら良いのですか？自分でやってみましたが上手くいきません。」
確かに、
ブログをSNSと連携している方は多いと思いますが、
その逆、SNSの投稿をブログでも紹介してる方って
少ないかも知れませんね。
しかも、
ワードプレスなどは
簡単に埋め込むことが出来るのですが
アメブロはちょっとしたコツが必要なんですよね。
今回は、
「アメブロにフェイスブック投稿を埋め込む」
その方法を解説してみたいと思います。(･ω･)b
キャプチャー画像じゃなくて、
いいね！もリンクも生きてる状態で
そのまま埋め込む方法です。
最近では、
速報はTwitterやFacebookで
後でまとめてレポートはブログでアップ
というように、
使い分けてる方が多いですよね。
速報でアップした時の臨場感をブログでも表現したい！とか、
SNSで投稿した記事を、そのままブログで紹介したい！
っていう時に便利な機能なので
覚えておいて損はないですよ！(o^-')b
あ！ちなみに当然ですが、
投稿自体が「全体に公開」になっていなければ
埋め込みも出来ませんのでご注意くださいね。
さて、では早速。
まずは今見ているのが
フェイスブックの自分のページ（自分の投稿しかない）か
フェイスブックページの場合、
ブログに埋め込みたい投稿の
右上端にある下向きの矢印をクリックします。
すると、上から4番目に
「外部へ埋め込む」とありますので
そこをクリック。
ちなみに今見ているのが
ニュースフィードの場合（自分の友達の投稿も出てくる）も
同じように右上端の下向き矢印をクリックすると
一番下に「その他オプション」と出てくるので
それを再度クリックすると「外部へ埋め込む」と出てきます。
どちらからでも
「外部へ埋め込む」をクリックすると
以下のようなポップアップが現れます。
「ウェブサイトにこのコードを貼り付けてください」と
HTMLのコードがブルーに反転しています。
これが、この投稿の「埋め込みコード」なので
これを右クリックでコピーします（Ctrl+C）
これでこの投稿の「埋め込みコード」が
コピーされました。
次はアメブロ側です。
実際に作業する時はタブで、
アメブロのエディタ「ブログを書く」ページを
開いておいてくださいね。
以下のように、入力を「HTMLタグを表示」に切り替えてから
先程コピーした「埋め込みコード」をそのままペーストします（Ctrl+V）
ワードプレスなどだと
これだけで完了なのですが、
アメブロは一癖ありまして(笑)
このままアップしようとすると
「禁止タグが含まれており～」と
エラーになってしまうんですね。
なので、
以下のように前半のスクリプト部分を
丸ごと削除しちゃいますよ。えいっ！
ちょっと画像では分かりにくいので
以下にコピーしてしまいますね。
<div id="fb-root"></div><script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v2.3"; fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));</script><div class="fb-post" data-href="https://www.facebook.com/joyzipper/posts/1000578203349657" data-width="500"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/joyzipper/posts/1000578203349657"><p>///////////////// 【 <iPR> NEWS!! 】 ////////////////JJ、CanCam、with、Ray、など数多くの読者モデルのほかMC・リポーターなどでもご活躍中の「水野 佐彩」さんが、弊...</p>Posted by <a href="https://www.facebook.com/joyzipper/">インフルエンサープロモーション Powered by JOY ZIPPER Inc.</a> on <a href="https://www.facebook.com/joyzipper/posts/1000578203349657">2016年2月29日</a></blockquote></div></div>
上の赤い部分
最初の<div id="fb-root">から
</script>までの部分を
削除してしまいます。おりゃー！delete！
するとこうなります。
ちなみに
上の矢印部分の数値”500”は
埋め込みがアメブロ上で表示される「横幅」なので
アメブロをデフォルトで使用されている方は
”450”とか”460”とか、もう少し小さ目に設定したほうが
良いかも知れませんね。はみ出てしまいますから。
ちなみに、
私のブログはデザインをカスタマイズしているので
横幅500ピクセルでちょうどです。
これであとは
FacebookとTwitterの連携を好みでチェック入れて
「全員に公開」ボタンを押すだけです。
すると・・
このように
ちゃんとフェイスブックの投稿が
そのままアメブロに表示されると言う訳です。
フェイスブックに投稿されてるのと同じ状態なので、
当然リンクも生きてるし、「いいね！」も増やせるし、
ここからシェアも可能です。
フェイスブックページの宣伝にもなりますね。
以上で終了です！
お疲れ様でした。いかがでしたでしょうか？
ちなみに、
投稿のリンクURLから
埋め込みコードを作成する方法もあるのですが・・
面倒なのでまた今度！(笑)
アメブロの場合は余計な一手間がありますが
以前は、スクリプトをフリープラグインに保存してから
アップしなければいけなかったので
これでも進化したほうなんですね。
覚えてしまえば簡単です。
皆さんも是非トライしてみて下さい！
ってことで
また次回～(^O^)/ｱﾃﾞｨｵｰｽ♪
