vue 使用 facebook twitter 分享

记录一次vue使用分享

固定内容的分享 参考文档

facebook 分享文档

twitter 分享文档

vue 使用

facebook 使用分享

找到index.html 添加一下代码

  <!-- facebook 分享 -->
  <div id="fb-root"></div>
  <script>(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/zh_CN/sdk.js#xfbml=1&version=v2.12&appId=你的APPID&autoLogAppEvents=1';
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
  </script>

在vue 里面使用

第一种方式 html

<div class="fb-share-button" data-href="http://dev.XXXX.io/" data-layout="button_count" data-size="small" data-mobile-iframe="true"><a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&amp;src=sdkpreparse" class="fb-xfbml-parse-ignore">分享</a></div>

第二种方式 js

 facebook() {
    // 初始化    
      FB.init({
        appId: 你的appid,
        autoLogAppEvents: true,
        xfbml: true,
        version: "v2.12"
      });
      FB.ui(
        {
          method: "share",
          mobile_iframe: true,
          href: "http://dev.XXXX.io/?test=12345"
        },
        function(response) {}
      );
    },

twitter 使用分享

找到index.html 添加一下代码

<!-- twitter 分享 -->
  <script>window.twttr = (function (d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0],
        t = window.twttr || {};
      if (d.getElementById(id)) return t;
      js = d.createElement(s);
      js.id = id;
      js.src = "https://platform.twitter.com/widgets.js";
      fjs.parentNode.insertBefore(js, fjs);

      t._e = [];
      t.ready = function (f) {
        t._e.push(f);
      };

      return t;
    }(document, "script", "twitter-wjs"));
  </script>

在vue页面使用

在xxx.vue里面添加

<div class="twitter-share-button" id="container"></div>

javascropt 代码

twitter() {
  console.log(twttr)
  twttr.widgets.createShareButton(
    "http://dev.XXXX.io/?test=12345",
    document.getElementById("container"),
    {
      text: "分享测试",
      size: "large",
      hashtags: "example,demo",
      via: "twitterdev",
      related: "twitterapi,twitter"
    }
  );
}