Podczas udostępniania na Facebooku, wyświetlanie nawiasów kątowych zamiast treści

Question

AngularJS renderuje treść do tytułu i znaczników meta, ale kiedy udostępniam ją facebookowi lub google, w oknie wyskakującym wyświetla tam {{}} kątową.

Kod:

<div ng-controller="MyCtrl"> 
<title>{{mDetails.display1}} - Subtitle</title> 
<meta name="description" content="{{mDetails.display1}} - {{mDetails.address1}} , {{mDetails.city}}, {{mDetails.state}}, {{mDetails.country}}"> 
. 
. 

Uwaga: jestem już przy użyciu ng-cloak.

Dzięki za pomoc.

Answer 1

dwa sposoby, jak wspomniano na kolejne pytanie: - og meta tags, social buttons and angularjs

Metoda 1: -

ta nie może być wykonana przy użyciu javascript. Niektórzy uważają, że Facebook czyta to, co aktualnie znajduje się na stronie. To nie jest. Odsyła osobne żądanie do twojego serwera za pomocą tego samego adresu URL (z window.location.href) używając Skrobaczka, a Skrobak na Facebooku nie uruchamia javascript. Właśnie dlatego otrzymujesz {{page_title}} po kliknięciu czegoś podobnego do przycisku udostępniania na Facebooku. Twoje treści będą musiały być generowane przez serwer, więc gdy Facebook trafi na adres URL, pobierze zawartość, której potrzebuje, bez potrzeby korzystania z javascript. Możesz poradzić sobie z renderowaniem po stronie serwera na kilka sposobów.

You can allow your server side technology to render the content. 
You can use the PhantomJS approach https://github.com/steeve/angular-seo. 

Metoda 2: -

Istnieje również możliwość, że można ponownie uczynić widżety Facebooka. Użyj ich metody analizy:

FB.XFBML.parse();

po zakończeniu czynności kątowych. To nie działa dla mojego przycisku udostępniania (jeszcze !!), ale testowałem go podobieństwa i jest fajnie. Zasadniczo ponownie skanuje DOM i renderuje widżety Facebooka. Można również przekazać ją pojedynczy element, coś w tym dyrektywy:

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

Ten fragment będzie przeskanować DOM dla html5 facebook Fb-jak podczas tworzenia widgetów ostatni element kątowego repeater.

---

Innym Akceptowane odpowiedź w tym samym kontekście: - https://stackoverflow.com/a/24086652/1366216

Edit:

I wdrożone JSON po stronie serwera tylko dla meta tagi, jednak jego narzutu bo na stronie danych, wciąż jest połączenie ajaxowe.

$mid=$_GET['id']; 
    $mJSON = file_get_contents($homeurl."/json/getdetail.php?mid=".$mid); 
    $mObject = json_decode($mJSON, true); 
    if ($mObject['ID'] != undefined && $mObject['ID'] != '') { 
     <meta property="og:title" content="<?php echo $mObject['display1'];?>"/> 
     <meta property="og:description" content="<?php echo .$mObject['display2']; ?>"/> 
    } 

Answer 2

możliwość, że pracował dla mnie jest mieć „wycofanie się” do opisu FB (tak byłoby to ogólny opis, który pokazuje kiedy kątowa nie załadowany). Osiągnąłem to, używając dwóch ng-if.

<meta ng-if="mDetails.display1" property="og:title" content="{ mDetails.display1 + "- Subtitle"}}"> 
<meta ng-if="!mDetails.display1" property="og:title" content="A generic title"> 

Ilekroć są dwa metaopisy o tym samym tytule, FB zajmie ostatnią. Po wyrenderowaniu googlebot zobaczy tylko tę inną niż domyślną.