Wie kann ich das Facebook-like-Image steuern? [geschlossen]

Ich habe ein Blog mit einigen Beiträgen und jeder Beitrag hat einen eingebetteten Facebook- Like-Button . Durch Drücken der Schaltfläche wird ein Dialogfeld geöffnet, in dem meine Besucher den Beitrag auf Facebook mit einem Kommentar teilen können.

Bei der Freigabe ist das von Facebook ausgewählte Bild jedoch ein allgemeines Mail-Symbol und nicht das Miniaturbild des Beitrags.

Wie kann ich das beim Teilen verwendete Bild steuern?

Das für die Freigabe verwendete Bild stammt aus einem Codeabschnitt in der Kopfzeile Ihrer Website, der ungefähr so ​​aussieht:

<link rel="image_src" href="path/to/theme/screenshot.png" />

In der Regel wird ein Link zum Screenshot Ihrer Site im Thema angezeigt. Wenn Sie den Code aus dem Header der Datei entfernt und in single.php in die Schleife eingefügt und Ihr Post-Thumbnail-Bild in das href-Element gerufen hätten, würde es meiner Meinung nach funktionieren. Es würde also ungefähr so ​​aussehen:

<link rel="image_src" href="<?php the_post_thumbnail(); ?>" />

Dies würde bedeuten, dass Sie wahrscheinlich kein Bild haben, wenn Sie Schaltflächen auf Seiten haben, auf denen mehrere Beiträge aufgelistet sind. Wenn Sie einen bedingten Code einbinden, der ihn nur in single.php entfernt, haben Sie das normale Bild auf jeder Seite mit mehreren Posts und einer ähnlichen Schaltfläche und dem Post-Thumbnail, wenn die single.php-Vorlage verwendet wird. Der Header-Code wäre also:

<?php if ( is_single() ) { /* do nothing on single pages */ } else { ?>
<link rel="image_src" href="path/to/theme/screenshot.png" />
<?php } ?>

Dann würden Sie den Code weiterhin verwenden, um das Post-Thumbnail in single.php aufzunehmen.

Facebook verwendet jetzt das opengraph-Protokoll. Sie können Bilder hinzufügen mit:

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

Fügen Sie diese Zeile Ihrem Seitenkopf hinzu.

Alternativ können Sie mein Plugin verwenden, um dies automatisch zu tun.

Es erledigt nur diesen Job und es sind keine Einstellungen erforderlich.

http://shailan.com/wordpress/plugins/facebook-meta-tags-plugin/

Sie müssen das Facebook Open Graph-Protokoll verwenden. Ich bin nicht sicher, warum die akzeptierte Antwort nicht zu den vielen OG-bezogenen Antworten gehört (die ich gewählt habe), aber sie ist falsch.

http://developers.facebook.com/docs/opengraph/

Sie können viele Dinge anpassen, einschließlich Titel, Bild, Beschreibung, Kategorie, letzte Aktualisierung usw., wenn Sie Open Graph verwenden. Wenn Sie diese anderen halben Lösungen verwenden, fehlt Ihnen das ganze Bild.

Wenn ich das OG-Protokoll nicht für alle meine FB-Arbeiten befolgen würde, würde ich gefeuert.

Wenn Sie Folgendes tun:

<link rel="image_src" href="<?php the_post_thumbnail(); ?>" />

Sie werden feststellen, dass Wordpress das zur Anzeige des Bildes erforderliche HTML ausgibt, nicht nur den SRC, den Sie wirklich wollen.

Etwas machen wie:

<?php

// Featured Image for FB Like
$feature_image = get_the_post_thumbnail($post->ID);

// Get image source
$doc = new DOMDocument();
$doc->loadHTML($feature_image);
$imageTags = $doc->getElementsByTagName('img');

foreach($imageTags as $tag) {
        $image_url = $tag->getAttribute('src');
    }
?>
<link rel="image_src" href="<?php echo $image_url; ?>" />

Ruft nur die URL ab. Es ist wahrscheinlich der lange Weg und kann wahrscheinlich aber verkürzt werden, aber es behebt definitiv das Problem.

Ich hoffe, das bringt Sie auf den richtigen Weg.

Matt.

Stellen Sie sicher, dass Sie Ihre URL hier eingeben, wenn das angegebene Bild nicht richtig angezeigt wird:

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

Wenn Sie das erste Bild von Ihrem Amt als Thumbnail mit einem Rückfall auf so etwas wie Ihr Logo verwenden möchten, versucht meine Plugin - http://wordpress.org/extend/plugins/facebook-like-thumbnail/ Erklärung für das Hinzufügen der Das Fallback-Logo finden Sie unter http://blog.ashfame.com/?p=888

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

Diese Methode funktioniert für "Gefällt mir": s, aber später, wenn Sie einen Link in Ihrem Protokoll freigeben möchten (z. B.), wird dieses Bild automatisch ausgewählt.

Ohne dieses Meta-Tag können Sie aus allen Bildern der verlinkten Site auswählen.

Kennt jemand eine Möglichkeit, das statische "Gefällt mir" -Bild beizubehalten, aber dennoch ein Bild auszuwählen, wenn Sie eine URL freigeben?

OK, ich habe ein bisschen Javascript geschrieben, um das Bild "Meta og:" mit dem ausgewählten Bild zu füllen. Es ist ein einmaliger Hack, den Sie Ihrer Header-Datei hinzufügen.

In meinem WordPress-Beitrag füge ich die ID "featured-image" hinzu (ich weiß, mit späterem WordPress ist dies eingebaut, ich bin auf einem alten).

<xmp><img src="http://mysite.com/catphoto.jpg" id="featured-image" /></xmp>

Ich schreibe ein Meta-Tag für das og: image mit einem Platzhalter, z. B. mein Blog-Protokoll. Fügen Sie dem Tag "id =" meta-image "hinzu, dh

<meta property="og:image" src="http://mysite.com/logo.jpg" id="meta-image" />

Dann füge dieses Javascript in den Header ein:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"> </script>

<script type="text/javascript">
$(document).ready( function(){
    var featured_image = $("#featured-image").attr("src");
    $('meta[property="og:image"]').attr("content",featured_image);
});