og 메타 태그, 소셜 버튼 및 angularjs

여러보기를 사용하여 웹 사이트를 만들고 있습니다. 페이지의 태그와 태그는 $ rootScope 변수를 통해 변경됩니다. 제목 태그가 업데이트됩니다 (모든 것이 예상대로 작동) : 그래서 각 뷰는 웹 사이트의 PAGE_TITLE 변수 변화와 제목과 OG에로드받을 때마다og 메타 태그, 소셜 버튼 및 angularjs

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

같은 것을 가지고있다.

문제는 일부보기에서 페이스 북, google + 및 트위터 버튼을로드해야한다는 것입니다. 나는 제대로 표시 할 수 있지만 각 그들에 클릭하면 페이지 제목은 뭔가처럼 보인다 :

{{page_title}}

내가에서는 setTimeout을 사용하여 각 버튼의 스크립트의 실행을 지연하려하지만 좋은에했습니다. 그러나 스크립트는 작성된 내용을 읽었을 때 page_title을 구문 분석하지 않습니다.

누구나 해결 방법을 알고 있습니까?

고맙습니다.

출처

2013-06-15 Terumi

이것은 자바 스크립트를 사용하여 수행 할 수 없습니다. 어떤 사람들은 Facebook이 현재 페이지에있는 것을 읽고 있다고 생각합니다. 그렇지 않습니다. 그것은 당신의 서버에 그것의 Scraper를 사용하는 동일한 URL (window.location.href로부터)을 사용하고, Facebook Scraper는 javascript를 실행하지 않습니다. 그래서 Facebook 공유 버튼과 같은 것을 클릭하면 {{page_title}}을 얻게됩니다. 귀하의 콘텐츠는 서버에 의해 생성되어야하므로 페이스 북이 URL을 치기 시작하면 자바 스크립트가 필요없는 컨텐츠를 가져옵니다. 몇 가지 방법으로 서버 측 렌더링을 처리 할 수 있습니다.

서버 측 기술이 콘텐츠를 렌더링하도록 허용 할 수 있습니다.
PhantomJS 방식 https://github.com/steeve/angular-seo을 사용할 수 있습니다.

출처

2013-07-08 18:24:06

http://prerender.io/를 확인하십시오, 또한 phantomjs를 기반으로하지만 여러 js 프레임 워크와 노드, java 또는 PHP와 같은 서버 플랫폼을 지원하는 것 같습니다. – Kapep

나는 Earl의 첫 번째 제안 (서버 측 렌더링)의 간단한 구현을 다음 기사에서 설명했다. http://www.michaelbromley.co.uk/blog/171/enable-rich-social-sharing-in-your -angularjs-app / –

Facebook 위젯을 다시 렌더링 할 수도 있습니다. 당신의 각도 물건이 완료된 후

FB.XFBML.parse();

: 자신의 구문 분석 방법을 사용합니다. 내 공유 버튼 (아직 !!)에서는 작동하지 않지만 좋아요에서 테스트 했으므로 멋지다. 기본적으로 DOM을 다시 스캔하여 Facebook 위젯을 렌더링합니다. 또한이 지시어처럼 그것을 하나의 요소, 뭔가를 전달할 수 있습니다 각 중계기의 마지막 요소를 만들 때

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

이 조각은 HTML5 페이스 북 FB-같은 위젯의 DOM을 다시 검색합니다.

출처

2013-12-05 02:02:10 Zlatko

og 메타 태그, 소셜 버튼 및 angularjs

답변

관련 문제