search
LoginSignup
18

More than 3 years have passed since last update.

posted at

updated 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>内のコードは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>

以上

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
What you can do with signing up
18