当前位置： 移动技术网 > IT编程>脚本编程>vue.js > vue使用facebook twitter分享示例

vue使用facebook twitter分享示例

2018年04月03日  | 移动技术网IT编程  | 我要评论

鸡蛋成本,高丽虹儿子,海安租房

记录一次vue使用分享

固定内容的分享 参考文档

vue 使用

facebook 使用分享

找到 添加一下代码

 <!-- 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&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 使用分享

找到 添加一下代码

<!-- 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"
  }
 );
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网