我有一个博客,上面有一些帖子,每个帖子都有一个嵌入式的Facebook like button。按下按钮将打开一个对话框,以便我的访客可以在Facebook上分享评论并发表评论。
但是,共享时,Facebook选择的图像是普通邮件图标,而不是帖子缩略图。
如何控制共享时使用的图像?
我有一个博客,上面有一些帖子,每个帖子都有一个嵌入式的Facebook like button。按下按钮将打开一个对话框,以便我的访客可以在Facebook上分享评论并发表评论。
但是,共享时,Facebook选择的图像是普通邮件图标,而不是帖子缩略图。
如何控制共享时使用的图像?
Answers:
用于共享的图像取自网站标题中的一小段代码,看起来像这样:
<link rel="image_src" href="path/to/theme/screenshot.png" />
通常,它链接到主题中您网站的屏幕截图。如果您从文件标题中删除了代码,并在single.php上将其放入循环中,并将您的发布缩略图称为href元素,我相信它会起作用。因此,它看起来像:
<link rel="image_src" href="<?php the_post_thumbnail(); ?>" />
这意味着,如果您在列出多个帖子的页面上使用喜欢的按钮,则可能没有图像。如果您包含一些仅在single.php上将其删除的条件代码,则在使用single.php模板时,任何页面上的正常图像都会包含多个帖子以及一个点赞按钮和帖子缩略图。因此,标头代码为:
<?php if ( is_single() ) { /* do nothing on single pages */ } else { ?>
<link rel="image_src" href="path/to/theme/screenshot.png" />
<?php } ?>
然后,您仍然可以使用该代码将帖子缩略图包含在single.php中。
Facebook现在使用opengraph协议。您可以使用添加图像:
<meta property =“ og:image” content =“ http:// YOUR_IMAGE_URL” />
将此行添加到页面标题。
或者,您可以使用我的插件自动执行此操作。
它只是完成这项工作,不需要任何设置。
http://shailan.com/wordpress/plugins/facebook-meta-tags-plugin/
您需要使用Facebook开放图协议。我不确定为什么“已接受”答案不是许多OG:相关答案(我已投票赞成)之一,但这是错误的。
http://developers.facebook.com/docs/opengraph/
如果使用“打开图形”,则可以自定义许多内容,包括标题,图像,描述,类别,最新更新等。如果使用这些其他半解决方案,则会丢失整个图片。
如果我在所有FB工作中都没有遵循OG协议,那我会被解雇的。
如果您执行以下操作:
<link rel="image_src" href="<?php the_post_thumbnail(); ?>" />
您会发现Wordpress输出显示图像所需的html,而不仅仅是您真正想要的SRC。
做类似的事情:
<?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; ?>" />
仅获取URL。这可能是很长的路,并且可能但可以缩短,但是绝对可以解决问题。
希望这能使您走上正确的道路。
马特
如果指定的图片显示不正确,请确保在此处输入URL:
如果您想将帖子的第一张图片用作缩略图,并 保留徽标等内容,请尝试使用我的插件-http : //wordpress.org/extend/plugins/facebook-like-thumbnail/添加该说明的说明后备徽标图片位于http://blog.ashfame.com/?p=888
好的,我写了一些JavaScript来用我选择的特色图像填充Meta og:image。这是您添加到头文件中的一次性hack。
在我的wordpress帖子中,我添加了id“ featured-image”(我知道以后的wordpress是内置的,我使用的是旧版本)。
<xmp><img src="http://mysite.com/catphoto.jpg" id="featured-image" /></xmp>
我用占位符为og:image编写了一个元标记,例如我的博客日志。将“ id =” meta-image“添加到标签,即
<meta property="og:image" src="http://mysite.com/logo.jpg" id="meta-image" />
然后在标题中添加此javascript:
<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);
});
wp_enqueue_script()
在WordPress中加载Javascript。