Wie kann ich das Facebook-ähnliche Bild steuern?

Das Bild,dasfür die Freigabe verwendet wird,stammt auseinem Codeabschnittim Header Ihrer Site,der ungefähr so ​​aussieht:

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

Normalerweise wirdein Link zum Screenshot Ihrer Siteim Themaerstellt. Wenn Sie den Code aus dem Header der Dateientfernt und auf single.phpin die Schleifeeingefügt und Ihr Post-Miniaturbildin das href-Element aufgerufen haben,würdeesmeiner Meinungnachfunktionieren. Es würde also ungefähr so ​​aussehen:

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

Dies würdebedeuten,dass Sie wahrscheinlich kein Bild haben,wenn Sie auf Seiten,auf denenmehrere Beiträge aufgelistet sind,ähnliche Schaltflächen haben. Wenn Sieeinen bedingten Codeeinfügen,derihnnur auf single.phpentfernt,haben Sie dasnormale Bild aufjeder Seitemit mehreren Posts undeiner Schaltfläche "Gefälltmir" sowie die Miniaturansicht des Posts,wenn die Vorlage "single.php" 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-Thumbnailin single.php aufzunehmen.

The image that is used for sharing is taken from a chunk of code in the header of your site that will look something like this:

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

Typically it links to the screenshot of your site in the theme. If you removed the code from the header of the file and on single.php put it inside the loop and called your post thumbnail image into the href element I believe it would work. So it would look something like:

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

This would mean that if you have like buttons on pages that list multiple posts you probably won't have an image. If you included some conditional code that removed it only on single.php then you would have the normal image on any page with multiple posts and an like button and the post thumbnail when the single.php template is being used. So the header code would be:

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

Then you'd still use the code to include the post thumbnail in single.php.

Facebook verwendetjetzt das Opengraph-Protokoll.Sie können Bilder hinzufügenmit:

 & lt;metaproperty="og:image" content="http://YOUR_IMAGE_URL"/> 

Fügen Sie diese Zeile Ihrem Seitenkopf hinzu.

Alternativ können Siemein Plugin verwenden,um dies automatisch zutun.

Eserledigtnur diesen Job undes sind keine Einstellungenerforderlich.

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

Facebook now uses opengraph protocol. You can add images using :

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

Add this line to your page header.

Alternatively you can use my plugin to do this automatically.

It just does this job and no settings are needed.

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

Siemüssen das Facebook Open Graph-Protokoll verwenden.Ichbin nicht sicher,warum die akzeptierte Antwortnichteine der vielen OG: verwandten Antwortenist (dieich abgestimmt habe),aber sieistfalsch.

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 Halblösungen verwenden,fehlt Ihnen dasgesamte Bild.

Wennichbei allmeiner FB-Arbeitnicht dem OG-Protokollfolgen würde,würdeichgefeuert werden.

You need to use the Facebook Open Graph Protocol. I'm not sure why the Accepted answer isn't one of the many OG: related answers (which I've voted up) but it is wrong.

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

You can customize many things including title, image, description, category, last update etc... if you use Open Graph. If you use these other half-solutions you are missing the whole picture.

If I didn't follow OG Protocol for all the FB work I do, I'd get fired.

Wenn Sie Folgendestun:

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

Sie werdenfeststellen,dass Wordpress dasfür die Anzeige des Bildeserforderliche HTML ausgibt,nichtnur das SRC,das Sie wirklich wollen.

Soetwastun 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; ?>" />
 

erhalten Sienur die URL.Esist wahrscheinlich der lange Weg und kann wahrscheinlichnur verkürzt werden,aberesbehebt definitiv das Problem.

Ich hoffe,dasbringt Sie auf den richtigen Weg.

Matt.

If you do the following:

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

You'll find that Wordpress outputs the the html required to display the image, not just the SRC which is what you really want.

Doing something like:

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

gets you the URL only. It's probably the long way and can probably but shortened, but it definitely fixes the problem.

Hope this puts you on the right track.

Matt.

Stellen Sie sicher,dass Sie Ihre URL hierfusseln,wenn das angegebene Bildnicht richtig angezeigt wird:

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

Make sure you lint your URL here if the specified image is not appearing properly:

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

Wenn Sie daserste Bild Ihres Beitrags als Miniaturbildmit einem Fallback aufetwas wie Ihr Logo verwendenmöchten,versuchen Siemein Plugin - http://wordpress.org/extend/plugins/facebook-like-thumbnail/ Erläuterungen zum Hinzufügen des Fallback-Logo-Bildsfinden Sie unter http://blog.ashfame.com/?p=888

If you would like to use the first image of your post as the thumbnail with a fallback to something like your logo, try my plugin - http://wordpress.org/extend/plugins/facebook-like-thumbnail/ Explanation for adding the fallback logo image is at http://blog.ashfame.com/?p=888

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

Diese Methodefunktioniertfür "Gefälltmir": s. Wenn Siejedoch spätereinen Linkin Ihrem Protokollfreigebenmöchten (z. B.),wird dieses Bild automatisch ausgewählt.

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

Kenntjemandeine Möglichkeit,das statische "Gefälltmir" -Bildbeizubehalten,aber Siemüssen dennochein Bild auswählen,wenn Sieeine URLfreigeben?

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

This method works for "like":s but later on if you want to share a link in ur log(For example.) this picture is autoselected.

Without this meta tag you are able to select from all the images on the linked site.

Anyone know any way to keep the static "like" image but still make you choose an image when sharing a url?

OK,ich habeein wenig Javascriptgeschrieben,um das Meta og:imagemit dem Bildmeiner Wahl zufüllen. Esistein einmaliger Hack,den Sie Ihrer Header-Datei hinzufügen.

Inmeinem WordPress-Beitragfügeich die ID "Featured-Image" hinzu (ich weiß,dass diesbei späterem WordPressintegriertist,ichbin aufeinem alten).

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

Ich schreibeein Meta-Tagfür das og:imagemit einem Platzhalter,z. B.meinem Blog-Protokoll. Fügen Sie dem Tag "id="meta-image "hinzu,d. H.

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

Fügen Sie dann dieses Javascriptin die Kopfzeileein:

 <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);
});
 

OK I wrote a little bit of javascript to populate the Meta og:image with the featured image of my choice. It's a one-time hack you add to your header file.

In my wordpress post, I add the id "featured-image" (I know with later wordpress this is built-in, I'm on an old one).

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

I write a meta tag for the og:image with a placeholder, such as my blog log. Add "id="meta-image" to the tag, i.e.

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

Then add this javascript in the header:

<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);
});