2014-05-15 16 views
10

Tôi đang cố gắng triển khai nút chia sẻ facebook trong ứng dụng của mình, tuy nhiên tôi không thể làm cho nó hoạt động và idk tại sao đây là những gì tôi cho đến nay.ứng dụng một trang không thể lấy thẻ meta trang hiện tại để chia sẻ facebook

html (/ bài/some-ngẫu nhiên chuỗi)

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

nó hoạt động tuy nhiên nó đã không đọc thẻ meta i đã viết ở trên trang html thay vào đó nó đọc từ trang chỉ mục của tôi enter image description here

trang index

<!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 debugger enter image description here

+1

https://developers.facebook.com/debug nói gì? Liên kết đến trang là gì? – WizKid

+0

@WizKid Xin chào, cảm ơn bạn đã trả lời. tôi đã thêm kết quả gỡ lỗi facebook vào câu hỏi –

+0

Bạn có thể thêm url quá vì vậy tôi không phải sao chép nó từ hình ảnh? – WizKid

Trả lời

14

jackypan1989 gì nói là đúng, bạn sẽ phải sử dụng url tuyệt đối. Nhưng có một điều khác mà tôi khá chắc chắn xảy ra là Facebook sẽ không chạy mã JavaScript của bạn, do đó phần

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

sẽ không bao giờ được thay thế bằng

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

Vấn đề này là bạn cũng có thể ngăn Google thu thập dữ liệu trang của bạn.

Chúng tôi đã gặp sự cố tương tự và chúng tôi đã sử dụng https://prerender.io để giải quyết vấn đề. Bạn có thể sử dụng nó trên máy chủ của riêng bạn hoặc sử dụng một trong các dịch vụ miễn phí/trả tiền của họ.

+1

Làm thế nào để 'prerender.io' biết khi nào trang đã sẵn sàng? hiển thị trang bằng javascript là phần dễ dàng, nhưng có nhiều cuộc gọi AJAX mà một trang chủ yếu phụ thuộc vào và bạn phải biết khi nào cuộc gọi AJAX đã được giải quyết – vsync

0

Trong mã của bạn, bạn nên thiết lập url tuyệt đối của bạn trên attr 'data-href' của fb-phần-nút.

Ví dụ:

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

Bạn đã có một thân xác định xung quanh ng-view của bạn. Sau đó, quan điểm của bạn có cơ thể riêng của nó. Vì vậy, bạn đang cố gắng để tiêm một cơ thể bên trong của một cơ thể mà không phải là đi để làm những gì bạn muốn.

Lưu ý rằng bộ điều khiển của bạn không kiểm soát phần tử HTML có chứa thẻ Meta. Nó chỉ kiểm soát mã mà nó chứa (một div bên trong cơ thể trong trường hợp của bạn).

Bạn có thể thêm bộ điều khiển vào thẻ HTML hoặc bạn có thể sử dụng $ rootScope.

Rất nhiều câu trả lời cho điều này ở đây: How to dynamically change header based on AngularJS partial view?

Trong điều khiển của bạn để xử lý những ng-view: app.controller('MainControl', function ($rootScope, $scope, Config) { ... $rootScope.canonical = Config.domain; });

tôi cần để tự động thiết lập một liên kết kinh điển, nhưng hiệu trưởng cho METAS là như nhau.Trong tiêu đề của bạn: <link rel="canonical" ng-href="{{ canonical }}" />

Có thể bạn sẽ muốn sử dụng ng-bind cho thẻ meta.

2

Tôi sẽ thêm vào các câu trả lời trước rằng đầu tiên sẽ giải quyết vấn đề thu thập dữ liệu nhưng chia sẻ facebook là một chút khác nhau tôi nghĩ (cảm thấy tự do để chứng minh tôi sai :)). Để tránh gây phiền nhiễu {{}} bạn có thể xác định bạn chỉ meta riêng <meta meta-description> và sử dụng một mẫu:

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; 


    } 
    }; 
}]); 

Chúng tôi vẫn đang tìm ra các vấn đề SEO/chia sẻ với angularJS ở đây nhưng đó là những gì chúng tôi hiện đang sử dụng.

Các vấn đề liên quan