Facebook 共享不起作用在 vue js 中动态创建的页面

Question

我想使用 Facebook 分享来分享我的产品。我使用 vue js 进行前端开发。这是我的代码。我使用社交分享 library.This 是我的分享按钮代码。

     <social-sharing
      :url="'https://www.airbuddyhub.com/view-request/'+ItemDetails.id"
       inline-template
    >
    <network network="facebook">
    <i class="fa fa-facebook"></i>
    </network>
    </social-sharing>
   </div>

vue js 是一个单页面应用程序。所以它只有一个索引文件。 facebook 需要 meta 标签来获取数据。所以我使用 "vuemeta" 库来动态生成元标记。我将这段代码添加到相同组件的脚本标签中。

    return {
      title: "AirbuddyHub",
      titleTemplate: "%s - items",
      meta: [
        { charset: "utf-8" },
        {
          property: "og:title",
          content: this.ItemDetails.item_name +" -  Rs "+this.ItemDetails.will_pay
        },
        { property: "og:type", content: "website" },
        {
          property: "og:url",
          content: "https://www.airbuddyhub.com/view-request/"+this.$route.params.id
        },
        {
          property: "og:description",
          content: this.ItemDetails.item_description
        },
        {
          property: "og:image",
          content:
            "https://airbuddyimage.s3.us-east-2.amazonaws.com/PostRequest/"+this.img1
        },
        { property: "og:site_name", content: "AirbuddyHub" },
      ]
    };
  },

之后，我在主索引文件中添加了我的 fb 应用程序 ID 和 sdk。

      window.fbAsyncInit = function() {
        FB.init({
          appId: "2088241224810720",
          autoLogAppEvents: true,
          xfbml: true,
          version: "v5.0"
        });
      };
    </script>
<script
      async
      defer
      crossorigin="anonymous"
      src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v5.0&appId=1113427062193399&autoLogAppEvents=1"
    ></script>

但这不是work.Can你们帮我做这个吗？meta标签也出现在里面headertags.but不工作

Answer 1

Facebook 会忽略 JavaScript，因此如果您仅使用 JavaScript 设置，它将不会获取 Open Graph 数据。你必须在服务器端提供它，选项是 SSR (Server Side Rendering) or prerender.io.

Facebook 共享不起作用在 vue js 中动态创建的页面

Facebook share not working Dynamically created page in vue js

javascript

facebook

vue.js