web-dev-qa-db-fra.com

Angular 2 - Partager l'URL de la page, le titre et la description sur Facebook

Mon objectif final est simple:

  1. L'utilisateur clique sur un bouton de l'interface utilisateur. 
  2. La fonction TypeScript appelée par click ouvre un nouvel onglet de partage sur facebook pour l'utilisateur.
  3. Le "titre" et la "description" de la page partagée sont tous deux fournis par mon site.

Nous avons un article sur l’inclusion des métabalises sur la page liée, que fb le sait inclure comme titre/description ( Comment personnaliser le sharer.php de Facebook). Le problème est que j'utilise Angular 2, je dois donc ajouter dynamiquement des métabalises pour la page avant que Facebook ne la voie. 

J'ai du mal à imaginer comment cela fonctionne, car je suppose que le serveur FB va lancer l'application NG2 et rechercher les métabalises (éditer des métabalises dans le navigateur ouvrant le lien de partage n'a donc aucun sens, car l'API FB aura instance du code HTML). 

tl; dr: Comment puis-je ouvrir une boîte de dialogue de partage d'adresse fb à partir d'une application NG2 et fournir un titre/une description?

Remarque: la page 'Partager sur fb' peut être simplement ouverte comme ceci: window.open('http://www.facebook.com/sharer/sharer.php?u=www.google.com'); Ceci fonctionne, mais sans paramètre.

Additif facultatif (exemple de code pour ajouter des méta-tags de manière dynamique, ce qui fonctionne mais ne permet pas de résoudre le problème):

var titleMeta = document.createElement('meta');
var descMeta = document.createElement('meta');

titleMeta.setAttribute('property', 'og:title');
titleMeta.setAttribute('content', 'The Rock');

descMeta.setAttribute('property', 'og:description');
descMeta.setAttribute('content', 'Foo Description');

document.getElementsByTagName('head')[0].appendChild(titleMeta);
document.getElementsByTagName('head')[0].appendChild(descMeta);

Addendum 2: Le partage utilisé pour vous permettre de mettre le titre et la description dans l'URL, mais ce n'est plus le cas selon https://developers.facebook.com/x/bugs/357750474364812/ . On dirait qu'il DOIT être extrait des balises META.

javascriptfacebookangularmeta-tags
10
VSO

Vous devriez regarder @ Les boutons de partage pourraient vous aider

npm install --save ngx-sharebuttons

AppModule

import {ShareButtonsModule} from 'ngx-sharebuttons';
@NgModule({
  imports: [
   //...
   HttpModule, 
   ShareButtonsModule.forRoot(),
  // ...
  ]
})

Modèle

<share-buttons></share-buttons>
6
Rahul Singh

Essayez le code suivant -

var windowObj = window.open();
windowObj.document.head.innerHTML='<meta property="og:title" content="The Rock"/><meta property="og:type" content="movie"/><meta property="og:url" content="http://www.imdb.com/title/tt0117500/"/><meta property="og:image" content="http://ia.media-imdb.com/rock.jpg"/><meta property="og:site_name" content="IMDb"/><meta property="fb:admins" content="USER_ID"/><meta property="og:description"      content="A group of U.S. Marines, under command of               a renegade general, take over Alcatraz and               threaten San Francisco Bay with biological               weapons."/>'
1
Rakesh Chouhan

Si vous utilisez le rendu côté client, le robot Facebook ne peut pas exécuter js sur la page. Il reçoit donc le code HTML renvoyé par le serveur et recherche les balises méta OG. 

  • s'il s'agit de contenu rendu dynamiquement, vous devez ajouter côté serveur ces balises méta au index.html que vous renvoyez. (Je ne suis pas sûr de ce que vous utilisez sur le backend pour servir/générer un index, mais vous pouvez utiliser par exemple handlebars.js )

  • sinon, placez ces balises méta directement dans votre index.html

  • vous pouvez ensuite le tester ici → https://developers.facebook.com/tools/debug/sharing

1
Maielo

Le problème est que le robot Facebook ne verra que le code HTML rendu côté serveur, Facebook n'exécutera pas le javascript côté client. C'est la raison pour laquelle votre code pour mettre à jour les balises Meta ne vous aidera pas du tout.

Options-

1) Examinez les options de rendu côté serveur telles que phantom.js

2) S'il ne s'agit que d'un titre et d'une description dans l'ensemble de votre application, insérez directement la balise META dans votre répertoire racine index.html (où nous spécifions Base Href et chargeons les bundles javascript de l'application et du fournisseur). Comme l'a souligné @Stuart dans le commentaire

1
Dracarys

Si vous utilisez Angular 2, les balises méta dynamiques avant le rendu HTML ne peuvent pas être possibles pour un rendu côté client avec Angular 2 ne peut pas être possible. Avec Angular 2, cela n’est possible que sur le rendu côté serveur.

Il est résolu dans Angular 4 . Vous pouvez voir sur ce lien-

Cliquez ici

0
Aman Jain

si cela peut vous aider à modifier la description du titre? angulaire-2-seo

0
Nan Zhao