如何通过Vuejs应用程序在社交媒体上分享？

Question

我正在使用vue- social -sharing库在社交媒体上进行分享，它工作得很好，但我遇到的唯一问题是我无法在Facebook上分享我的文章标题、描述和图片。当我按下facebook分享按钮时，它会分享我的网站图片、标题和og:description，而不是我的特定文章。

var SocialSharing = require('vue-social-sharing');
Vue.use(SocialSharing);

<social-sharing url="https://vuejs.org/"
  title="The Progressive JavaScript Framework"
  description="Intuitive, Fast and Composable MVVM for building interactive interfaces."
  quote="Vue is a progressive framework for building user interfaces."
  hashtags="vuejs,javascript,framework"
  twitter-user="vuejs"
  inline-template>
<network network="facebook">
  <i class="fa fa-facebook"></i> Facebook
</network>
<network network="twitter">
  <i class="fa fa-twitter"></i> Twitter
</network>

Answer 1

你不能，Facebook还没有废弃javascript。查看预渲染或serversider渲染。

Answer 2

我还没有尝试过，但我非常确定动态更改元数据可能会有所帮助。尝试使用https://github.com/ktquez/vue-head或只使用普通的Js：

var metaList = document.getElementsByTagName("META");
 metaList[0].setAttribute("content","noarchive");

然后使用Facebook的JavaScript SDK：https://developers.facebook.com/docs/reference/javascript/FB.XFBML.parse/重新解析页面上的XFBML

要重新解析页面上的所有XFBML，可以调用：

FB.XFBML.parse()

或者，要只计算文档的一部分，可以传入单个元素。

FB.XFBML.parse(document.getElementById('foo'));

Answer 3

我认为对JAM-stack最友好的解决方案是：

A)来使用边缘工作程序(例如，亚马逊网络服务或CloudFlare提供的服务)-这样你就可以捕获特定的用户代理(机器人)，并仅为它们提供静态超文本标记语言(甚至可以是空的正文，只是所需的元标签)。对于其他人，您只是让请求失败，而不是在边缘进行计算，因此正常的内容得到了服务。This文章更详细地解释了这种方法。

如果你托管在Firebase上，你可以使用http triggers来实现动态的meta标签。这是一个很棒的write-up。

B)来使用无服务器功能，该功能可以启动一个无头浏览器实例(如木偶剧)并用它截取屏幕截图。Zeit甚至有一个service来解决这个问题。

请注意，这两个选项都使用puppeteer-core来使端捆绑包大小和性能尽可能低