1

Some of my pages/posts have very short custom stylesheets at the beginning of them. I know this isn't great practice, but it's worked very well thus far. The problem, however, is linking on Facebook: Facebook auto-generates a preview of the page, and it includes a picture, the page title, and a snippet from the beginning of the post content. The post content snippet is only showing the stylesheet that I have directly inside the post--Facebook isn't ignoring the fact that it's HTML. What can I do on WordPress's end to really hide that code? Do I need to put all of those styles in my custom CSS then give everything the proper class? (To clarify, the <style> tag doesn't show, just the content of the stylesheet itself. It doesn't show on the page in WordPress, only in the Facebook snippet. This is a self-hosted blog.)

2 Answers 2

1

You can use Open Graph Protocol to define the data Facebook fetches from your site:

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

The metatag for the description has this form:

<meta property="og:description" content="my custom description for single post" />

You can use plugins, like

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

to do it for you.

You can then debug your page here:

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

to see how Facebook is fetching your page.

ps: If you like code examples, I extracted the following code snippet from the above plugin (WP Facebook Open Graph protocol) that handles the og:description part and injects it into the header via the wp_head hook:

// 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";
3
  • Awesome information, thank you! I've never really delved into the Facebook side of things; I didn't even realize Open Graph was a thing. Added that with the proper settings, but it now gives me the error The object at '<URL>' previously had type 'article' and cannot be changed to an object of type 'website' to avoid data corruption of existing actions., but I'm guessing that's just for data integrity and I'll have to live with it until all of these links are gone.... Thank you!
    – vaindil
    Feb 15, 2013 at 3:17
  • (Sorry for the double edit.) The plugin didn't actually fix the error--I found a page that didn't generate the above error, and the CSS is still displayed in the description on the debugger.
    – vaindil
    Feb 15, 2013 at 3:21
  • The data Facebook fetches is cached for up to 24 hours (I think), so using the Facebook developer clears the cache for that page you view. I use this plugin on several Wordpress installs. Can you maybe share the url, if you are still having this problem?
    – birgire
    Feb 15, 2013 at 9:07
1

Using Open Graph should solve this for you. When you use Open Graph, you are essentially telling the social networks what Title, Description, Image, etc to use.

I use WordPress SEO by Yoast, and it works wonders because you can also include the extra Open Graph tags needed for Twitter cards.

I hope that helps.

1
  • I ended up using this plugin, as the one recommended by birgire did not actually work. This is exactly what I needed, thank you!
    – vaindil
    Feb 15, 2013 at 3:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.