Today we’ll be looking at an issue a lot of bloggers encounter when they try to spread out their content on the web.
Sharing your content, promote it on facebook for example is great. But. It never shows up right, right?
Well we’ll get a closer look into that.
When using a common CMS (content management system, like wordpress, blogger, joomal etc.) to update your audience on personal or any subject, things are pretty easy: You get your title and text up there, add a few pics, maybe a video embed or two, publish it, and then comes time to share it on the social medias. And FaceBook is perfect to do that.
But whe it comes to copy your brand new post link inside the facebook “update status” input box, things don’t llok that good. Well this can be fixed, and this is how :
Well you guess FaceBook looks around in your own page or post code in order to find related pic, title and content. But Did you know there are tags or “meta-tags” you can add to customize those pic, excerpt or title ? They are called og tags for Open Graph tags, and are nested inside your header, along with other meta-tags like your blog description, name or author tags.
- Here they go:
- related picture. just add this following bit to your header file, header.php :
<meta property=”og:image” content=”[the URL of the pic you want to go along with your post]”/>
For instance, in wordpress this would do the trick for a single post :
<meta property=”og:image” content=”<?php echo wp_get_attachment_thumb_url( get_post_thumbnail_id( $post->ID ) ) ?>” />
- description. this one is for the small description that goes in facebook:
<meta property=”og:description” content=”[whatever you want to mention there]” />
How neat would it be to have your post excerpt showing up in the FaceBook preview
<meta property=”og:description” content=”<?php echo strip_tags(get_the_excerpt($post->ID)); ?>” />
the list goes on with who your are, fb:admins , the URL of the post would be og:url, og:title, og:site_name, og:type (blog, personal blog, etc). The tag name speak for themselves.
Another ennoying things maybe happened to you, is when the post’s thumbnail in FaceBook seems stuck. Changing the related or featured picture or even the og:image tag will not change it, once you got your post inside the “facebook matrix”, the thumbnail is in its “cache”, you can’t change it. Or can you ? Try copy/pasting your post URL inside this debugger text input, and Voilà ! The thumbnail can be switched.
http://developers.facebook.com/tools/debug
Now as a bonus and for my wordpress users, here come a perfectly designed wordpress header addon that will put all your content at the right place when posting it on FaceBook. Before you edit the files, you will need the facebook admin id, which can found in the Facebook insights page, when clicking the “insights for your domain” button on the top right. You can also specify your app id, if you are using the like button for example.
You will also need to know the path to the main logo appearing in the header of your site. If you do not have any, I encourage you to create one, and to add into the images folder of your WordPress theme.
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml" xmlns:og="http://opengraphprotocol.org/schema/" <?php language_attributes(); ?>>
<?php if (have_posts()):while(have_posts()):the_post();endwhile;endif;?>
<!-- Facebook Opengraph -->
<meta property="fb:app_id" content="your_app_id" />
<meta property="fb:admins" content="your_admin_id" />
<meta property="og:url" content="<?php the_permalink() ?>"/>
<?php if (is_single()) { ?>
<meta property="og:title" content="<?php single_post_title(''); ?>" />
<meta property="og:description" content="<?php echo strip_tags(get_the_excerpt($post->ID)); ?>" />
<meta property="og:type" content="article" />
<meta property="og:image" content="<?php echo wp_get_attachment_thumb_url( get_post_thumbnail_id( $post->ID ) ) ?>" />
<?php } else { ?>
<meta property="og:site_name" content="<?php bloginfo('name'); ?>" />
<meta property="og:description" content="<?php bloginfo('description'); ?>" />
<meta property="og:type" content="website" />
<meta property="og:image" content="<?php bloginfo('template_url') ?>/path/to-your/logo.jpg" />
<?php } ?>Anyone pressing the “Like” button on your website? The post or page will show just nice and easy on his or her FaceBook wall, driving more readers to your content!
Hope you enjoyed those tips and tricks around FaceBook and blogging, we’ll try to keep this up as a weekly post, tell us below if you found it usefull!