NuxtでFacebookの埋め込みコードを扱う
Nuxt.jsで作ったサイトにFacebookの埋め込みを行いたかったのでそのメモ。
（この方法がベストかどうかはわかりません。）
Facebookの埋め込みコード
以下より発行できる
https://developers.facebook.com/docs/plugins/page-plugin?locale=ja_JP
これをbody直下に↓
<div id="fb-root"></div>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v7.0" nonce="wAXonegw"></script>
これを埋め込みたい場所に記述します。
<div class="fb-page" data-href="https://www.facebook.com/facebook" data-tabs="timeline" data-width="" data-height="" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><blockquote cite="https://www.facebook.com/facebook" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/facebook">Facebook</a></blockquote></div>
問題はbody直下に書く方のコードで、これをbody直下に書くというのがNuxtでは少し難しいです。
body直下に書かないとFacebookのタイムラインが表示されない場合があるので適当な場所に埋めてはだめです。
app.htmlを使う
nuxt.config.js がある場所に app.html を作ります。
このファイルがあるとnuxtでは大枠のテンプレートとして解釈してくれます。
ベースは以下なので
<!DOCTYPE html>
<html {{ HTML_ATTRS }}>
<head {{ HEAD_ATTRS }}>
{{ HEAD }}
</head>
<body {{ BODY_ATTRS }}>
{{ APP }}
</body>
</html>
↓
<!DOCTYPE html>
<html {{ HTML_ATTRS }}>
<head {{ HEAD_ATTRS }}>
{{ HEAD }}
</head>
<body {{ BODY_ATTRS }}>
<div id="fb-root"></div>
<script
async
defer
crossorigin="anonymous"
src="https://connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v7.0"
nonce="wAXonegw"
></script>
{{ APP }}
</body>
</html>
としてやるとbody直下にコードが埋め込まれます。
動くけど・・・
なんとなくしっくりこないこの方法、、、
個人的には埋め込む記述をコンポーネントにしてそこでこのコードをbody直下にうまく書くみたいなことができたほうが管理しやすいと思う。
以下の記述でbody内にスクリプトを呼ぶみたいなことはできるんだけど、bodyの最下部になるし、htmlがかけないのかな？innerHtmlっていう項目もあるみたいだけど・・・
ここは調査しきれませんでした。（もう前者の方法で諦めたw）
<script>
export default {
head: {
script: [
{ src: '/body.js', body: true }
]
}
}
</script>
Author And Source
この問題について(NuxtでFacebookの埋め込みコードを扱う), 我々は、より多くの情報をここで見つけました https://qiita.com/gungungggun/items/d31a075db58bbac96861著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .