facebook twitter 分享

一. 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">

分享鏈接如下:

// html
<a :href="face_href"> 
    <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=123'+this.$store.getters.getInviteCode,
      text_com: 'Welcome to the Big Dipper multilingual pc website -> My invitation code: '+this.$store.getters.getInviteCode,
      tw_href: '',
      face_href: ''
    }
},
created () {
    this.initHref()
},
methods: {
    initHref () {
      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)`

      this.face_href = `javascript:window.open('http://www.facebook.com/sharer.php?u=`+this.href_com+`&t=`+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)`
    }
  }

tips:本來要做動態,實現網址拼接參數,通過動態添加meta標籤後,好像無法爬到相應數據,達不到理想效果,有大神達到動態meta標籤實現url拼參的,求指教

二. 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拼參的,求指教