it-swarm.com.de

Facebook Share Dialog zeigt keine Thumbnails beim ersten Laden an

Ich verwende den Facebook-Freigabe-Dialog, um eine bestimmte URL freizugeben. Der freigegebene Link enthält ein Bild, das später Bestandteil der Freigabe sein soll. Das Merkwürdige daran ist, dass es auf mobilen Browsern völlig einwandfrei funktioniert. Der Desktop-Browser lädt das Bild jedoch nicht beim ersten Versuch. Ein einfaches Neuladen des Freigabefensters behebt das fehlende Bild. Sobald dieses Bild mindestens ein Mal angezeigt wird, funktioniert es in anderen Browsern ohne zusätzliche Nachladevorgänge weiter.

Meine Frage lautet also: Weiß jemand, warum beim ersten Aufruf dieser URL keine Bilder angezeigt werden?

Details

Link zum Öffnen des Freigabedialogs

Hier ist die Ausgabe des Facebook Debuggers, der fehlerfrei ist und auch das Bild zeigt.

Facebook-Debugger-Ausgabe

Update

Scheint mit dem Feed-Dialog ohne Probleme zu arbeiten. Dies ist jedoch eine andere Art des Teilens, die ich verhindern möchte, da hierfür eine App-ID erforderlich ist.

20
Sven Bluege

Ich glaube endlich, ich habe das Problem gefunden. Die Bilder, die ich freigeben möchte, werden von einem PHP Skript anstelle einer einfachen Datei geliefert. Es scheint damit zu tun zu haben, wie PHP die Bilder liefert:

Schlecht:

echo readfile($image_thumb_file);

Gut:

$fp   = fopen($image_thumb_file, "rb");
fpassthru($fp);

Nach dieser Änderung erscheinen meine Bilder endlich im Facebook-Debugger.

0
Sven Bluege

Ich bin auch auf dieses Problem gestoßen, und es hat sich herausgestellt, dass Facebook ein undokumentiertes "Feature" hat, das wahrscheinlich zur Optimierung implementiert wurde. Während der ersten Freigabe wird Ihr Bild nicht geladen.

Die Fehlerbeschreibung finden Sie hier: https://developers.facebook.com/bugs/657696104321030

Kurz gesagt, die Lösung ist eine von zwei Möglichkeiten.

  1. Am einfachsten ist es, og: image: width und og: image: height in Ihre OGTags aufzunehmen, die die Pixelbreite und -höhe des Bildes beschreiben. Seltsamerweise wird dies (anscheinend beabsichtigt) Facebook davon überzeugen, die Website sofort einschließlich des Bildes zu durchsuchen.

    <meta property = "og: image" content = " http://example.com/image.jpg"/ >

    <meta property = "og: image: width" content = "450" ​​/>

    <meta property = "og: image: height" content = "298" />

  2. Die zweite mögliche Lösung besteht darin, ein Scrape manuell über die API auszulösen. Ich habe das nicht getestet, aber theoretisch ist es möglich. Siehe die relevante Stackoverflow-Diskussion zu diesem Thema.

23
Aron

Facebook zeigt ein zwischengespeichertes Bild an. Dies geschieht, wenn die Freigabe zum ersten Mal gesendet wird oder wenn der Facebook-Crawler das og: image-Tag auf Ihrer Seite findet.

Laut Facebook-Dokumenten unter https://developers.facebook.com/docs/sharing/best-practices#pre-cache-images

"Einige unserer Social Plugins rendern ein Bild, wenn jemand mit ihnen interagiert. Das Bild basiert auf dem og: Bild auf der Seite oder anderen Bildern auf der Seite, wenn das og: Bild nicht festgelegt ist. Bevor das Social Plugin dies kann Ein Bild rendern Facebooks Crawler muss das Bild mindestens einmal sehen. Bei Websites, bei denen sich die Seiten häufig ändern (z. B. E-Commerce), sieht die erste Person, die auf diese Plugins klickt, kein gerendertes Bild. "

2
SoHo

Um auf Arons Antwort aufzubauen,

Am einfachsten ist es, og: image: width und og: image: height in Ihre OGTags aufzunehmen, die die Pixelbreite und -höhe des Bildes beschreiben. Seltsamerweise wird dies (anscheinend beabsichtigt) Facebook davon überzeugen, die Website sofort einschließlich des Bildes zu durchsuchen.

<meta property="og:image" content="http://example.com/image.jpg"/ >

<!-- NOTE: This size should be the exact width of the image -->
<meta property="og:image:width" content="450"/>

<!-- NOTE: This size should be the exact height of the image -->
<meta property="og:image:height" content="298"/>

Die Tags "og: image: width" und "og: image: height" sollten die genauen Abmessungen des Bildes haben, damit Facebook das Bild korrekt abschabt.

Dieser Artikel führte mich zu der richtigen Antwort, als ich die HTML-Seiten über ein CMS-System generierte, in dem "og: image: height" und "og: image: width" im Head-Tag fest codiert waren.

https://medium.com/web-design-web-developer-magazine/facebook-share-dialog-box-nicht-image-the-irst-time-you-share-a-story-ed19d0f3ad36

0
Cavin Rauch

Sie können auch die Eigenschaften og:image:width und og:image:height überprüfen.
Das funktioniert bei mir.

Ich habe eine andere Möglichkeit gefunden, um den Facebook-Crawler zu zwingen, die Seite zu überprüfen, bevor Sie auf die Schaltfläche "Teilen" klicken: Fügen Sie einfach einen versteckten iFrame mit dem gemeinsam genutzten Facebook-Link hinzu.

Beispiel:

<iframe src="https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fwww.example.com" style="width: 0px; height: 0px; margin: 0px; padding: 0px;"></iframe>
0
Dan