og Metatags, soziale Schaltflächen und angularjs

Ich erstelle eine Website mit mehreren Ansichten. Das Tag und die Tags der Seite werden über eine $ rootScope-Variable geändert. so habe ich so etwas wieog Metatags, soziale Schaltflächen und angularjs

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

Immer dann, wenn jede Ansicht auf der Website geladen werden, die page_title Variable ändert und den Titel und den og: Titel-Tags aktualisiert werden (alles funktioniert wie erwartet).

Das Problem ist, dass ich auf einigen Ansichten eine Facebook, eine Google+ und eine Twitter-Schaltfläche laden muss. Ich kann sie richtig angezeigt, aber wenn ich die Seitentitel erscheinen auf jeder sie klicken so etwas wie zu sein:

{{page_title}}

Ich habe versucht, die Ausführung der Skripte der einzelnen Tasten zu verzögern mit setTimeOut aber nichts Gutes. Aber die Skripte lesen nur, was geschrieben wird, sie analysieren den page_title nicht.

Kennt jemand einen Workaround?

Danke

Quelle

2013-06-15 Terumi

Diese nicht mit Javascript getan werden kann. Manche Leute denken, dass Facebook liest, was gerade auf der Seite ist. Es ist nicht. Es macht eine separate Anfrage an Ihren Server mit der gleichen URL (von window.location.href) mit seinem Scraper, und der Facebook Scraper führt kein Javascript aus. Deshalb bekommst du {{page_title}}, wenn du auf einen Facebook Share-Button klickst. Ihre Inhalte müssen vom Server generiert werden, wenn Facebook die URL erreicht, bekommt es den Inhalt, den es benötigt, ohne Javascript zu benötigen. Sie können das serverseitige Rendering auf verschiedene Arten angehen.

Sie können Ihre Server-Side-Technologie zu machen, um den Inhalt zu ermöglichen.
Sie können den PhantomJS-Ansatz https://github.com/steeve/angular-seo verwenden.

Quelle

2013-07-08 18:24:06

Überprüfen Sie http://prerender.io/, es basiert ebenfalls auf phantomjs, scheint aber mehrere js-Frameworks und Server-Plattformen wie node, java oder php zu unterstützen. – Kapep

Ich habe eine einfache Implementierung von Earls erstem Vorschlag (serverseitiges Rendering) in einem Artikel hier beschrieben: http://www.michaelbromley.co.uk/blog/171/enable-rich-social-sharing-in-your -angularjs-app / –

Es besteht auch die Möglichkeit, Facebook-Widgets erneut zu rendern. Verwenden Sie ihre Parse Methode:

FB.XFBML.parse();

nach dem Winkel Sachen abgeschlossen hat. Es funktioniert nicht für meinen Share-Button (noch nicht !!), aber ich habe es auf Likes getestet und es ist cool. Im Grunde scannt es das DOM erneut und rendert die Facebook-Widgets. Sie können auch ein einzelnes Element passieren, so etwas wie diese Richtlinie:

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

Dieser Code-Schnipsel das DOM für html5 facebook fb-Widgets wie Rescan würde, wenn das letzte Element in Winkelverstärker zu schaffen.

Quelle

2013-12-05 02:02:10 Zlatko

og Metatags, soziale Schaltflächen und angularjs

Antwort

Verwandte Themen