facebook twitter 领英 在web中 分享

一. facebook 分享

---

1.参考分享调试器 - Facebook 开发者

以 ~https://bdx.ysxapp.com~ 举例

可以看到效果还可以,包含了缩略图/标题/描述/链接

2.可以根据提示完成meta标签的添加

本文网站meta标签如下

<!-- facebook -->
<meta property="og:url" content="https://bdx.ysxapp.com" />
<meta property="og:title" content="Welcome to the Big Dipper multilingual pc website" />
<meta property="og:description" content="Welcome to the Big Dipper multilingual pc website" />
<meta property="og:image" content="https://bdx.ysxapp.com/star.png" />
<meta property="og:type" content="website" />
<link rel="icon" href="<%= BASE_URL %>favicon.ico">

20191026 更新facebook实现分享url动态拼参

参考facebook 官网 SDK快速入门
1.初始化(官方中文版)

<script>
    window.fbAsyncInit = function() {
      FB.init({
        appId : '1252726684898501',
        xfbml : true,
        version : 'v4.0'
      });
      FB.AppEvents.logPageView();
    };
    (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/en_US/sdk.js";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
</script>

1.初始化(官方英文版)

<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId            : 'your-app-id',
      autoLogAppEvents : true,
      xfbml            : true,
      version          : 'v4.0'
    });
  };
</script>
<script async defer src="https://connect.facebook.net/en_US/sdk.js"></script>

tips:我的做法是直接在index.html中添加脚本初始化代码
2.使用SDK实现分享
参考facebook 官网 网页SDK 示例

FB.ui({
  method: 'share',
  href: '你要分享的网页链接(用户通过点击你分享的facebook内容要进入的页面)'
}, function(response){});

我在本项目的做法:

// -------------index.html-----------

<script>
    // facebook 分享
    window.fbAsyncInit = function() {
      FB.init({
        appId : '1252726684898501',
        xfbml : true,
        version : 'v4.0'
      });
      FB.AppEvents.logPageView();
    };
    (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/en_US/sdk.js";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
</script>

// ----------xxx.vue---------------

// html
<a @click="facebookShare">
    <i class="fa fa-facebook" aria-hidden="true"></i>
    <img src="@/assets/imgs/facebook-icon.png" alt="" >
</a>
// js
data () {
    return {
      href_com: 'https://bdx.ysxapp.com/#/login?invite_code='+this.$store.getters.getInviteCode,
      text_com: 'Welcome to the Big Dipper multilingual pc website -> My invitation code: '+this.$store.getters.getInviteCode,
    }
},
methods: {
    facebookShare () {
        let _this = this
        FB.ui({
            method: 'share',
            href: _this.href_com,
            quote: this.text_com
            }, function(response){
            // console.log('response', response)
        });
    }
},

最终效果图预览:

---

二. twitter 分享

参考Card Validator | Twitter Developers
以 ~https://bdx.ysxapp.com~ 举例

可以看到效果还可以,包含了缩略图/标题/描述/链接

本文网站meta标签参考如下

<!-- twitter-->
<meta property="twitter:url" content="https://bdx.ysxapp.com" />
<meta name="twitter:title" content="Welcome to the Big Dipper multilingual pc website"/>
<meta name="twitter:description"  content="Welcome to the Big Dipper multilingual pc website" />
<meta name="twitter:site" content="https://bdx.ysxapp.com">
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="https://bdx.ysxapp.com/star.png" />

tips:本来要做动态,实现网址拼接参数,通过动态添加meta标签后,好像无法爬到相应数据,达不到理想效果,有大神达到动态meta标签实现url拼参的,求指教
本项目中的做法:

// ----------xxx.vue---------------

// html
<a :href="tw_href">
    <img src="@/assets/imgs/twitter-icon.png" alt="twitter">
</a>

// js
data () {
    return {
      href_com: 'https://bdx.ysxapp.com/#/login?invite_code='+this.$store.getters.getInviteCode,
      text_com: 'Welcome to the Big Dipper multilingual pc website -> My invitation code: '+this.$store.getters.getInviteCode,
      tw_href: '',
    }
},
created () {
    this.initHref()
},
methods: {
    initHref () {
      // twitter 分享链接
      this.tw_href = `javascript:window.open('https://twitter.com/share?text=`+this.text_com+`&url=`+this.href_com+`','_blank','toolbar=yes, location=yes, directories=no, status=no, menubar=yes, scrollbars=yes, resizable=no, copyhistory=yes, width=800, height=450,top=100,left=350');void(0)`
    },

},

tips: twitter好像无法使用hash路由做url拼接参数,比如`https://bdx.ysxapp.com/#/login?invite_code=9IEVC4F`
出现的url效果只有`https://bdx.ysxapp.com/`, 但是换为`https://bdx.ysxapp.com/login?invite_code=9IEVC4F` 就可以正常实现理想效果,具体缘由还无法理解

最终效果:

---

三.最后领英的分享

参考The Simplest (and Most Performant) Way to Offer Sharing Links for Social Media
本项目中的做法:

// ------------xxx.vue----------------

// html
<a :href="link_href">
    <img src="@/assets/imgs/in-icon.png">
</a>

// js
data () {
    return {
      href_com: 'https://bdx.ysxapp.com/#/login?invite_code='+this.$store.getters.getInviteCode,
      text_com: 'Welcome to the Big Dipper multilingual pc website -> My invitation code: '+this.$store.getters.getInviteCode,
      link_href: ''
    }
},
created () {
    this.initHref()
},
methods: {
    initHref () {
      // linkin 分享链接
      this.link_href = `javascript:window.open('https://www.linkedin.com/shareArticle?mini=true&url=https://bdx.ysxapp.com&summary=`+this.text_com+`','_blank','toolbar=yes, location=yes, directories=no, status=no, menubar=yes, scrollbars=yes, resizable=no, copyhistory=yes, width=600, height=450,top=100,left=350');void(0)`
    },

},

最终效果:

---

总结:

facebook达到理想效果,twitter次之,领英最次,持续完善,待更新(最后更新201910261415)