Edited at

Vue.jsでTwitter, Facebookのウィジェットを表示する

日本語の解説が全然ないので残しておきます。

下記のコードは別のとこで動いてたものをQiitaようにいじってます。

なので下記のコード自体は動作確認してません。


Facebook


facebook.vue

<template>

<div>
<div class="fb-page" data-href="https://www.facebook.com/facebook" data-tabs="timeline" 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>
</div>
</template>

<script>
export default{
mounted() {
if (!document.getElementById('facebook-jssdk')) {
(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 = 'https://connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v3.2';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
}
},
}
</script>

<template>内のコードはこちらから[コードを取得]。

参考:vue.js - Error on creating a facebook like box component on vue - Stack Overflow


Twitter

まずvue-tweet-embedをインストール

$ npm install vue-tweet-embed --save-dev


twitter.vue

<template>

<div class="twitter-widget"
style="width:400px;">
<v-timeline
:id="twitterId"
:source-type="'profile'"
:options="{ 'height': twitterHeight }" />
</div>
</template>

<script>
import Timeline from 'vue-tweet-embed/timeline'

export default{
components: {
'v-timeline': Timeline,
},
data() {
return {
twitterId: 'tsuka_rinorino',
twitterHeight: '400',
}
},
}
</script>


以上