single page application ne pouvez pas obtenir la page en cours de la balise meta pour facebook partager
Je suis en train de mettre en œuvre le facebook bouton partager dans mon application, cependant je n'arrive pas à le faire fonctionner sur et idk pourquoi c'est ce que j'ai jusqu'à présent.
html(/post/-random-chaîne)
<div id="fb-root"></div>
<meta property="og:site_name" content="App">
<meta property="og:url" content="/post/{{data.permalink}}">
<meta property="og:title" content="{{data.title}}">
<meta property="og:type" content="blog">
<meta property="og:image" content="https://i1.ytimg.com/vi/tIWPnxEpNQg/maxresdefault.jpg">
<meta property="og:description" content="{{data.preview}}">
<body >
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&appId=580882498674160&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
//this facebook share button doesn't appear.
<div class="fb-share-button" data-href="https://developers.facebook.com/docs/plugins/" data-type="button"></div>
//so i manually make one.
<a href="" ng-click='facebookShare();'>Share</a>
</body>
controller.js
$scope.facebookShare= function(){
return window.open('http://www.facebook.com/sharer/sharer.php?u='+encodeURIComponent(location.href), 'facebook_share', 'height=320, width=640, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, directories=no, status=no');
}
il fonctionne cependant il n'a pas lu la balise meta que j'ai écrit ci-dessus sur la page html au lieu de cela, il lit à partir de ma page d'index
page d'index
<!DOCTYPE html>
<html ng-app='app'>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<noscript>
<meta http-equiv="refresh" content="7">
<style type="text/css">
.pagecontainer {display:none;}
</style>
<div class="pure-u-1 text-center">
<title>Symsal- Oh no ! We need Javascript to work !</title>
<h3> Please Enable javascript </h3>
</div>
</noscript>
<head>
<title ng-bind='title'></title>
//some css file
</head>
<body>
<div class='puretype'>
<div ng-controller="MasterCtrl">
<div id="layout">
<!-- Menu toggle -->
<a href="" id="menuLink" class=" white menu-link">
<span></span>
</a>
<div id='menu' class="pure-u-1">
<div ng-bind-html="userView"></div>
</div>
</div>
<div class="pure-g-r">
<div id="feed-container" class='pure-u-1 slide'ng-view=''></div>
</div>
</div>
</div>
//some javascript files
</body>
</html>
facebook débogueur
Ce n' developers.facebook.com/debug dire? Quel est le lien de la page?
Salut, merci pour votre réponse. j'ai ajouté facebook débogueur résultat sur la question
Pouvez-vous ajouter l'url de trop donc je n'ai pas de copie de l'image?
naalxofxay.localtunnel.me/post/r6I8eo7HxQ8
l'URL peut être différent parce qu'il s'agit d'une auto générateur de lien de localtunnel mais la page est le même
Salut, merci pour votre réponse. j'ai ajouté facebook débogueur résultat sur la question
Pouvez-vous ajouter l'url de trop donc je n'ai pas de copie de l'image?
naalxofxay.localtunnel.me/post/r6I8eo7HxQ8
l'URL peut être différent parce qu'il s'agit d'une auto générateur de lien de localtunnel mais la page est le même
OriginalL'auteur John Lim | 2014-05-15
Vous devez vous connecter pour publier un commentaire.
Ce jackypan1989 dit est vrai, vous sera utiliser l'url absolue.
Mais une autre chose que je suis sûr que se passe est que Facebook ne fonctionnent pas votre code JavaScript, donc la partie
ne sera jamais remplacé par
Ce problème que vous rencontrez pourrait également empêcher Google d'indexer votre page.
Nous avons eu le même problème, et nous avons utilisé https://prerender.io de les contourner.
Vous pouvez l'utiliser sur votre propre serveur, ou d'utiliser l'un des leurs gratuit/payant services.
prerender.io
sait quand la page est prête? le rendu de la page avec du javascript est la partie facile, mais il y a beaucoup de appel AJAX qu'une page pour la plupart dépend sans doute, et vous devez savoir lors de l'appel AJAX ont été résolusOriginalL'auteur irukavina
Vous avez déjà un corps défini autour de votre ng-view. Ensuite, votre point de vue a son propre corps. Si vous essayez d'injecter un corps à l'intérieur d'un corps qui ne va pas faire ce que vous voulez.
Remarquez que votre contrôleur ne contrôle pas l'élément HTML qui contient les balises Meta. Il ne contrôle que le code qu'il contient (une div à l'intérieur du corps, dans votre cas).
Vous pouvez ajouter un contrôleur de la balise HTML ou vous pouvez utiliser $rootScope.
Beaucoup de réponses à ce sujet ici: Comment modifier dynamiquement en-tête basé sur AngularJS vue partielle?
Dans votre contrôleur qui gère le ng-view:
app.controller('MainControl', function ($rootScope, $scope, Config) {
...
$rootScope.canonical = Config.domain;
});
J'avais besoin de définir de façon dynamique un lien canonique, mais le principal pour les metas est le même. Dans votre en-tête:
<link ng-href="{{ canonical }}" />
Vous voudrez probablement utiliser
ng-bind
pour une balise meta.OriginalL'auteur Splaktar
Je voudrais ajouter à la réponse à la question précédente que les pré-rendu permettra de résoudre ramper problèmes, mais facebook partager est un peu différent je pense ( n'hésitez pas à me prouver le contraire 🙂 ). Pour éviter ennuyeux
{{}}
vous pouvez définir votre propre méta-directive<meta meta-description>
et l'utilisation d'un modèle:Nous sommes encore à essayer de comprendre le SEO/partage avec angularJS ici, mais c'est ce que nous utilisons actuellement.
OriginalL'auteur Alex C
Dans vos codes, vous devez configurer votre url absolue sur l'attribut "data-href' de la fb-share-button.
Par exemple:
OriginalL'auteur jackypan1989