如何控制类似Facebook的图片?[关闭]


13

我有一个博客,上面有一些帖子,每个帖子都有一个嵌入式的Facebook like button。按下按钮将打开一个对话框,以便我的访客可以在Facebook上分享评论并发表评论。

但是,共享时,Facebook选择的图像是普通邮件图标,而不是帖子缩略图。

如何控制共享时使用的图像?


该站点最近遭到黑客攻击,显然是……
MirroredFate

1
几乎没有Wordpress问题……
Kaaviar'3

Answers:


7

用于共享的图像取自网站标题中的一小段代码,看起来像这样:

<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中。


3
这被标记为可能已过时,请考虑刷新您的答案(也许类似“那时回过头来,现在效果更好”)。
拉斯特


5

您需要使用Facebook开放图协议。我不确定为什么“已接受”答案不是许多OG:相关答案(我已投票赞成)之一,但这是错误的。

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

如果使用“打开图形”,则可以自定义许多内容,包括标题,图像,描述,类别,最新更新等。如果使用这些其他半解决方案,则会丢失整个图片。

如果我在所有FB工作中都没有遵循OG协议,那我会被解雇的。


1

如果您执行以下操作:

<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。这可能是很长的路,并且可能但可以缩短,但是绝对可以解决问题。

希望这能使您走上正确的道路。

马特



0

如果您想将帖子的第一张图片用作缩略图,并 保留徽标等内容,请尝试使用我的插件-http : //wordpress.org/extend/plugins/facebook-like-thumbnail/添加该说明的说明后备徽标图片位于http://blog.ashfame.com/?p=888


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

此方法适用于“赞”:s,但是稍后,如果您想在您的日志中共享链接(例如,此图片是自动选择的)。

没有此元标记,您可以从链接站点上的所有图像中进行选择。

有谁知道保留静态“赞”图像的任何方法,但仍然让您在共享URL时选择图像?


0

好的,我写了一些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。
fuxia

这真的有效吗?我已经尝试过类似的尝试而没有成功-Facebook调试器无法识别我的图像。我认为它不是在解析JavaScript。
benedict_w 2013年
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.