e meta tag, social buttons e angularjs

Sto creando un sito Web utilizzando più visualizzazioni. Il tag e i tag della pagina vengono modificati tramite una variabile $ rootScope. così ho qualcosa di similee meta tag, social buttons e angularjs

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

Ogni volta ogni vista vengono caricati sul sito, le modifiche page_title variabile e il titolo e l'og: title tag vengono aggiornati (tutto funziona come previsto).

Il problema è che ho bisogno, su alcune viste di caricare un facebook, un google + e un pulsante twitter. Posso visualizzare correttamente ma se clicco su ciascuno di loro il titolo della pagina sembra essere qualcosa di simile:

{{page_title}}

ho cercato di ritardare l'esecuzione degli script di ciascun pulsante usando setTimeOut ma a nulla di buono. Ma gli script leggono solo ciò che è scritto, non analizzano il page_title.

Qualcuno sa una soluzione alternativa a questo?

Grazie

fonte

2013-06-15 Terumi

Questo non può essere fatto utilizzando JavaScript. Alcune persone pensano che Facebook stia leggendo ciò che è attualmente sulla pagina. Non è. Fa una richiesta separata al tuo server usando lo stesso url (da window.location.href) usando il suo Scraper, e Facebook Scraper non esegue javascript. Ecco perché ottieni {{page_title}} quando fai clic su qualcosa come un pulsante di condivisione di Facebook. Il tuo contenuto dovrà essere generato dal server, quindi quando Facebook va a colpire l'url ottiene il contenuto di cui ha bisogno in anticipo senza la necessità di javascript. Puoi affrontare il rendering lato server in pochi modi.

È possibile consentire la tecnologia lato server per il rendering del contenuto.
È possibile utilizzare l'approccio PhantomJS https://github.com/steeve/angular-seo.

fonte

2013-07-08 18:24:06

Controllare http://prerender.io/, si basa anche su phantomjs ma sembra supportare più framework js e piattaforme server come node, java o php. – Kapep

Ho delineato una semplice implementazione del primo suggerimento di Earl (rendering lato server) in un articolo qui: http://www.michaelbromley.co.uk/blog/171/enable-rich-social-sharing-in-your -angularjs-app / –

C'è anche una possibilità che è possibile ri-rendering di widget di Facebook. Usare il loro parse metodo:

FB.XFBML.parse();

dopo la vostra roba angolare è stata completata. Non funziona per il mio pulsante di condivisione (ancora !!), ma l'ho testato su Mi piace, ed è bello. Fondamentalmente rivisita il DOM e rende i widget di Facebook. È inoltre possibile passare un singolo elemento, qualcosa di simile a questa direttiva:

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

Questo frammento sarebbe ripetere l'analisi del DOM per HTML5 facebook widget fb-like quando si crea l'ultimo elemento in ripetitore angolare.

fonte

2013-12-05 02:02:10 Zlatko

e meta tag, social buttons e angularjs

risposta

Problemi correlati