How to Add an Image to your Facebook Like Badge

I opened Facebook last week and read a cry of help from comic book artist, Josh Latta, who is also making a name for himself for creating custom made avatars, or cartoon representations. I’ve yet to find out why he calls them avatards but you can ask him or find samples of his works here. Josh needed help with, among other things, his Facebook Page and Like Badge, and promised an avatard for your trouble.

I decided to help him. First off, I’ve always wanted a Josh Latta custom-made avatard for my band, He Sang She Sang. Second, Josh, whose FB status updates are funny one-liners aimed to skewer or shock, uncharacteristically sounded serious. The dude needed help and I wanted an avatard. I told him I’d help. His Facebook Badge problems were:

He wanted to have the status on his Facebook Page Badge removed. The badge status doesn’t update. Weeks before, he posted this:

ATTENTION HOT CHICKS: Send me a picture of you with my comics and I will put you on my website for free!

And more strangely, it’s not complete. Josh’s badge just said: “ATTENTION HOT CHICKS: Send me a picture of you…” which made him sound like a perv. Him possibly being one is not the point. Why include the page status if the thought isn’t complete? (Also, I was kidding about Josh possibly being a perv — hahaha!)  He didn’t know how to add his pic on the FB Like Badge. It has that default male/female silhouette. Example: The Powerpuff Girls’ Like badge:

The problem is, I don’t know anything about HTML codes.

So, unbeknownst to Josh, I did a little research and played around with the codes. It was a hit or miss process that involved a lot of hunting for words and copy-pasting. I used my own badge and posted them first on my dead blogs to see if they worked. Painstaking, yes, but a worthwhile endeavor because I succeeded!

First Problem: Removing the FB Page Badge status update didn’t require any HTML manipulations. Just in case you want to know, these are the steps:

  1. Go to Facebook Badges.
  2. Choose Page Badge.
  3. Click on “Edit this Badge”.
  4. Un-check ‘status’.
  5. Save.
  6. Then ‘Choose where to add the badge’ to get the HTML code.
  7. Do the dance of joy.

Second Problem: Replacing the default silhouette on the FB like badge with your own picture.

  1. After you’ve done “selecting a page” you like on FB Like Badge, copy the HTML Code.
  2. Now for tedious but exciting (for fastidious geeks like me) part!
  • Paste the code on notepad or word. (I chose notepad)
  • HTML codes can look daunting but treat this whole process like a game. HUNT for the name of the page you selected to like. In this example, I selected to like the band “He Sang She Sang”.  Now look for “He Sang She Sang”.

  • There! That’s just your marker. Beside it will be the img src or image source, which is your File URL. (As an HTML code layperson, I interpret this as the HTML ‘translation’ for the photo you want to use.) Take note: The image source URL will be enclosed between <a and /a>. It doesn’t really matter, for now, what’s written between <a and /a>. Just highlight all the text between those two.

  • Now that you’ve CAUGHT your image source, replace it with the File URL of the photo you want.  Copy and paste, and you’re done!

If you’re a blogger like me or Josh, then getting the File URL of your image or photo is easy. I’m using both blogspot and wordpress. Both blog sites offer an HTML tab on their posting page. If you click that tab, written there is the HTML code equivalent of your entire post. It can get confusing because it will be all text. If you’ve got several images uploaded to your post, then it can get a bit confusing.

So, what do you need to look for in your image’s HTML code? To make it easy on yourself, take note of the paragraph or last sentence you’ve written before your chosen image. Let’s say, on a blog post, I wrote:

He Sang She Sang, also known as HsSs, is a musical duo that thrives on musical exploration and live performance. They specifically write music for voice and their instruments: the piano, guitar, xylophone, and other percussion instruments.

Then added the image:

If I open the HTML tab, I can look for the last couple of words from my paragraph, “and other percussion instruments“.  After I find them, I will see this as another paragraph INSTEAD of my image.  This is the image file URL.

<a href=””><img title=”hsss small for blog2″ src=”; alt=”” width=”370″ height=”370″ /></a>

You will notice that it begins with <a and ends with /a>.

How to add your image URL to your Facebook Like Badge.

  • Copy everything, including <a and /a>.
  • Notice that near the end of the HTML code are width and height values.  In this example, the width and height values are both 370.
  • Change the values so it will fit in the Facebook Like Badge.  In my case, I used 60 for both.  If you like, experiment with the values and see how they look in preview.  You can always change it if you’re not happy. Also, make sure you don’t remove both quotation marks.
  • Paste your final image URL on the HTML code you highlighted earlier from your Facebook Like Badge.
  • Highlight the entire HTML code, copy, and paste on your blog widget.

The result:

Josh Latta was really happy with all the changes I made to his Facebook Page and Like Badges.  Although he only promised to custom-make an avatard of me, he asked me if I wanted him to draw both me AND Bronne as He Sang She Sang.  Of course, I said YES!

Here it is, the Josh Latta Custom-made Avatard of He Sang She Sang!

And look at that, he even remembered to add our lovable band mascot and dog manager,  Joyful!

!Thanks, Josh Latta!

… for the avatard and for unwittingly being the catalyst to my learning a little about HTMLs!


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s