Vue SPA 加入 Facebook Page Plugin

依照Facebook的教學
https://developers.facebook.com/docs/plugins/page-plugin/

在Html或Blade模板中加入

1
2
<div id="fb-root"></div>
<script async defer crossorigin="anonymous" src="xxxxxxxx" nonce="xxxxxxx"></script>

在Vue中加入

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
//home.vue
<template>
<div class="container">
<div class="fb-page" data-href="xxxxxxxxxx" 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="xxxxxxxxxxxx" class="fb-xfbml-parse-ignore"><a href="xxxxxxxxx">xxxxxxxxx</a></blockquote></div>
</div>
<template>

<script>
export default {
name: "Home",
mounted(){
this.$loadScript(
"https://connect.facebook.net/"+local+"/sdk.js#xfbml=1&version=v7.0&appId={YOUR_APP_ID}&autoLogAppEvents=1"
)
.then(() => {
this.$nextTick(() => {
window.FB.XFBML.parse();
});
})
.catch(() => {
});
}
}
<script>