How to set default image for Facebook sharing in WordPress blog posts ?

Posted By: KP On January 25, 2011 Under Blogging, Internet, Other, Wordpress Categories


A picture equals to many words. Facebook can be the biggest traffic source for your website, web 2.0 is social web. It may happen that your article is very catchy, get shared many times on Facebook but many of them don’t click the link. Attaching certain picture may increase click rate of Facebook news feed.

Increase of click rate means increased visitors, increased social sharing. To select certain image for a post you need to add some meta tags in header. Its obvious that we need different meta tags for each post. Static meta tags won’t do.

We will add a custom field and then fetch it in header file.

Add a custom field named “fbimage”. On post edit page under “Custom Fields” click enter new. Type “fbimage” and under value type image name you want to select for that post. ( Upload the image to wp-content/uploads)

( Note that you need to add new custom field only once, next time you just need to enter only value selecting field name from dropdown )

Update the post.

Now edit your theme from Appearance –> Editor. Select header.php.

Anywhere between <head> to </head> add below code.

<?php if(is_single()){ $value = get_post_meta($post->ID, ‘fbimage’, true); if($value!=”){?>
<meta property=”og:image” content=”http://www.example.com/wp-content/uploads/<?php $value = get_post_meta($post->ID, ‘fbimage’, true);echo $value; ?>”/>
<link rel=”image_src” href=”http://www.example.com/wp-content/uploads/<?php $value = get_post_meta($post->ID, ‘fbimage’, true); echo $value; ?>” / >
<?php
}}
?>

Update the file and you’re done.

From next time you write a post, add value to “fbimage” custom field and enjoy increased click rate.



Share with Friends ( Sharing is Caring! )


Subscribe For E-mail Notification Of Article Updates

Enter your email address:

NOTICE:
DO NOT FORGET TO CLICK ON THE VERIFICATION LINK AFTER SUBSCRIBING,THE VERIFICATION MAIL WILL BE SENT TO YOU FROM "FeedBurner Email Subscriptions".
( What is this? Why I need to do this?)

Related Posts

15 responses. Wanna say something?

  1. dana
    Apr 10, 2011 at 12:36:07
    #1

    Hello,

    Does this php in the Header also work for Pages? Or only for Posts?

    Best,

    Dana

    [Reply]

    KP Reply:

    it will work for posts. To make work for pages you need to install a plugin which allows custom fields on pages.

    [Reply]

  2. Nils Hay
    Apr 13, 2011 at 14:20:18
    #2

    Hi Kunal,

    Thanks for the tip. Unfortunately I’m not much good with code and struggling to get this to work.

    So, when I allocate a value to fbimage, should it be the full URL or just “RM-Logo150.gif”?

    Likewise, because it’s in /uploads/2011/04/ should my header code read:

    Sorry I’m a bit slow when it comes to this stuff, if you could spell it out for me I would be really grateful.

    Thanks,

    Nils Hay

    [Reply]

    KP Reply:

    It should be file name only. Update header file then check page source. It should have full image file path

    [Reply]

  3. d
    Apr 26, 2011 at 21:14:38
    #3

    Will this option always grab the default image and never the image of the post then?

    [Reply]

    KP Reply:

    yes it will get the default image while sharing.

    [Reply]

  4. E. Grz
    Jun 1, 2011 at 22:44:20
    #4

    I’m following these instructions exactly, but I can’t seem to get it to work. Is there any way to check that the code is working correctly? Or if it’s working at all?

    [Reply]

    E. Grz Reply:

    Alright, I figured out one problem. When you copy and paste from your website you must replace all of the qutotations (“,’)
    Now I get this error though…
    Parse error: syntax error, unexpected T_STRING in /home/mssb/public_html/wp-content/themes/twentyten/header.php on line 10

    [Reply]

    KP Reply:

    Still you have quote problem. Do type quotes, ensure all quotes and string are closed properly.

    [Reply]

    Knonie Reply:

    Changing the smart-quotes into normal quotes is also not working. Giving that T-STRING syntax error. Could you please verify the code, and update your blog with a working version so we could get benefit from it?

    KP Reply:

    I have updated the code. It should work. You should use small size files as fbimage for faster & assure fetch by facebook server.

  5. Moe
    Jul 13, 2011 at 19:35:47
    #5

    Is there a way to do this on wordpress.COM blogs?
    WP.com doesn’t have access to PHP files.

    Thanks.

    [Reply]

    KP Reply:

    Sorry, this requires access to theme files. You cannot edit themes in WP.com

    [Reply]

  6. James From HCG Diet Team
    Jan 12, 2012 at 04:28:51
    #6

    Thank you!

    I cant stand when I or others go to share a post on my site and it pulls in ever image but my logo.

    This helps a lot.

    [Reply]

  7. Valerie
    Jan 14, 2012 at 01:48:29
    #7

    Do you have a sample of a site with this script working?

    [Reply]

Post a Comment

OR