Og метатеги, социальные кнопки и angularjs

Я создаю веб-сайт, используя несколько видов. Тег и теги страницы изменяются через переменную $rootScope. поэтому у меня есть что-то вроде

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

Всякий раз, когда каждое представление загружается на веб-сайт, изменяется переменная page_title, и заголовок и теги og: title обновляются (все работает так, как ожидалось).

Проблема в том, что мне нужно, чтобы некоторые виды загружали facebook, кнопку google + и твиттер. Я могу отображать их правильно, но если я нажму на них, заголовок страницы выглядит примерно так:

{{page_title}}

Я попытался отложить выполнение скриптов каждой кнопки, используя setTimeOut, но ничего хорошего. Но скрипты просто читают все, что написано, они не анализируют page_title.

Кто-нибудь знает обходное решение?

Спасибо

Ответы

Ответ 1

Это невозможно сделать с помощью javascript. Некоторые люди думают, что Facebook читает то, что сейчас на странице. Не это. Он делает отдельный запрос на ваш сервер, используя тот же url (из window.location.href), используя его Scraper, а скребок Facebook не запускает javascript. Вот почему вы получаете {{page_title}} при нажатии на что-то вроде кнопки общего доступа Facebook. Ваш контент должен быть сгенерирован сервером, поэтому, когда Facebook отправляется на адрес, он получает контент, который ему нужен, без необходимости использования javascript. Вы можете частично выполнить рендеринг на стороне сервера.

  • Вы можете разрешить вашей серверной технологии отображать контент.
  • Вы можете использовать подход PhantomJS https://github.com/steeve/angular-seo.

Ответ 2

Также существует вероятность того, что вы сможете повторно отображать виджеты Facebook. Используйте их метод разбора:

FB.XFBML.parse();

после того, как материал angular завершен. Это не работает для моей кнопки обмена (пока!!), но я тестировал ее на симпатиях, и это круто. В основном он повторно просматривает 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]);
        }
    };
});

Этот фрагмент сканирует DOM для html5 facebook fb-подобных виджетов при создании последнего элемента в репитере angular.