[Tips & Trick] Add Facebook Page Widget on NuxtJS

[tips & trick] add facebook page widget on nuxtjs
[tips & trick] add facebook page widget on nuxtjs

[tips & trick] add facebook page widget on nuxtjs

Hello everyone…,

Are you looking how to add your facebook page widget on your nuxt project?

Well, you come to the right place. This tutorial is for simple use and if you know how to do it better, please write down in the comment.

Okay, so how to add the page plugin?

first, you have to install Vue-scripts2 with:

npm install vue-script2 --save

Then make a plugin on your /plugins directory with “vue-script2.js”, after that, add the code bellow to your vue-script2.js file that you just created:

import Vue from 'vue'
Vue.use(require('vue-script2'))

Then add this line into your nuxt.config.js  plugin:

'~/plugins/vue-script2'

after done with that, next is setup your facebook plugin on https://developers.facebook.com/docs/plugins/page-plugin/.

get your facebook SDK code from there, and add it to your layout that you use. in this case i am using it on my default.vue like this:

<client-only>
            <div id=”fb-root”></div>
            <script2 async defer crossorigin=”anonymous” src=”https://connect.facebook.net/id_ID/sdk.js#xfbml=1&version=v8.0&appId=YOUR_APP_ID&autoLogAppEvents=1″></script2>
</client-only>=

You see that i am using client only tag, because this code wont run on server side. After that, just add your page plugin code to your desired location. dont forget to add <client-only> YOUR CODE </client-only>.

welp, thats it!

your page will now be showing normally…,

if you have any suggestion, write it down on comment bellow.. 🙂

0 Shares:
Leave a Reply

Your email address will not be published. Required fields are marked *