https://www.facebook.com/blackcoffee21/posts/10205623662946844

 


蛙を題材にいろいろなWEBのサービスを実験していきます。 

今回はamebloにFacebookの投稿を埋め込む方法。 参考にしたのは Facebook for developer の埋め込み投稿。

埋め込むpostのurlは↓

https://www.facebook.com/blackcoffee21/posts/10205623662946844

 

生成されたコード(javascript)を記事にいきなり貼り付けても表示がみだれます。

先におまじないを読み込ませる必要があります。

1.それでまず設定-フリープラグインにいれます。
Load JavaScript SDK ということです。

---------

<div id="fb-root"></div>
<script async defer src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.2"></script>

---------

 

2.次に記事の本文の入力を「HTML表示」にして

<div class="fb-post" data-href="{your-post-url}"></div>

と入れて({your-post-url}はFacebookタイムライン記事のURLで先ほどのDevelopersに出ています。)

文章を入れていきます。

 

なぜこのように面倒なことをしたかというとナショジオの記事の写真入りのシェアがFacebookとTwitterしかないからなのです。

違うサービスを使うとURLを入れると画像(OGP)入りでリンクカードを作ってくれますのでそれでもいいのですが、今回はFacebook経由の方法を使ってみました。