vue.js

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>

以上