フェースブックの投稿をアメブロに埋め込むには | ちょっとした「Webお役立ち情報」とかを主に書いてます。

ちょっとした「Webお役立ち情報」とかを主に書いてます。

ネットで調べて、「わかったこと」を備忘録の代わりのメモ帳のようにして使ってます。

こんばんワ。

紅葉の京都

こちらのパソコン先生がFacebookの投稿記事をアメブロに表示する方法を説明されてました。

アメブロにFacebookの埋め込み投稿を入れる方法|パソコンが好きになるブログ~表技・裏技・便利技伝授!

で、今現在facebookの仕様が若干変わってるので少し上の先生の説明を修正させて頂いて、
尚且つ、その内容をちょっと端折って、ざっくりと御案内します(汗)。

※赤字の箇所が以前と違う:追加修正した箇所です。

アメブロの記事に貼りたいFacebookの投稿記事をタイムラインから選択画面上部の日付をクリック投稿によっては、画面右上の「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/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-post" data-href="https://www.facebook.com/photo.php?fbid=508145592660375&set=a.140279769446961.33414.100003948153561&type=1" data-width="466"><div class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/photo.php?fbid=508145592660375&set=a.140279769446961.33414.100003948153561&type=1">投稿</a> by <a href="https://www.facebook.com/hiroshi.watanabe.904108">渡邊 浩</a>.</div></div>



<div class="fb-post" data-href="https://www.facebook.com/photo.php?fbid=508145592660375&set=a.140279769446961.33414.100003948153561&type=1" data-width="466"><div class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/photo.php?fbid=508145592660375&set=a.140279769446961.33414.100003948153561&type=1">投稿</a> by <a href="https://www.facebook.com/hiroshi.watanabe.904108">渡邊 浩</a>.</div></div>


で、実際に上のコードを埋め込んだのが、こちらです。

                             




で、パソコンで見るぶんには、このままでいいんですが、自分のスマホで見ると枠線が表示されず、なんとなく「埋め込まれた感」がありませんでした^^;

で、上のコードの最初の<divのすぐ後ろに半角スペースを開けて、以下のコードを追記してみました。

style="margin:5px;padding:15px;border:1px solid #aaa;border-radius:10px;box-shadow:2px 2px 3px #ddd;"




<div style="margin:5px;padding:15px;border:1px solid #aaa;border-radius:10px;box-shadow:2px 2px 3px #ddd;" class="fb-post" data-href="https://www.facebook.com/photo.php?fbid=508145592660375&set=a.140279769446961.33414.100003948153561&type=1" data-width="466"><div class="fb-xfbml-parse-ignore">投稿 by <a href="https://www.facebook.com/hiroshi.watanabe.904108">渡邊 浩</a>.</div></div>


このように表示されます。



こちらの方(↑)が「埋め込んだ感」があっていいかなー!!なんて思います^^;


※注意点
1.フェースブックが公開設定になっている事。
2.アメブロの基本設定で「共有ボタンの表示」を「表示する」にしてある事。


だいぶ端折った説明になってしまいました(汗)。

こちらのパソコン先生が、丁寧な説明をして下さってます。(*若干違うのは「日付」をクリックする事と、場合によっては「オプション」をクリックする事です。)





こんな方法も憶えておくと、フェースブックには、いい投稿が出来たんだけど、アメブロには特に書くネタが無い!!なんて時に良いのではないでしょうか。

ダメかな^^;


☆ブヒ  (;^_^A


おっ!あいつ、居なくなったな!よし!なんじゃこりゃっ!!