Need help? Check out our Support site, then


Add Facebook Fan/Like Badge

  1. 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.

  2. mmm...???idea...??not yet..hehehe

  3. 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

  4. 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

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

  6. @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;">

  7. opinionessoftheworld
    Member

    @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!

  8. 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.

  9. opinionessoftheworld
    Member

    @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!!

  10. You're most welcome!

Topic Closed

This topic has been closed to new replies.

About this Topic