2013-06-15 31 views
15

Tôi đang tạo trang web sử dụng nhiều chế độ xem. Thẻ và các thẻ của trang được thay đổi thông qua biến $ rootScope. vì vậy tôi có một cái gì đó giống nhưog thẻ meta, nút xã hội và angularjs

<html> 
<head> 
    <title ng-bind="page_title"></title> 
    <meta property="og:title" content="{{page_title}}"> 
</head> 

Bất cứ khi nào mỗi điểm có được nạp trên trang web, những thay đổi biến PAGE_TITLE và danh hiệu và og: thẻ tiêu đề được cập nhật (mọi thứ hoạt động như dự kiến).

Vấn đề là tôi cần, trên một số chế độ xem để tải facebook, google + và nút twitter. tôi có thể hiển thị chúng đúng cách nhưng nếu tôi bấm vào mỗi chúng tiêu đề trang dường như cái gì đó như:

{{page_title}} 

Tôi đã cố gắng trì hoãn việc thực hiện các kịch bản của mỗi nút sử dụng setTimeout nhưng không tốt. Nhưng các tập lệnh chỉ đọc bất kỳ nội dung nào được viết, chúng không phân tích cú pháp page_title.

Có ai biết giải pháp này không?

Cảm ơn bạn

Trả lời

28

Điều này không thể thực hiện được bằng javascript. Một số người nghĩ rằng Facebook đang đọc những gì hiện có trên trang. Nó không phải. Nó làm cho một yêu cầu riêng biệt cho máy chủ của bạn bằng cách sử dụng cùng một url (từ window.location.href) bằng cách sử dụng nó Scraper, và Facebook Scraper không chạy javascript. Đó là lý do tại sao bạn nhận được {{page_title}} khi nhấp vào một cái gì đó giống như nút chia sẻ Facebook. Nội dung của bạn sẽ phải được tạo ra bởi máy chủ vì vậy khi Facebook đi để nhấn url nó được nội dung nó cần lên phía trước mà không cần javascript. Bạn có thể xử lý hiển thị phía máy chủ theo một vài cách.

  1. Bạn có thể cho phép công nghệ phụ của máy chủ hiển thị nội dung.
  2. Bạn có thể sử dụng phương pháp PhantomJS https://github.com/steeve/angular-seo.
+3

Kiểm tra http://prerender.io/, nó cũng dựa trên các phantomj nhưng có vẻ như hỗ trợ nhiều khung công tác js và nền tảng máy chủ như nút, java hoặc php. – Kapep

+3

Tôi đã phác thảo một cách thực hiện đơn giản đề xuất đầu tiên của Earl (hiển thị phía máy chủ) trong một bài viết ở đây: http://www.michaelbromley.co.uk/blog/171/enable-rich-social-sharing-in-your -angularjs-app / –

1

Cũng có khả năng bạn có thể hiển thị lại các tiện ích Facebook. Sử dụng phân tích cú pháp của họ phương pháp:

FB.XFBML.parse(); 

sau thứ góc cạnh của bạn đã hoàn thành. Nó không hoạt động đối với nút chia sẻ của tôi (nhưng !!), nhưng tôi đã thử nghiệm nó trên thích, và nó rất tuyệt. Về cơ bản nó quét lại DOM và hiển thị các widget Facebook. Bạn cũng có thể vượt qua nó một yếu tố duy nhất, một cái gì đó giống như chỉ thị này:

'use strict';  
angular.module('ngApp') 
.directive("fbLike", function($rootScope) { 
    return function (scope, iElement, iAttrs) { 
     if (FB && scope.$last) { 
      FB.XFBML.parse(iElement[0]); 
     } 
    }; 
}); 

đoạn này sẽ quét lại DOM cho html5 facebook widget fb giống như khi tạo các yếu tố cuối cùng trong repeater góc.

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