it-swarm.com.de

Angular 2 - URL, Titel und Beschreibung der Seite auf Facebook teilen

Mein Endziel ist einfach:

  1. Der Benutzer klickt auf eine Schaltfläche in der Benutzeroberfläche. 
  2. Die von click aufgerufene TypeScript-Funktion öffnet für Facebook einen neuen Freigabe-Reiter auf Facebook.
  3. Sowohl der 'Titel' als auch die 'Beschreibung' für die freigegebene Seite werden von meiner Site bereitgestellt.

Wir haben einen Beitrag zum Einfügen von Metatags auf der verlinkten Seite, den fb als Titel/Beschreibung angeben kann ( Wie kann ich die sharer.php von Facebook anpassen). Das Problem ist, dass ich Angular 2 verwende, also muss ich irgendwie dynamisch Metatags für die Seite hinzufügen, bevor Facebook sie sieht. 

Es fällt mir schwer, mir vorzustellen, wie das funktioniert, da ich davon ausgehe, dass der FB-Server meine NG2-App trifft und nach den Metatags sucht (das Bearbeiten von Metatags im Browser beim Öffnen des Share-Links ist daher sinnlos, da die FB-API einen anderen Effekt erhält Instanz der HTML). 

tl; dr: Wie öffne ich ein Fb-URL-Freigabedialogfeld von einer NG2-App und gebe einen Titel/eine Beschreibung ein?

Hinweis: Die 'Share on fb'-Seite kann einfach wie folgt geöffnet werden: window.open('http://www.facebook.com/sharer/sharer.php?u=www.google.com'); Dies funktioniert, aber ohne Params.


Optionaler Nachtrag (Beispielcode zum dynamischen Hinzufügen von Meta-Tags, der funktioniert, aber nicht hilfreich ist):

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: Der Sharer, der verwendet wurde, um den Titel und die Beschreibung in die URL einzutragen. Dies ist jedoch nicht mehr der Fall gemäß https://developers.facebook.com/x/bugs/357750474364812/ . Sieht aus, als müsste es aus den Metatags gezogen werden.

10
VSO

Sie sollten auf @ Share Buttons schauen, vielleicht helfen

npm install --save ngx-sharebuttons

AppModule

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

Vorlage

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

Versuchen Sie den folgenden Code -

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

Wenn Sie clientseitiges Rendering verwenden, kann der Facebook-Crawler keine js auf der Seite ausführen. Daher wird HTML-Code abgerufen, der vom Server zurückgegeben wird, und sucht nach OG-Metatags. 

  • wenn es sich um dynamisch gerenderten Inhalt handelt, müssen Sie serverseitig diese Metatags zu index.html hinzufügen, den Sie zurückgeben. (Ich bin nicht sicher, was Sie im Backend zum Bereitstellen/Generieren von Index verwenden, aber Sie können beispielsweise handlebars.js verwenden.)
  • ansonsten fügen Sie diese Meta-Tags direkt in Ihren index.html ein.

  • sie können es dann hier testen → https://developers.facebook.com/tools/debug/sharing

1
Maielo

Das Problem ist, dass Facebook-Crawler nur serverseitig gerendertes HTML-Format sieht, Facebook jedoch kein clientseitiges Javascript ausführt. Aus diesem Grund hilft Ihr Code zum Aktualisieren von Meta-Tags nicht.

Optionen-

1) Schauen Sie sich die Optionen für das serverseitige Rendern wie phantom.js an

2) Wenn es sich nur um einen Titel und eine Beschreibung in Ihrer gesamten Anwendung handelt, fügen Sie das Meta-Tag direkt in Ihre Wurzel index.html ein. Wie @Stuart im Kommentar zeigt

1
Dracarys

Wenn Sie Angular 2 verwenden, können die dynamischen Meta-Tags vor dem HTML-Rendering für das clientseitige Rendering mit Angular 2 nicht möglich sein. Mit Angular 2 ist nur das serverseitige Rendern möglich.

Sie wird in Angular 4 ..__ aufgelöst. Sie können auf diesem Link sehen:

Klick hier

0
Aman Jain

wenn dies Ihnen helfen kann, die Titelbeschreibung zu ändern? eckig-2-seo

0
Nan Zhao