og meta tags, botões sociais e angularjs

Estou criando um site usando vários modos de exibição. A tag e as tags da página são alteradas através de uma variável $ rootScope. então eu tenho algo parecido

     

Sempre que cada visualização é carregada no site, a variável page_title muda e o título e as tags og: title são atualizadas (tudo funciona como esperado).

O problema é que eu preciso, em alguns pontos de vista para carregar um facebook, um google + e um botão do twitter. Eu posso exibi-los corretamente, mas se eu clicar em cada um deles, o título da página parecerá algo como:

 {{page_title}} 

Eu tentei atrasar a execução dos scripts de cada botão usando setTimeOut mas não é bom. Mas os scripts apenas lêem o que está escrito, eles não analisam o page_title.

Alguém sabe uma solução para isso?

Obrigado

Isso não pode ser feito usando javascript. Algumas pessoas acham que o Facebook está lendo o que está atualmente na página. Não é. Ele faz um pedido separado para o seu servidor usando o mesmo URL (de window.location.href) usando o Scraper, e o Facebook Scraper não executa o javascript. É por isso que você recebe o {{page_title}} ao clicar em algo como um botão de compartilhamento do Facebook. Seu conteúdo terá que ser gerado pelo servidor, então, quando o Facebook for acessar a URL, ele receberá o conteúdo necessário sem a necessidade de javascript. Você pode lidar com a renderização do lado do servidor de algumas maneiras.

  1. Você pode permitir que sua tecnologia do lado do servidor renderize o conteúdo.
  2. Você pode usar a abordagem do PhantomJS https://github.com/steeve/angular-seo .

Existe também a possibilidade de você poder reproduzir novamente os widgets do Facebook. Use seu método de análise :

 FB.XFBML.parse(); 

depois que seu material angular for concluído. Não está funcionando para o meu botão de compartilhamento (ainda !!), mas eu testei em curtidas, e é legal. Basicamente, ele verifica novamente o DOM e renderiza os widgets do Facebook. Você também pode passar um único elemento, algo como esta diretiva:

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

Este snippet iria reexaminar o DOM para widgets html5 facebook fb-like ao criar o último elemento no repetidor angular.