Wie insbesondere ein Vorschau-Bild zu zeigen, während bei Facebook Umsetzung Aktie?

https://stackoverflow.com/questions/689295

22-08-2019
|

Frage

Ich versuche, teilen Sie diese Methode zu implementieren. Ich verwende den Code wie folgt

http://www.facebook.com/share.php?u=my_website_url

Nun, wenn Facebook zeigt es einige Thumbnails auf der linken Seite zeigt. Diese Bilder werden von meiner Website aufgenommen. Wie kann ich ein bestimmtes Bild als Miniatur holen oder zumindest stoppen sie Thumbnail zeigt?

Sie können es mit meiner Blog-Adresse .

Lösung

Dieser Blog-Eintrag scheint die Antwort zu haben: ~~http://blog.capstrat.com/articles/facebook-share -thumbnail-image /~~

Insbesondere verwenden ein Tag wie folgt aus:

<link rel="image_src" 
      type="image/jpeg" 
      href="http://www.domain.com/path/icon-facebook.gif" />

Der Name des Bildes muss das gleiche wie in dem Beispiel sein.

Klicken Sie auf "Sicherstellen, dass die Vorschau Works"

Hinweis: Tags kann richtig sein, aber Facebook kratzt nur alle 24 Stunden nach ihrer Dokumentation. Verwenden Sie die Facebook-Lint Seite das Bild in Facebook zu erhalten.

http://developers.facebook.com/tools/lint/

Andere Tipps

Von Facebook-spec, verwenden Sie einen Code wie folgt:

<meta property="og:image" content="http://siim.lepisk.com/wp-content/uploads/2011/01/siim-blog-fb.png" />

Quelle: Facebook

Meine Tags korrekt waren, aber Facebook kratzt nur alle 24 Stunden nach ihrer Dokumentation. Mit der Facebook-Lint Seite bekam das Bild in Facebook.

Hier URL eingeben und FB werden die Metadaten von Ihrer Seite aktualisieren:

https://developers.facebook.com/tools/debug (aktualisiert Link)

Facebook verwendet og:tags und der Open Graph Protocol zu entziffern, welche Informationen angezeigt werden, wenn die URL in einer Vorschau Aktie Dialog oder in einer News auf Facebook füttern.

Die og:tags Informationen enthalten, wie zum Beispiel:

Der Titel der Seite
Die Art der Seite
Die URL
Die Websites Name
Eine Beschreibung der Seite
Facebook User_id die Administratoren der Seite (auf facebook)

Hier ist ein Beispiel (aus der facebook Dokumentation ) einige og:tags

<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"/>

Wenn Sie den richtigen Markup des og:tags umgesetzt haben und setzen ihre Werte, können Sie testen, wie Facebook URL sehen die unter Verwendung Facebook Debugger . Das Debugger-Tool wird auch Probleme markieren Sie es mit dem og:tags auf der Seite oder das Fehlen von dort-of findet.
Eine Sache im Auge zu behalten ist, dass Facebook nicht hat einige Caching in Bezug auf diese Informationen, so, um für Änderungen, um Ihre Seite bewirken muß t sein geschabt wie angegeben in der Dokumentation:

Bearbeiten von Meta-Tags

Sie können die Attribute Ihrer Seite aktualisieren Sie Ihre Seite durch die Aktualisierung    Stichworte. Beachten Sie, dass og: title und og: type nur bearbeitet werden können   zunächst - nach Ihrer Seite erhält 50 mag der Titel fest wird,   und nach Ihrer Seite erhält 10.000 mag die Art fest wird.   Diese Eigenschaften sind fest überraschend Benutzer zu vermeiden, die gern   die Seite bereits. Ändern des Titels oder Typ-Tags nach dieser Grenzen   erreicht werden, tut nichts, um Ihre Seite den Originaltitel behält und   Art.

Für die Änderungen auf Facebook reflektiert werden, müssen Sie Ihre Seite zwingen   werden abgeschabt. Die Seite wird abgeschabt, wenn ein Admin für die Seite Klicks   die Schaltfläche oder, wenn die URL in das ~~eingegeben Facebook URL   Linter~~ Facebook Debugger ...

Ich sehe, dass alle gegebenen Antworten richtig sind. Es wurde jedoch ein wichtiges Detail übersehen: Die Größe des Bildes muss mindestens 200 x 200 Pixel sein, sonst Facebook wird die Miniaturansicht mit dem ersten verfügbaren Bild ersetzen, die die Kriterien auf der Seite entspricht. Eine weitere Tatsache ist, dass das erforderliche Minimum ist die 3 metas aufzunehmen, dass Facebook erfordert für die og: image zu übernehmen:

<meta property="og:title" content="Title of the page" />
<!-- NEXT LINE Even if page is dynamically generated and URL contains query parameters -->
<meta property="og:url" content="http://yoursite.com" />
<meta property="og:image" content="http://convertaholics.com/convertaholics-og.png" />

Debug Ihre Seite mit Facebook-Debugger und beheben Sie alle Warnungen und es sollte wie ein Zauber funktionieren! https://developers.facebook.com/tools/debug

Ich habe die gleichen Probleme und ich glaube, es gelöst haben. Ich habe den Link Meta-Tag, wie hier erwähnt, um das Bild zu zeigen Ich wollte, aber der Schlüssel ist, dass, wenn Sie das tun, FB wird keine anderen Bilder als Auswahl ziehen. Auch wenn Ihr Bild zu groß ist, werden Sie keine Möglichkeiten haben überhaupt.

Hier ist, wie ich meine Seite fixiert http://gnorml.com/blog/facebook- Link-thumbnails /

Hier ist, wie das funktioniert alles:

Sie müssen die Fähigkeit, den HTML-Code auf der bestimmten Webseite zugreifen, die Sie gemeinsam nutzen. Es wird wohl Website arbeitet breit auch, wenn Sie eine gemeinsame Headerdatei verwenden. Ich habe nicht versucht, aber es sollte funktionieren. Sie müssen nur das gleiche Bild für alle Seiten, wenn man dies aber tun.
Sie müssen diese HTML-Meta-Tags in Seite in der hinzuzufügen. Es wird nicht funktionieren, wenn Sie es in der setzen. Stellen Sie sicher, pro Ihrem a) Bild anzupassen, b) Beschreibung, c) URL, und d) Titel.

ein echtes Beispiel.

<meta property="og:image" content="http://www.coachesneedsocial.com/wp-content/uploads/2014/12/BannerWCircleImages-1.jpg" />

<meta property="og:description" content="Coaches share their secrets to success so you can rock 2015." />

<meta property="og:url"content="http://www.coachesneedsocial.com/coacheswisdomtelesummit/" />

<meta property="og:title" content="Coaches Wisdom Telesummit" />

Speichern
Öffnen Sie eine neue Facebook posten, und wiederholen Sie die Seite, die Sie teilen wollte.
Wenn Sie Probleme haben ... Sie es mit diesem Facebook-Tool debuggen können. Es sieht mehr geeky als es ist. Es sagt Ihnen, was Facebook zu sehen ist, wenn Sie in der URL-Adresse zu teilen.

https://developers.facebook.com/tools/debug/og/ Objekt /

Big Tip .. stellen Sie sicher, die „Anführungszeichen“ sind gleich in Ihrem HTML (sie wie zwei geraden Markierungen und keine Kurven aussehen sollte ... manchmal Programme ändern diese verschiedenen Schriftarten und es goofs den Code auf.

Gemeinsame Nutzung auf Facebook: Wie Sie Ihre Ergebnisse zu verbessern, indem das Bild Customizing, Titel und Text

oben über den Link. Für die bestmögliche Aktie, werden Sie 3 Stücke von Daten in Ihrem HTML vorschlagen mögen:

Titel
Kurzbeschreibung
Bild

Dies wird durch die folgende erreicht, in dem 'Kopf'-Tag Ihrer HTML platziert:

Titel: <title>INSERT POST TITLE</title>
Bild: <meta property=og:image content="http://site.com/YOUR_IMAGE.jpg"/>
Beschreibung: <meta name=description content="INSERT YOUR SUMMARY TEXT"/>

Wenn Sie statische HTML-Webseite ist, werden Sie dies für jede Seite zu tun haben, Ihr HTML-Editor.

Wenn Sie ein CMS wie Drupal verwenden, können Sie eine Menge davon (siehe Link oben) automatisieren. Wenn Sie Wordpress verwenden, können Sie wahrscheinlich etwas ähnliches mit dem Drupal Beispiel als Richtlinie umzusetzen. Ich hoffe, Sie finden diese nützlich.

Schließlich können Sie immer manuell Ihren Anteil Beiträge bearbeiten. Siehe diesem Beispiel mit Illustrationen .

Ich hatte auch ein Problem auf einem Website Ich war auf der letzten Woche arbeiten. Ich implementiert eine ähnliche Box und getestet wie Box. Dann ging ich weiter ein Bild zu meinem Header hinzuzufügen (das ob: Bild meta). Immer noch das richtige Bild nicht zeigen, auf meiner Facebook-Benachrichtigung auf.

Ich habe alles versucht, und kam zu dem Schluss, dass jede einzelne Implementierung einer Schaltfläche zwischengespeichert wird. Also lassen Sie uns sagen, dass Sie die Uhr wie Button auf url A, dann sind Sie ein Bild in der Kopfzeile angeben und es testen, indem Sie die Luke Taste wieder auf url A. klicken Sie das Bild nicht sehen, wie die Seite zwischengespeichert wird. Das Bild angezeigt wird, wenn Sie auf die Schaltfläche auf Seite B klicken.

Um den Cache zurücksetzen, haben Sie die Flusen Debugger-Tool zu verwenden, die oben erwähnt wird, und bestätigen Sie alle Urls für diejenigen, die im Cache gespeichert werden ... Das ist das einzige, was für mich gearbeitet.

Der einfachste Weg, ich fand Facebook Open Graph jedem Joomla Artikel setzen, war in com_content / article / default.php Überschreibung zu platzieren, nächste Code:

$app    = JFactory::getApplication();
$path   = JURI::root();

$document = JFactory::getDocument();
$document->addCustomTag('<meta property="og:title" content="YOUR SITE TITLE" />');
$document->addCustomTag('<meta property="og:name" content="YOUR SITE NAME" />');
$document->addCustomTag('<meta property="og:description" content="YOUR SITE DESCRIPTION" />');
$document->addCustomTag('<meta property="og:site_name" content="YOUR SITE NAME" />');
if (isset($images->image_fulltext) and !empty($images->image_fulltext)) : 
    $document->addCustomTag('<meta property="og:image" content="'.$path.'<?php echo htmlspecialchars($images->image_fulltext); ?>" />');
else :
    $document->addCustomTag('<meta property="og:image" content="'.$path.'images/logo.png" />');
 endif;

Dies wird platzieren Meta og Tags im Kopf mit Details aus aktuellen Artikeln.

Lizenziert unter: CC-BY-SA mit Zuschreibung

Nicht verbunden mit StackOverflow