分享 图片、链接 到Facebook 和 Twitter

1,381 阅读1分钟

一、分享图片、链接、文案到Facebook 和 Twitter

1、安装 vue-social-sharing 依赖

npm install vue-social-sharing

2、main.ts 文件引入依赖

import VueSocialSharing from 'vue-social-sharing'

app.use(VueSocialSharing);

3、在页面中直接使用

<share-network network="facebook" :url="shareUrl" :title="shareTitle" :description="shareMessage"
    :media="shareMedia">
    <p>Facebook</p>
</share-network>

4、至此,分享功能已经实现,但是图片 Facebook 和 Twitter 是不支持链接分享的 所以配置一下 ,图片是

  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:site" content="testtest">
  <meta name="twitter:title" content="testtest">
  <meta name="twitter:description" content="testtesttesttest">
  <meta name="twitter:image" content="图片地址">

  <meta property="og:url" content="http://gpt.testtesttesttest.com/#/home" />
  <meta property="og:type" content="website" />
  <meta property="og:title" content="testtesttesttest" />
  <meta property="og:description" content="testtesttesttesttest" />
  <meta property="og:image" content="图片地址" />

还碰到个问题 1、我本地的图片,上线到服务器后,路径是不能直接用的,拼接的路径不能直接用