Add Facebook Fan/Like Badge

  • Author
    Posts
  • #469396

    mrhodes01
    Member

    Hello. I’m struggling to get a “become a fan” badge to appear correctly and cleanly on my wp.com page, http://thesmatter.wordpress.com

    I know I want it to look like this blog’s: http://shimworld.wordpress.com/

    …but I can’t figure out how to make it look good via the text widget.

    Any ideas?

    Thanks!
    Matt

    The blog I need help with is thesmatter.wordpress.com.

    #469686

    ermadear
    Member

    mmm…???idea…??not yet..hehehe

    #469694

    t3ck
    Member

    The facebook badge you seen on the blog is an simple a image that links to their page you can complete the task by getting a screen capture of the image then use the Image widget to showcase the image and link the image to the page of your choice.

    Image widget documentation » Image¬†Widget

    Windows base Free screen capture software » Screenpresso/Jing

    Mac Based Free screen capture software/site » Skitch/Capture Me

    #469750

    mrhodes01
    Member

    Thanks, t3ck, that did the trick!

    There’s an odd red border around my FB link image and my Twitter badge….any thoughts?

    Probably just a kink in the template I’m using.

    I appreciate the help!
    Matt

    #469754

    t3ck
    Member

    @mrhodes01 you’re welcome ! Also did you get the red boarder figured out ? because I don’t see it when I visited your blog

    #469755

    shimworld
    Member

    @mrhodes01 @t3ck

    The FB ‘widget’ on my blog isn’t a simple image link. It’s a script I picked up from Facebook and with no real HTML skills or knowledge, I carefully replaced the links to suit my needs. You’ll have noticed that I’ve combined a Profile and Page Add in the same script and it worked out pretty cool.

    <div style="width:83%;"><div style="background:#3B5998;padding:5px;"><img src="http://www.facebook.com/images/fb_logo_small.png"><img src="http://badge.facebook.com/badge/37787581389.528416363.1479009001.png" alt="" width="0"></div><div style="background:#EDEFF4;display:block;border-right:1px solid #D8DFEA;border-bottom:1px solid #D8DFEA;border-left:1px solid #D8DFEA;margin:0;padding:0 0 5px;"><div style="background:#EDEFF4;display:block;padding:5px;"><table cellspacing="0" cellpadding="0" border="0"><tr><td valign="top"><img src="http://www.facebook.com/images/icons/fbpage.gif"></td><td valign="top"><p style="color:#808080;font-family:verdana;font-size:11px;margin:0;padding:0 8px;"><a href="http://www.facebook.com/janshim" title="Jan Shim" target="_TOP" style="color:#3B5998;font-family:verdana;font-size:11px;font-weight:normal;text-decoration:none;margin:0;padding:0;">Become</a> a fan of</p></td></tr></table></div><div style="background:#FFFFFF;clear:both;display:block;overflow:hidden;margin:0;padding:5px;"><table cellspacing="0" cellpadding="0" border="0"><tr><td valign="middle"><a href="http://www.facebook.com/pages/JAN-SHIM-PHOTOGRAPHY/37787581389" title="JAN SHIM PHOTOGRAPHY" target="_TOP" style="border:0;color:#3B5998;font-family:verdana;font-size:12px;font-weight:bold;text-decoration:none;margin:0;padding:0;"><img src="http://www.facebook.com/profile/pic.php?oid=AAAAAQAQ2lw4PtDtrHy0n6CDXN5wGwAAAAvoflGL1QJRJOFPIv8yrxnV&size=square" style="border:0;margin:0;padding:0;"></a></td><td valign="middle" style="padding:0 8px;"><a href="http://www.facebook.com/pages/JAN-SHIM-PHOTOGRAPHY/37787581389" title="JAN SHIM PHOTOGRAPHY" target="_TOP" style="border:0;color:#3B5998;font-family:verdana;font-size:12px;font-weight:bold;text-decoration:none;margin:0;padding:0;">JAN SHIM PHOTOGRAPHY</a></td></tr></table></div></div><div style="display:block;float:right;margin:0;padding:4px 0 0;">

    #469806

    @shimworld, Thank you SO much for posting this!! I have been trying to figure this out for ages. One question though: I copied your code and edited it with my own links…but now your image shows up on my blog’s widget: http://opinionessoftheworld.com/ How do I get the code/link to replace your Facebook profile pic with mine?

    Thanks in advance!

    #469812

    shimworld
    Member

    I’m not entirely sure which other parts of the code you require to change so that it pulls your picture instead of mine. But this is a good start isn’t it? Perhaps some of the seasoned coders here may want to share their thoughts once they have had some time to digest this.

    I visited your blog and noticed your “Twitter” button has a coloured border around it. I’m sure you didn’t intend for this and would look more blended-in if it’s removed.

    #469827

    @shimworld, I figured it out! When I was in my admin page for my Facebook page. I right-clicked on my profile pic and clicked on “view image.” Then it gave me the url for the small version of my pic. I swapped out that url with the url for your profile pic so now it’s all set and show’s my profile pic! Thanks again!!

    #469843

    shimworld
    Member

    You’re most welcome!

The topic ‘Add Facebook Fan/Like Badge’ is closed to new replies.