在WordPress中使用自定义标题、URL和图像的自定义Facebook共享按钮

时间:2014-08-27 作者:user3209031

在我的所有帖子页面中,有共享按钮(通过AddThis plugin).

当我在Facebook上单击共享时,它会显示URL和标题,但图像会显示其他内容。For example.

我试图在下面创建一个自定义共享按钮,但当我单击它时,什么也没有发生。

  <?php
    $title = the_title();
    $url= the_permalink();
    $summary=urlencode(\'Custom message that summarizes what your tab is about,  or just a simple message to tell people to check out your tab.\');
    $image= wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ),  \'single-post-thumbnail\' );
  ?>
    <a onClick="window.open(\'http://www.facebook.com/sharer.php?s=100&amp;p[title]=<?php echo $title;?>&amp;p[summary]=<?php echo $summary;?>&amp;p[url]=<?php echo $url; ?>&amp;&p[images][0]=<?php echo $image[0];?>\', \'sharer\', \'toolbar=0,status=0,width=548,height=325\');" target="_parent" href="javascript: void(0)">
        Custom Share on Facebook page!
    </a>
我还把Open Graph my中的标记header.php<head> 标签:

<?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), \'single-post-thumbnail\' ); ?>
<meta property="og:title" content="<?php the_title(); ?>" /> 
<meta property="og:description" content="" />  
<meta property="og:image" content="<?php echo $image[0]; ?>" /> 
<meta property="og:video" content="" /> 
<meta property="og:video:width" content="560" />  
<meta property="og:video:height" content="340" />  
<meta property="og:video:type" content="application/x-shockwave-flash" />
我网站上的所有帖子都应该可以通过其URL、标题、图片和描述在Facebook和Twitter上共享。Here\'s a working reference link.

2 个回复
最合适的回答,由SO网友:user3209031 整理而成

长期以来,我找到了上述问题的解决方案:

将上面的元标记替换为下面的元标记

<?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>

<?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), \'single-post-thumbnail\' );  ?>

<?php if($image[0] != "" ){ ?>

<meta property="og:image" content="<?php echo $image[0]; ?>"  >

<?php } else { ?>

<meta property="og:image" content="logo.png"  >

<?php } ?>


<meta property="og:image:width" content="3523" >

<meta property="og:image:height" content="2372" >

<meta property="og:url" content="<?php echo the_permalink(); ?>"  >

<meta property="og:title" content="<?php echo the_title(); ?>"  > 

<meta property="og:site_name" content="Thefansworld" />

<meta property="og:description" content="" >  

<meta property="fb:app_id" content="3668661019" >

<meta property="fb:admins" content="" >

 <?php endwhile; wp_reset_query(); ?>
但是仍然有一些帖子给了我错误的图片,经过一些研究,我发现:

当从URL中提取网页时,Facebook会缓存其内容,以备将来使用。这意味着,如果Facebook曾经从你的网站中提取数据,并且你的网站发生了变化(例如你的og:图像标签发生了变化),Facebook将不会改变图像,因为它已经将所有内容缓存在自己的一边。

尝试访问Facebook Debugger 页面并查看Facebook“看到”的内容。使用此工具可以强制Facebook刷新给定URL中的数据。这是调试它的最佳方式。

当您确保Facebook“看到”了正确的og:image标记时,请确保og:image中的图像具有适当的最小宽度/高度(这在fb调试器中都有解释)。

如果不符合FB的标准,Facebook将不会使用来自og:image的图像。无论何时FB上您的网站内容出现任何问题,我都强烈建议使用此工具。

希望这能帮助一些人。如果我错了,请告诉我:)

SO网友:Carlos Faria

使用u var共享您的url并让facebook使用Opengraph标签获取内容?

像这样的

<a onClick="window.open(\'http://www.facebook.com/sharer.php?u=<?php echo $url; ?>\', \'sharer\', \'toolbar=0,status=0,width=548,height=325\');" target="_parent" href="javascript: void(0)">Custom Share on Facebook page!</a>

结束

相关推荐

编写一个WordPress插件并尝试包含Facebook PHP SDK

我正在为Wordpress编写一个插件,它需要Facebook PHP SDK。从一年多前我发现的结果来看,我遇到了一个常见的问题。不幸的是,我一直无法找到解决方案。我使用的是Wordpress 3.8和从github获得的Facebook PHP SDK Master,所以这应该是最新版本。实际上,我已经在Wordpress之外运行了相同的代码,它成功地运行了,没有出现任何错误。所以,我上传我的插件并激活它。我转到我构建的面板,该面板要求提供appID和密钥,以及facebook帐户的用户名。插件所要做