gpt4 book ai didi

javascript - 单页应用程序无法获取 Facebook 共享的当前页面元标记

转载 作者:技术小花猫 更新时间:2023-10-29 12:49:15 26 4
gpt4 key购买 nike

我正在尝试在我的应用程序中实现 Facebook 共享按钮,但我似乎无法让它正常工作,我不知道为什么这是我到目前为止所拥有的。

html(/post/some-random-string)

<div id="fb-root"></div>
<meta property="og:site_name" content="App">
<meta property="og:url" content="/post/{{data.permalink}}">
<meta property="og:title" content="{{data.title}}">
<meta property="og:type" content="blog">
<meta property="og:image" content="https://i1.ytimg.com/vi/tIWPnxEpNQg/maxresdefault.jpg">
<meta property="og:description" content="{{data.preview}}">

<body >
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&appId=580882498674160&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
// this facebook share button doesn't appear.
<div class="fb-share-button" data-href="https://developers.facebook.com/docs/plugins/" data-type="button"></div>
//so i manually make one.
<a href="" ng-click='facebookShare();'>Share</a>
</body>

controller.js

$scope.facebookShare= function(){
return window.open('http://www.facebook.com/sharer/sharer.php?u='+encodeURIComponent(location.href), 'facebook_share', 'height=320, width=640, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, directories=no, status=no');
}

它可以工作,但是它没有读取我在上面写在 html 页面上的元标记,而是从我的索引页面读取 enter image description here

索引页

<!DOCTYPE html>
<html ng-app='app'>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<noscript>
<meta http-equiv="refresh" content="7">
<style type="text/css">
.pagecontainer {display:none;}
</style>
<div class="pure-u-1 text-center">
<title>Symsal- Oh no ! We need Javascript to work !</title>
<h3> Please Enable javascript </h3>
</div>
</noscript>
<head>
<title ng-bind='title'></title>
// some css file
</head>
<body>
<div class='puretype'>
<div ng-controller="MasterCtrl">
<div id="layout">
<!-- Menu toggle -->
<a href="" id="menuLink" class=" white menu-link">
<span></span>
</a>
<div id='menu' class="pure-u-1">
<div ng-bind-html="userView"></div>
</div>
</div>
<div class="pure-g-r">
<div id="feed-container" class='pure-u-1 slide'ng-view=''></div>
</div>
</div>
</div>
// some javascript files
</body>
</html>

Facebook 调试器 enter image description here

最佳答案

jackypan1989 说的是真的,你必须使用绝对url。但我很确定发生的另一件事是 Facebook 不会运行你的 JavaScript 代码,因此这部分

<meta property="og:url" content="/post/{{data.permalink}}">

永远不会被替换为

<meta property="og:url" content="/post/the-page-that-was-shared">

您遇到的这个问题也可能会阻止 Google 抓取您的网页。

我们遇到了同样的问题,我们使用了https://prerender.io绕过它。您可以在自己的服务器上使用它,或使用他们的一项免费/付费服务。

关于javascript - 单页应用程序无法获取 Facebook 共享的当前页面元标记,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23669640/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com