單頁應用程序無法獲取Facebook頁面的當前頁面元標記

我試圖在我的應用程序中實現Facebook分享按鈕，但是我似乎無法讓它繼續工作並且idk爲什麼這是我迄今爲止。單頁應用程序無法獲取Facebook頁面的當前頁面元標記

HTML（/後/一些隨機字符串）

<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'); 
}

它工作但它並沒有讀取meta標籤我已經寫以上在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

來源

2014-05-15 John Lim

https://developers.facebook.com/debug說什麼？什麼是頁面的鏈接？ – WizKid

@WizKid嗨，謝謝你的回覆。我在這個問題上添加了facebook調試器結果 –

你可以添加url嗎，所以我不必從圖片中複製它？ – WizKid

說什麼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來解決它。您可以在自己的服務器上使用它，或使用他們的免費/付費服務之一。

來源

2014-05-18 10:55:10 irukavina

'prerender.io'如何知道頁面何時準備好？使用javascript呈現頁面是很容易的部分，但是有很多AJAX調用是一個頁面最可能依賴的，並且您必須知道AJAX調用何時已解決 – vsync

在你的代碼，你必須讓你的絕對URL上ATTR FB-共享按鈕的 '數據HREF'。

例如：

<div class='fb-share-button' data-href='https://yourabsoluteurl.com' data-type='button'> 
</div>

來源

2014-05-15 05:22:53 jackypan1989

你已經在你的ng-view中定義了一個body。那麼你的觀點有它自己的身體。所以你試圖在一個不會做你想做的事情的身體內注入一個身體。

請注意，您的控制器不控制包含元標記的HTML元素。它只控制它包含的代碼（在你的案例中的身體div）。

您可以將控制器添加到HTML標記，也可以使用$ rootScope。

很多答案，這樣在這裏：How to dynamically change header based on AngularJS partial view?

在你的控制器處理NG-觀點： app.controller('MainControl', function ($rootScope, $scope, Config) { ... $rootScope.canonical = Config.domain; });

我需要動態設置的規範鏈接，但METAS主要是一樣的。在您的標題中： <link rel="canonical" ng-href="{{ canonical }}" />

您可能會想要使用ng-bind作爲元標記。

來源

2014-05-18 13:28:16 Splaktar

我會添加到以前的答案，prerender將解決抓取問題，但facebook分享有點不同我認爲（隨時證明我錯了:)）。爲了避免煩人{{}}您可以定義自己的元指令<meta meta-description>和使用模板：

app.directive('metaDescription', [ 'metaData', function(metaData){ 
    return { 
    restrict: 'A', 
    replace: true, 
    template: '<meta name="description" content="{{metaData.pageDesc}}">', 
    link: function(scope,element){ 
     scope.metaData = metaData; 


    } 
    }; 
}]);

我們仍在與angularJS搞清楚SEO /共享問題在這裏，但，這就是我們目前使用的。

來源

2014-05-23 14:17:40

單頁應用程序無法獲取Facebook頁面的當前頁面元標記

回答

相關問題