WordPress.com is an easy way to start blogging. Get a blog, check out our features, read the latest announcements, choose from great themes, or learn about the team behind it.
Need help? Check out our Support site, then
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.
mmm...???idea...??not yet..hehehe
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
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
@mrhodes01 you're welcome ! Also did you get the red boarder figured out ? because I don't see it when I visited your blog
@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;">
@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!
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.
@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!!
You're most welcome!
This topic has been closed to new replies.
ermadear
t3ck
shimworld
