Wie funktioniert Facebook Sharer Bilder und andere Metadaten auswählen, wenn meine URL zu teilen?
https://stackoverflow.com/questions/1138460
-
16-09-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianFrage
Bei Facebook Sharer verwendet, wird Facebook die Benutzer bietet die Möglichkeit, mit 1 von wenigen Bildern von der Quelle als Vorschau für ihre Verbindung gezogen. Wie werden diese Bilder ausgewählt, und wie kann ich sicherstellen, dass ein bestimmtes Bild auf meiner Seite ist immer in dieser Liste enthalten?
Lösung
Wie kann ich feststellen, Facebook das Bild zu verwenden, wenn meine Seite geteilt wird?
Facebook hat eine Reihe von Open-Graph-Meta-Tags , dass es bei zu entscheiden, sieht die Bild zu zeigen.
Die Tasten ein 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 in der <head></head>-Tag am oberen Rand der Seite vorhanden sein.
Wenn diese Tags nicht vorhanden sind, wird es für ihre ältere Methode suchen um ein Bild zu spezifizieren: <link rel="image_src" href="/myimage.jpg"/>. Wenn weder vorhanden sind, um den Inhalt Ihrer Facebook-Seite werden die Bilder von Ihrer Seite zu sehen und wählen, die ihren Anteil Bild Kriterien erfüllen: Bild mindestens 200px von 200px sein müssen, haben eine maximale Seitenverhältnis von 3: 1, und in PNG, JPEG oder GIF-Format.
Kann ich mehrere Bilder angeben, damit der Benutzer ein Bild wählen?
Ja, Sie müssen nur mehr Bilder Meta-Tags in der Reihenfolge, die Sie in angezeigt werden sollen hinzufügen Der Benutzer wird dann mit einem Bildauswahldialog präsentiert werden.
I spezifiziert die entsprechenden Bild-Meta-Tags. Warum ist Facebook die Änderungen nicht akzeptieren?
Sobald eine URL freigegeben wurde, Facebook-Crawler, die einen User-Agent von facebookexternalhit/1.1 (+https://www.facebook.com/externalhit_uatext.php) hat, wird Ihre Seite zugreifen und die Meta-Informationen zwischenzuspeichern. Um zu erzwingen, Facebook-Server den Cache zu löschen, verwenden Sie die Facebook URL Debugger / Linter-Tool , dass sie ein < href = „https://developers.facebook.com/blog/post/390/“ rel = „noreferrer“> im Juni 2010 ins Leben gerufen den Cache und beheben alle Meta-Tag Probleme auf Ihrer Seite zu aktualisieren.
Außerdem müssen die Bilder auf der Seite auf den Facebook-Crawler öffentlich zugänglich sein. Sie sollten absolute URLs angeben wie http://example.com/yourimage.jpg statt nur / yourimage. jpg.
Kann ich diese Meta-Tags mit Client-Seite Code wie Javascript oder jQuery aktualisieren? Nein. Ähnlich wie Suchmaschinen-Crawler, die Facebook-Schaber nicht Skripte auszuführen, so was Meta-Tags vorhanden sind, wenn die Seite geladen wird, die Meta-Tags sind, die für die Bildauswahl verwendet werden.
Diese Tags Hinzufügen verursacht meine Seite nicht mehr zu bestätigen. Wie kann ich dieses Problem beheben?
Sie können die notwendigen Facebook Namespaces Ihren Tag hinzufügen und Ihre Seite sollte dann die Validierung übergeben:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:og="http://ogp.me/ns#"
xmlns:fb="https://www.facebook.com/2008/fbml">
Andere Tipps
Wenn Sie sich für Facebook, Sie haben in Ihrem HTML-Code in den Kopfabschnitt nächsten Meta-Tags hinzuzufü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 Taste, wie Sie sollten nach dem, was FB sagt.
die Informationen, die Sie brauchen, ist in www.facebook.com/share/
Ab 2013, wenn Sie verwenden facebook.com/sharer.php (PHP) Sie können einfach machen eine beliebige Taste / link wie:
<a class="btn" target="_blank" href="http://www.facebook.com/sharer.php?s=100&p[title]=<?php echo urlencode(YOUR_TITLE);?>&p[summary]=<?php echo urlencode(YOUR_PAGE_DESCRIPTION) ?>&p[url]=<?php echo urlencode(YOUR_PAGE_URL); ?>&p[images][0]=<?php echo urlencode(YOUR_LINK_THUMBNAIL); ?>">share on facebook</a>
Link Abfrageparameter:
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 schlicht einfach: Sie keine js oder andere Einstellungen benötigen. Ist nur ein HTML-Rohverbindungszustandsliste. Stylen Sie die A-Tag in irgendeiner Weise Sie wollen.
Setzen Sie den folgenden Tag in den head:
<link rel="image_src" href="/path/to/your/image"/>
http://www.facebook.com/share_partners.php
Soweit, was es wählt als Standard in Abwesenheit dieser Tag, ich bin nicht sicher.
Aus meiner Erfahrung, die http://www.facebook.com/sharer.php verwendet keine Meta-Tags. Es verwendet die Zeichenfolge, die Sie passieren. Siehe unten.
http://www.facebook.com/sharer.php ? s = 100 & p [title] = THIS IST MEIN TITEL & p [Zusammenfassung] = Dies ist meine Zusammenfassung & p [url] = http: //www.MYURL.com&&p [Bilder] [0] = http: //www.MYURL.com/img/IMAGEADDRESS
Die Meta-Tags arbeiten mit Facebook-Entwickler wie / senden Tasten, wie die andere Open Graph Info tut. Also, wenn Sie eine von Facebook tatsächlichen Elemente wie die Kommentare verwenden und so, das wird alle Krawatte in den Open Graph Zeug.
UPDATE: Es gibt zwei Möglichkeiten, um die Sharer zu verwenden * beachten Sie die s gegenüber dem u-Wert in der Abfrage-String
?
1 ==> STRING: http://www.facebook.com/ sharer.php? s + Inhalt von oben
~~> Werden Informationen aus dem String ziehen.
2 ==> URL: http: //www.facebook. com / sharer.php? u = url wo uRL eine tatsächliche uRL
gleich
~~> Wird die Seite kratzen in der URL-Wert
bereitgestellt
~~> Sie können die Werte testen testen hier: https://developers.facebook.com/tools/debug
Alte Art und Weise, nicht mehr funktioniert:
<link rel="image_src" href="http://yoururl/yourimage"/>
neue Art und Weise Berichtet, auch nicht funktioniert:
<meta property="og:image" content="http://yoururl/yourimage"/>
Es funktionierte zufällig aus und während des ersten Tages, als ich realisierte es, seit überhaupt nicht funktioniert.
Die Facebook-Linter Seite, ein Dienstprogramm, das Ihre Seite inspiziert, berichtet, dass alles in Ordnung ist und die Vorschau anzeigt wähle ich ... nur, dass die share.php Seite selbst nicht zu sein scheint funktioniert. Hat einen Bug über auf Facebook zu sein, ein sie offenbar als jeden Fehlerbericht zu diesem Problem zu beheben ist es egal, ich in ihrem System gesehen habe alle sagen, gelöst oder festgelegt.
So ändern Titel, Beschreibung und Bild müssen wir einige Meta-Tags unter Kopf Tag hinzuzufügen.
Schritt 1:
Fügen Sie Meta-Tags unter head-Tag
<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ÄCHSTE SCHRITT:
Klicken Sie auf untenstehenden Link
https://developers.facebook.com/tools/debug
Fügen Sie Ihre URL in Textfeld (zB http://www.test.com/ ), wo Sie die Tags erwähnt. Klicken Sie auf DEBUG-Taste.
Seine getan.
können Sie überprüfen, hier https: / /www.facebook.com/sharer/sharer.php?u=http://www.test.com/
In über url, u = Ihre Website-Link
ENJOY !!!!
Für eine sichere HTTPS
<meta property="og:image:secure_url" content="https://image.path.png" />
Ich hatte dieses Problem und fixiert es mit manuel-84 Vorschlag. Mit einem 400x400px Bild groß gearbeitet, während mein kleineres Bild zeigte nie in den Sharer auf.
Beachten Sie, dass Facebook ein Minimum 200px quadratisches Bild als das og empfiehlt: image-Tag: https://developers.facebook.com/docs/opengraph/howtos/maximizing-distribution-media-content/#tags
Das ist was für mich gearbeitet: Ich legte die gewünschte Miniaturansicht auf der Seite direkt nach dem Tag und machen sie zu klein, um zu sehen ..
<img src="imagename.jpg" width="1" height="1" />
ich es mit der Höhe nicht getestet 0 und Breite 0, aber es wird wahrscheinlich noch arbeiten .. Dies garantiert nicht, wird der Benutzer dieses Bild auswählen ..
AUCH scheint es, wie Facebook die Thumbnails auf Ihrer Seite und tut immer überprüfen Sie es für neue Caches .. versuchen, diese auf Ihrer Website auf eine andere Seite hinzufügen und Sie werden sehen, dass es funktioniert.
Mit facebook feed Dialog statt Anteil Dialog benutzerdefinierte Bilder zeigen
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
Ich kann nicht bekommen Facebook das richtige Bild von einem bestimmten Post zu holen, so tat ich, was auf dieser Seite skizziert ist:
Mit anderen Worten, so etwas wie folgt aus:
<b:if cond='data:blog.url == "http://urlofyourpost.com"'>
<meta content='http://urlofyourimage.png' property='og:image'/>
</b:if>
Im Grunde sind Sie gehen zu hart Code eines if-Anweisung in HTML Ihre Website, um es den Meta-Inhalt zu ändern, um alles, was Sie für diesen einen Beitrag geändert haben. Es ist eine schmutzige Lösung, aber es funktioniert.
