it-swarm.com.de

Wie wählt Facebook Sharer beim Teilen meiner URL Bilder und andere Metadaten aus?

Wenn Sie Facebook Sharer verwenden, bietet Facebook dem Benutzer die Möglichkeit, eines von wenigen Bildern, die aus der Quelle stammen, als Vorschau für den Link zu verwenden. Wie werden diese Bilder ausgewählt und wie kann ich sicherstellen, dass ein bestimmtes Bild auf meiner Seite immer in dieser Liste enthalten ist?

389
Sampson

Wie kann ich Facebook mitteilen, welches Bild verwendet werden soll, wenn meine Seite freigegeben wird?

Facebook hat eine Reihe von Open-Graph-Meta-Tags , mit denen es entscheidet, welches Bild angezeigt wird.

Die Schlüssel für das Facebook-Bild sind:

<meta property="og:image" content="http://ia.media-imdb.com/rock.jpg"/>
<meta property="og:image:secure_url" content="https://secure.example.com/ogp.jpg" />

und es sollte im <head></head> -Tag oben auf Ihrer Seite vorhanden sein.

Wenn diese Tags nicht vorhanden sind, wird nach der älteren Methode zum Angeben eines Bildes gesucht: <link rel="image_src" href="/myimage.jpg"/>. Wenn keine von beiden vorhanden sind, überprüft Facebook den Inhalt Ihrer Seite und wählt Bilder von Ihrer Seite aus, die den Kriterien für die Freigabe von Bildern entsprechen: Das Bild muss mindestens 200 x 200 Pixel groß sein, ein maximales Seitenverhältnis von 3: 1 haben und in PNG angezeigt werden. JPEG- oder GIF-Format.

Kann ich mehrere Bilder angeben, damit der Benutzer ein Bild auswählen kann?

Ja, Sie müssen nur mehrere Bild-Meta-Tags in der Reihenfolge hinzufügen, in der sie angezeigt werden sollen. Dem Benutzer wird dann ein Dialogfeld zur Bildauswahl angezeigt:
Facebook Image Selector

Ich habe die entsprechenden Bild-Meta-Tags angegeben. Warum akzeptiert Facebook die Änderungen nicht?

Sobald eine URL freigegeben wurde, greift der Crawler von Facebook, der einen Benutzeragenten von facebookexternalhit/1.1 (+https://www.facebook.com/externalhit_uatext.php) hat, auf Ihre Seite zu und speichert die Metainformationen im Cache. Verwenden Sie das Facebook Url Debugger/Linter Tool , das sie im Juni 2010 gestartet haben, um den Cache von Facebook Servern zum Löschen zu zwingen Zwischenspeichern und Beheben von Problemen mit Metatags auf Ihrer Seite.

Außerdem müssen die Bilder auf der Seite für den Facebook-Crawler öffentlich zugänglich sein. Sie sollten eine absolute URL wie http://example.com/yourimage.jpg anstelle von nur /yourimage.jpg angeben.

Kann ich diese Meta-Tags mit clientseitigem Code wie Javascript oder jQuery aktualisieren? Nein. Ähnlich wie bei Suchmaschinen-Crawlern führt der Facebook-Scraper überhaupt keine Scripts aus Meta-Tags sind vorhanden, wenn die Seite heruntergeladen wird. Dies sind die Meta-Tags, die für die Bildauswahl verwendet werden.

Das Hinzufügen dieser Tags führt dazu, dass meine Seite nicht mehr validiert wird. Wie kann ich das beheben?

Sie können Ihrem Tag die erforderlichen Facebook-Namespaces hinzufügen, und Ihre Seite sollte dann die Validierung bestehen:

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:og="http://ogp.me/ns#"
      xmlns:fb="https://www.facebook.com/2008/fbml">  
588
bkaid

Wenn Sie für Facebook teilen, müssen Sie in Ihrem HTML-Code im Kopfbereich die nächsten Meta-Tags hinzufügen:

<meta property="og:title" content="title" />
<meta property="og:description" content="description" />
<meta property="og:image" content="thumbnail_image" />

Und das ist es!

Fügen Sie die Schaltfläche wie gewünscht hinzu, je nachdem, was der FB Ihnen sagt.

Alle Informationen, die Sie benötigen, finden Sie in www.facebook.com/share/

36
Matias

Wenn Sie facebook.com/sharer.php (PHP) verwenden, können Sie ab 2013 einfach beliebige Schaltflächen/Links erstellen, z.

<a class="btn" target="_blank" href="http://www.facebook.com/sharer.php?s=100&amp;p[title]=<?php echo urlencode(YOUR_TITLE);?>&amp;p[summary]=<?php echo urlencode(YOUR_PAGE_DESCRIPTION) ?>&amp;p[url]=<?php echo urlencode(YOUR_PAGE_URL); ?>&amp;p[images][0]=<?php echo urlencode(YOUR_LINK_THUMBNAIL); ?>">share on facebook</a>

Abfrageparameter verknüpfen:

p[title] = Define a page title
p[summary] = An URL description, most likely describing the contents of the page
p[url] = The absolute URL for the page you're sharing 
p[images][0] = The URL of the thumbnail image to be used as post thumbnail on facebook

Es ist ganz einfach: Sie brauchen keine js oder andere Einstellungen. Ist nur ein HTML-Raw-Link. Gestalten Sie das A-Tag wie gewünscht.

28
Antonio Max

Fügen Sie das folgende Tag in das head ein:

<link rel="image_src" href="/path/to/your/image"/>

Von http://www.facebook.com/share_partners.php

Ich bin mir nicht sicher, was als Standard gewählt wird, wenn dieses Tag fehlt.

13
Matt Bridges

Meiner Erfahrung nach verwendet http://www.facebook.com/sharer.php keine Meta-Tags. Es verwendet die Zeichenfolge, die Sie übergeben. Siehe unten.

http://www.facebook.com/sharer.php?s=100&p [title] = THIS IS MEIN TITEL & p [summary] = THIS IS MEINE ZUSAMMENFASSUNG & p [url] = http: //www.MYURL.com&&p [images] [0] = http: //www.MYURL.com/img/IMAGEADDRESS

Die Meta-Tags funktionieren mit den Like/Send-Knöpfen der Facebook-Entwickler, ebenso wie die anderen Open Graph-Informationen. Wenn Sie also eines der tatsächlichen Elemente von Facebook wie die Kommentare und dergleichen verwenden, ist dies alles mit dem Open Graph-Material verknüpft.

UPDATE: Es gibt zwei Möglichkeiten, den sharer * note the? S gegenüber dem? U-Wert in der Abfragezeichenfolge zu verwenden
1 ==> STRING: http://www.facebook.com/sharer.php?s = + Inhalt von oben
~~> Zieht Informationen aus dem String.
2 ==> URL: http://www.facebook.com/sharer.php?u=url wobei url einer tatsächlichen url entspricht
~~> Kratzt die im URL-Wert angegebene Seite
~~> Sie können die Werte hier testen: https://developers.facebook.com/tools/debug

12
Jason Lydon

Alter Weg, funktioniert nicht mehr:

<link rel="image_src" href="http://yoururl/yourimage"/>

Berichtet neuen Weg, funktioniert auch nicht:

<meta property="og:image" content="http://yoururl/yourimage"/>

Es funktionierte zufällig während des ersten Tages, an dem ich es implementierte, überhaupt nicht mehr.

Die Facebook-Linter-Seite, ein Dienstprogramm, das Ihre Seite überprüft, meldet, dass alles korrekt ist, und zeigt das von mir ausgewählte Vorschaubild an ... nur, dass die share.php-Seite selbst nicht funktioniert. Muss ein Fehler bei Facebook sein, den sie anscheinend nicht beheben möchten, da jeder Fehlerbericht zu diesem Problem, den ich in ihrem System gesehen habe, als behoben oder behoben gilt.

11
theo

Um Titel, Beschreibung und Bild zu ändern, müssen unter head-Tag einige Meta-Tags eingefügt werden.

SCHRITT 1 :
Fügen Sie unter head tag Meta-Tags hinzu

<html>
<head>
    <meta property="og:url" content="http://www.test.com/" />
    <meta property="og:image" content="http://www.test.com/img/fb-logo.png" />
    <meta property="og:title" content="Prepaid Phone Cards, low rates for International calls with Lucky Prepay" />
    <meta property="og:description" content="Cheap prepaid Phone Cards. Low rates for international calls anywhere in the world." />

NÄCHSTER SCHRITT :
Klicken Sie auf den folgenden Link
https://developers.facebook.com/tools/debug

Fügen Sie Ihre URL in das Textfeld (z. B. http://www.test.com/ ) ein, in dem Sie die Tags erwähnt haben. Klicken Sie auf die Schaltfläche DEBUG.

Es ist fertig.

Sie können dies hier überprüfen https://www.facebook.com/sharer/sharer.php?u=http://www.test.com/

In der obigen URL ist u = Ihr Website-Link

GENIESSEN !!!!

10
Gaurav123

Für sicheres HTTPS

<meta property="og:image:secure_url" content="https://image.path.png" />
2
Stefan Michev

Das hat bei mir funktioniert: Ich habe das gewünschte Miniaturbild direkt nach dem Tag auf der Seite platziert und es zu klein gemacht, um es zu sehen.

<img src="imagename.jpg" width="1" height="1" />

Ich habe es nicht mit Höhe 0 und Breite 0 getestet, aber es wird wahrscheinlich immer noch funktionieren. Dies garantiert nicht, dass der Benutzer dieses Bild auswählt.

AUCH es sieht so aus, als würde Facebook die Thumbnails auf Ihrer Seite zwischenspeichern und nicht immer nach neuen suchen. Wenn Sie dies zu einer anderen Seite Ihrer Website hinzufügen, werden Sie feststellen, dass es funktioniert.

1
daniel bernal

Ich hatte dieses Problem und behebte es mit dem Vorschlag von Manuel-84. Die Verwendung eines 400x400px-Bilds hat hervorragend funktioniert, während mein kleineres Bild nie im Sharer angezeigt wurde.

Beachten Sie, dass Facebook ein quadratisches Bild mit mindestens 200 Pixel als og: image-Tag empfiehlt: https://developers.facebook.com/docs/opengraph/howtos/maximizing-distribution-media-content/#tags

1
William

Verwenden Sie den Facebook-Feed-Dialog anstelle des Freigabe-Dialogs, um benutzerdefinierte Bilder anzuzeigen

Beispiel:

https://www.facebook.com/dialog/feed?app_id=1389892087910588
&redirect_uri=https://scotch.io
&link=https://scotch.io
&picture=http://placekitten.com/500/500
&caption=This%20is%20the%20caption
&description=This%20is%20the%20description
1
kittu

Ich konnte Facebook nicht dazu bringen, das richtige Bild aus einem bestimmten Beitrag auszuwählen. Daher habe ich die folgenden Schritte ausgeführt:

https://webapps.stackexchange.com/questions/18468/adding-meta-tags-to-individual-blogger-posts

Mit anderen Worten:

<b:if cond='data:blog.url == "http://urlofyourpost.com"'>
  <meta content='http://urlofyourimage.png' property='og:image'/>
 </b:if>

Grundsätzlich müssen Sie eine if-Anweisung in den HTML-Code Ihrer Site fest programmieren, damit dieser den Metainhalt für alle Änderungen ändert, die Sie für diesen einen Beitrag vorgenommen haben. Es ist eine unordentliche Lösung, aber es funktioniert.

0