Hiding styles from Facebook

时间:2013-02-15 作者:vaindil

我的一些页面/帖子在开头有很短的自定义样式表。我知道这不是很好的练习,但到目前为止效果很好。然而,问题是在Facebook上链接:Facebook自动生成页面预览,其中包括图片、页面标题和帖子内容开头的片段。帖子内容片段只显示了我在帖子中直接使用的样式表——Facebook并没有忽略它是HTML的事实。在WordPress结束时,我能做些什么来真正隐藏代码?我是否需要将所有这些样式都放在我的自定义CSS中,然后为所有内容提供适当的类?(为了澄清<style> 标记不显示,只显示样式表本身的内容。它不会显示在WordPress的页面上,只会显示在Facebook的代码片段中。这是一个自托管博客。)

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

您可以使用Open Graph协议定义Facebook从您的站点获取的数据:

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

描述的元标记具有以下形式:

<meta property="og:description" content="my custom description for single post" />
你可以使用插件,比如

http://wordpress.org/extend/plugins/wp-facebook-open-graph-protocol/

为你做这件事。

然后,您可以在此处调试页面:

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

查看Facebook如何获取您的页面。

ps: 如果您喜欢代码示例,我从上面的插件(WP Facebook Open Graph protocol)中提取了以下代码片段,该插件处理og:description 部分并通过wp_head 挂钩:

// do descriptions
if ( is_singular() ) {
    if ( has_excerpt( $post->ID ) ) {
        $wpfbogp_description = strip_tags( get_the_excerpt( $post->ID ) );
    } else {
        $wpfbogp_description = str_replace( "\\r\\n", \' \' , substr( strip_tags( strip_shortcodes( $post->post_content ) ), 0, 160 ) );
    }
} else {
    $wpfbogp_description = get_bloginfo( \'description\' );
}
echo \'<meta property="og:description" content="\' . esc_attr( apply_filters( \'wpfbogp_description\', $wpfbogp_description ) ) . \'"/>\' . "\\n";

SO网友:Eric Binnion

使用开放图应该可以解决这个问题。当你使用开放图时,你本质上是在告诉社交网络使用什么标题、描述、图像等。

我使用WordPress SEO by Yoast, 它的效果很好,因为您还可以包含Twitter卡所需的额外开放图形标记。

我希望这有帮助。

结束

相关推荐

Facebook没有为一些帖子显示相关的拇指

当我分享我的一些博客帖子时,Facebook不会显示他们的右拇指辫或任何与帖子相关的图片。。。它只给了3个不相关的拇指辫来选择。。。例如,FB显示带有此帖子的右拇指辫:http://www.moroccoenglish.com/?p=480虽然这篇文章没有:http://www.moroccoenglish.com/?p=578How can I set FB to display me the related thunmbails of the shared post ? 谢谢你帮助我。。。