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。查看预呈现或serverider呈现。

Answer 2

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

declare @startDate datetime = 
    (
        select
            case
                when DATENAME(dw, CONVERT(date, getdate())) = 'Monday' then cast(Convert(date, dateadd(DD,-3,CONVERT(date, getdate()))) as nvarchar(100))
                else cast(Convert(date, dateadd(DD,-1,@today)) as nvarchar(100))
            end
    )

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

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

<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="150dp">

 <ImageView 
 android:id="@+id/recyclerImgView"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:scaleType="fitXY"/>
</FrameLayout>

或者，要仅评估文档的一部分，您可以传入单个元素。

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

Answer 3

我认为最适合JAM堆栈的解决方案是：

A ）要使用Edge worker（例如AWS或CloudFlare提供的服务）-这样，您可以捕获特定的用户代理（bot）并仅向他们提供静态HTML（甚至可以是空的正文，仅包含必需的meta标签）。对于其他人，您只是让请求失败，而无需进行边缘计算，因此可以提供常规内容。 This文章进一步详细介绍了该方法。

如果您托管在Firebase上，则可以使用http triggers来获得动态元标记。这是一个很棒的write-up。

B ）要使用无服务器功能来启动无头浏览器实例（如操纵up），并用其捕获屏幕快照。 Zeit为此甚至有一个service。

请注意，两个选项都使用puppeteer-core来使端捆的尺寸和性能保持尽可能低

如何从Vuejs应用程序分享社交媒体？

3 个答案: