LoginSignup
26
18

More than 3 years have passed since last update.

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

Last updated at Posted at 2018-11-05

日本語の解説が全然ないので残しておきます。
下記のコードは別のとこで動いてたものを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>内のコードはFacebookから[コードを取得]。

参考: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>

以上

26
18
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
26
18