FBC Member Blog Badge (and how to install it!)

FBC Member: Show your true colours

You’ve been asking, and we’ve been promising!   So here we have it, the FBC Member badge for your website.

The badges aren’t mandatory – blog’s are very personal and everyone is different.  But many of you have asked if you can show your “colours” so to speak, and we’re happy to oblige!

Installing Your Badge

Installing the badge is quite simple and some of you won’t need a tutorial at all.  If that’s you, then carry on! And if you’re using WordPress, just scroll down to get the code you need.  For the rest of you, here are instructions for both WordPress and Blogger.  All you need to do to get started is right click on the badge to your left and save it to your computer.  The badge won’t have the grey border around it – that’s just how our site formats images.


For WordPress

If your blog is in WordPress you will probably want to install it in your sidebar, using a text widget.  The first step is to upload the image to your Media library.  In your Dashboard, click on the Media button in the left hand menu.  When the Media Library page comes up, click the Add New button:

Upload the image just like you normally would and when the screen comes up asking you to fill in the title, alternate text, etc, copy and paste the File URL into a text editor like Notepad (PC) or TextEdit (Mac) – you’ll be needing that shortly.

Next you’ll add a widget to your sidebar.  In your Dashboard, select the Widget menu item (located under Appearance) in your left hand menu.

Different WordPress themes may have different widget options for you but to keep it simple, the best choice is to use a standard text widget that’s always available.

WordPress has a nice drag and drop functionality for widgets so just click on the Text Widget choice and drag it over to the right, to your sidebar list.  This will allow you to put in whatever type of text or HTML  you like, which is exactly what we want.

Now, open up the Text Widget you just added to your sidebar by clicking on the small down arrow in the right corner.

You don’t need to add a title.  Instead, you are going to want to paste in that File URL that you saved earlier.  But you’re also going to need to add some code around it so that it shows as an image and not a line of code and links back to the Food Bloggers of Canada site for all those curious people who stop by your blog.   Here’s what you’ll need:

<a href=””><img title=”FBC Member” src=””></a>

Make sure you swap out yourblogname with your actual blog name.

Recommended Reading:  Go Your Own Way: Find Your Food Blogging Niche

And there you go!  Now, you might notice that this doesn’t neatly centre your badge in the sidebar.  If you want to fix that, you need to add a little bit of CSS.  But, that’s not hard.  I’ll show you how:

<div style=”padding-left: 75px;”><a href=””><img title=”FBC Member” src=””></a></div>

By adding the style div we can “pad” the image so it’s forced to move over to the right.  The 75px amount may need to change depending on the width of your sidebar.  My sidebar is 300px wide.  The badge is 150px wide.  300-150=150 so that means I have 150px of space still available to the right of the badge.  To centre it, I need to divide that in half again, giving me 75px.  So I added an extra 75px of padding to the left of the image and there you have it!  You can go check out my blog to see it in action if need be.  Make sure you add the ending div tag at the end of your code!!  You can use this little trick for centering other badges you might have in your sidebar as well.

For Blogger

Now, I’m a WordPress girl so I’m not as familiar with fine tuning Blogger.  But the easiest way to add the badge is to go into your Design tab in the Blogger Dashboard and select Page Elements and then Add a Gadget

When the Add a Gadget window opens, select the Picture option and follow the instructions for uploading an image.  In the link window, add the link.  Make sure you also add a title!

You won’t have the fine control to place the image exactly how you would like, as you do in WordPress, but you do have a much quicker way to upload it!

And there you have it! A new badge and a little tutorial on how to add a little bit of CSS to fine tune your sidebar.  A two for one!

FBC Member Blog Badge (and how to install it!) was written by Melissa Hartfiel, FBC co-founder and author of the food photography blog Eyes Bigger Than My Stomach where she sometimes put her tutorial writing skills to work by writing Adobe Lightroom tutorials.  She is a web and graphic designer, WordPress addict,  photographer and the resident FBC geek.  Melissa lives just outside of Vancouver, BC.  Twitter: @mhchipmunk

Hello Summer!

, , , , , , , ,

70 Responses to FBC Member Blog Badge (and how to install it!)

  1. Christina Austin November 9, 2011 at 2:15 pm #

    Ok – I’m an idiot. It isn’t working for me.

  2. Calantha @ piecurious November 9, 2011 at 4:00 pm #

    I really need to find a WordPress theme I like that allows me to have a sidebar…

  3. mary November 9, 2011 at 10:33 pm #

    Hey Mel
    I’ve tried and tried and I can’t get the widget to work! I get a question mark, and when you clink on it, It leads to a dead link

  4. Melissa November 10, 2011 at 12:02 pm #

    Hi all,
    We’ve figured out what’s causing the issue, for wordpress. It’s so silly actually. When you copy and paste the code from here, it changes the quotes from straight to curly. All you need to do once it’s in your widget is delete all the double quotes and then retype them in. They’ll automatically become straight. Programming does not like curly double quotes! It seems to work for everyone who’s had problems so far.

    • Anna July 27, 2014 at 11:24 pm #

      THANK YOU! 😀

  5. Rob - BritishBBQer November 10, 2011 at 1:03 pm #

    Kudos to whoever figured out it was the double quotes turning curly that caused the problem… That was driving me nutty!

  6. christine @ wannafoodie November 14, 2011 at 2:02 pm #

    Done and done! Thanks for making the badge for us.

  7. Rita Huneault November 19, 2011 at 8:16 am #

    So happy I found this! I am a proud Canadian Food Blogger.

  8. Valerie November 21, 2011 at 2:24 pm #

    Thanks so much for the widget, great idea!

    However, I’m not the most tech savvy and having some issues with the icon display. The actual widget image isn’t appearing, only a broken link icon.


    • Melissa November 21, 2011 at 4:33 pm #

      Hi Valerie – take a look at my comment a little further up. I suspect that’s probably your problem if you’re using wordpress!

  9. Pepy @Indonesia Eats November 23, 2011 at 11:16 pm #

    Love this badge!

  10. Meghan Courtney Alton November 30, 2011 at 10:58 am #

    Thank you so much for providing this badge for us all! It’s a great way to identify all the amazing food bloggers in Canada! thank you thank you thank you! :)

  11. Nancy Wu December 27, 2011 at 4:13 pm #

    @melissa, thats for the comment about the dumb curly quotation marks and change it to straight ones… that is brilliant!

  12. Sandy Avvari February 4, 2012 at 10:50 pm #

    I just installed the badge onto my blog…yay! Thanks FBC for offering this up, it looks great : )

  13. Jacquee March 10, 2012 at 9:42 am #

    Hi, I am a new member and just added the badge to my site, but have no control over how it appears, i.e.centered. Any chance of HTML code for the Blogger badge?

    • Melissa March 10, 2012 at 9:15 pm #

      Hi Jaquee,
      I’m not terribly familiar with Blogger but I think in order to do that you need to host the image in photobucket or somewhere similar and then you can insert it as a text widget, just like the wordpress example – you can probably use the same code but swap out the photo links.

  14. Destini Srbljanin March 19, 2012 at 1:36 pm #

    YAY I just noticed this :) Love it :)

  15. Heather Rhymes March 21, 2012 at 9:48 pm #

    I’ve got the link, but the badge just appears as a little white square… Any suggestions? I use wordpress…

    • Melissa March 23, 2012 at 11:28 pm #

      Hi Heather,
      I just popped by your site and it looks like it’s working just fine. But let me know if you still think you’re having problems!

  16. Anita April 30, 2012 at 4:01 pm #

    Hi. Has anyone figured out how to put the badge in TypePad? Sadly, I can’t get it to work :(

  17. Meghan May 23, 2012 at 8:07 pm #

    Yeah – I finally figured it out! (wow I’m hopeless at this techie stuff!). Thanks!

  18. Pam Blacker September 30, 2012 at 6:10 pm #

    I have tried to enter this several times now and I am just seeing a box with an ‘X’ in it. Ihave removed the curly quotes. Just to confirm this is the code I have entered into the text widget. I have not used the title cell can entered the text into the cell below. My blog is Is his right or am I doing something wrong?

    • Melissa September 30, 2012 at 10:38 pm #

      I can’t see where you’ve tried to install it. if you want, email me at melissa[at]foodbloggersofcanada[dot]com and I’ll try to help you out.

  19. Darlene Morrison January 8, 2013 at 7:41 pm #

    I got the badge installed and it shows but have an x box above it. Still learning the whole website as I go, do you know how I can get rid of that box?

    I added all the code above into text widget on sidebar .

    • Melissa January 8, 2013 at 7:45 pm #

      Hi Darlene. I checked out your site and it looks fine to me. I viewed it in Firefox and Safari. Seems to be working great!

  20. Moe Tousignant April 16, 2013 at 10:12 pm #

    Would love to see a wider image offered. something that fits some of the Blogger templates a bit better.

    Can we modify the image ourselves or would you rather we stuck to this image and this image only?

    Either way I’ll be proud to be flying this flag.

  21. Moe Tousignant April 16, 2013 at 10:15 pm #

    Just realized I wasn’t logged in.

    I was wondering if there were any plans to make a wider version, that better fits some of the blogger templates. If not would you mind us messing with it in photoshop ourselves to get something that fits a bit better, or would you rather we use the logo as is?

    • Melissa April 19, 2013 at 12:00 am #

      Hi Moe,
      We’d rather you used this one. We’re pretty picky about our branding :). You can center it in blogger with a little CSS.

  22. Tracy Neville May 31, 2013 at 1:52 pm #

    I just installed this on wordpress and I have a blank box???? I swapped out the double quotes and still nothing
    my code

    its supposed to be the last widget on my side bar

  23. Karen Ahmed June 14, 2013 at 11:48 am #

    Done and done! It’s looks so pretty! Thanks for the instructions!

  24. sweetrevelations July 28, 2013 at 8:07 pm #

    I must be a complete idiot because I cannot get this to work for me! I have a white box in my sidebar but no logo. Help!

  25. Donika Spettigue August 31, 2013 at 8:08 pm #

    Hello, I am trying to download the badge on my site but this is what shows up when I C&P the link above. Anyone know how to copy the link above, it won’t work for me. Thank you.
    ”FBC – See more at:

  26. momwhats4dinner August 31, 2013 at 9:28 pm #

    I got it! Had to write it out myself! :)

  27. Ron Delaney October 25, 2013 at 1:09 pm #

    – See more at: this is what happens to mine when I try to paste it in to the widget

    • Melissa October 28, 2013 at 7:04 pm #

      Hi Ron,

      Did you get the actual code as well, or just the “see more” part? If you got the code as well, you should be able to just delete the “see more” piece. Otherwise you may need to type it out yourself – our wordpress install has just started doing that add on bit recently and I’m not sure why. It’s very annoying!

  28. Kalila Badali October 28, 2013 at 4:45 pm #

    Thanks so much for the badge! Lovin it!

  29. Tatum December 18, 2013 at 7:03 pm #

    Hey Everyone.. I got it to work on word press heres how :

    type in your blog address where it says “your website”
    when you upload image into your media library and click “edit” there will be a box in the right hand corner and it will say “FILE URL” copy and paste that in the section below

  30. Rachel March 2, 2014 at 9:00 pm #

    I can’t get mine to work… it just shows up as a little white box as well. I’ve tried just about everything. Not sure what I’m doing wrong?

    • Melissa (FBC Admin) March 3, 2014 at 9:45 pm #

      Hi Rachel, looks like you got it sorted out. I can see it just fine :). Let us know if you have any more problems. Thanks!

  31. Julie Costanzo July 23, 2014 at 1:28 pm #

    Hi Melissa,
    I have tried re-typing it and have tried all of the above suggestions.
    I only get a box that will link back to FBC page.

    Help me.

    • Melissa (FBC Admin) July 24, 2014 at 12:16 am #

      I see you’re on A lot of people have had issues adding it to the .com version of WordPress and I haven’t been able to figure out why – it looks like you’ve done everything right!

    • Melissa (FBC Admin) July 24, 2014 at 12:24 am #

      actually on further looks, it looks like you’re missing a little bit of code. I’ll send you an email :)

  32. Valeria August 15, 2014 at 11:22 am #

    I need help! I had tried everything suggested but still no working :-(
    no image-no link-nothing…
    is there any other way I can upload the FBC Member Card?
    Thanks 😉

    • Melissa (FBC Admin) August 15, 2014 at 11:42 am #

      Hi Valeria – it doesn’t seem to work on sites. We’re not sure why.

  33. Jessica February 2, 2015 at 1:13 am #

    Hey guys, if it doesn’t work on WordPress, try using the Image Widget instead of the Text. :)
    I made the Image widget and it worked!

    come visit:


  34. Danthanh February 10, 2015 at 3:14 pm #

    Hi fellow food bloggers,

    So I had the same issues as everyone with adding this badge onto WordPress! However, I finally figured it out and wanted to share my solution in hopes it will help you too. :)

    In your text/html widget box, use this code:

    Instructions: After you right click on badge image, save the pic. Upload it onto WordPress through your Media Library. Click on image and you should see a URL on right side. Copy and Paste that link. Insert it into the brackets above. Make sure to delete brackets though. So it should read src=”http://your media url.png” For sizing, change the 150 to whatever size you want.

    Hopefully this solves your problem!!!!


    • Danthanh February 10, 2015 at 3:16 pm #

      For some reason the code didn’t show. Here it is:

      • Danthanh February 21, 2015 at 4:16 pm #

        Sorry, I guess it wont let me post link. Just make a comment on my FAQ post and I will post the answer there.

  35. Ratna August 26, 2015 at 12:19 pm #

    I am having trouble installing the badge to my wordpress blog. I have pasted the code given and place my blog name, uploaded the photo but it isn’t working. The url for the image, where does it get placed? Are there still issues will wordpress to use this badge? Thank you.

    • Melissa (FBC Admin) August 26, 2015 at 4:42 pm #

      Hi Ratna,
      yes blogs that are using seem to have an issue with it. If you have a self-hosted WP site you should be fine though.

      • Ratna September 14, 2015 at 4:03 pm #

        I am wondering if I am doing something wrong. This is what I am pasting into the text widget “content” area…

        I see the FBC image in the side bar but when I click it it shows “nothing found”.

        My blog address is I have left the badge on so you might be able to look and see if there is a solution. Thank you for your help.

        • Melissa (FBC Admin) September 14, 2015 at 6:04 pm #

          Hi Ratna – looks like you’re missing the http:. The link should be “”

          • Ratna September 15, 2015 at 12:57 pm #

            Thank you but I do have that part in there. I’m just not sure where I place the image url, or if the code I have is right.

            This is what I have in the text widget

  36. Sandra from October 3, 2015 at 7:02 pm #

    We proudly have our FBC badge proudly displayed!! Love being a part of this community :)

  37. Devon Katrina November 19, 2015 at 7:00 pm #

    I cannot for the life of me get this to work. When I copy and paste the File URL it looks nothing at all like what you have posted here. It looks like this

    I am unable to edit the image the same as you have done here. The screen that pops up in my WordPress editor looks nothing at all like what you have here, I guess because WP has updated its appearance.

    I tried using my File URL and it doesn’t work. I tried copying and pasting the code here (changing all the ” from curly to straight) and it doesn’t work.

  38. Athena January 23, 2016 at 2:04 pm #

    Do these codes work in Squarespace?

    • Melissa (FBC Admin) January 24, 2016 at 12:04 pm #

      It’s straight up HTML CSS Athena so you should be able to insert it. I’m not very familiar with squarespace so I don’t know how much they restrict your ability to add a snippet of code but it’s pretty simple and I see no reason why you shouldn’t be able to! Let us know how it goes.

      • Athena January 24, 2016 at 3:48 pm #

        Thanks, Melissa. I tried directly copying and pasting then inserting my website URL and it didn’t work. I also tried changing the curly quotations to straight ones but it still didn’t work. Generally, I have no issues with Squarespace and copying HTML code, so I am not sure what the problem is. I have the zomato widgets on my page and they work beautifully.

        • EatWithMao March 21, 2017 at 2:36 pm #

          Hi Athena,

          I use Squarespace too and just got approved as a member. I’m taking a look at the tutorial to see what it’s doing and you can mimic it with an “Image” module.

          Upload the image to the module and go to edit. You can tell it go to a URL when the image is clicked which is the same functionality as the code snippet above.

          Hope this works for you. Feel free to reach out to me if you’re continuing with having issues.

          @Melissa, if you want I can update your blog post to include Squarespace as part of the tutorial

          • Melissa (FBC Admin) March 21, 2017 at 11:41 pm #

            sure! If you want to put something in a doc file and send a screenshot I’d be happy to update it. Thanks!

      • Athena January 24, 2016 at 9:03 pm #

        I think maybe it’s the CSS aspect that is not working. Do you have basic HTML for this widget?

  39. Kelly March 14, 2016 at 12:32 am #

    I should have read the comments before i tried! i wrestled with this for an hour..ha! A programmer friend helped me. :)

    I also like having this badge and will display it proudly, however, it would be great to have a few different colour choices, so that it fits into various styles of blog. In many companies’ style guides they have a few colour choices for logos, in case other companies will be using them on their sites. I don’t use bright, primary colours anywhere on my blog, so a black and white version would be great to have. Something to think about?

  40. Samantha March 17, 2016 at 11:46 am #

    Hey Melissa, I’ve tried on a few separate occasions to install the badge and it’s just not working for me. Unfortunately, it’s most likely user error at my end (I’m horrible at the tech side). I’ve followed the additional advice in the comments and it doesn’t seem to be working for me as it’s showing a question mark in lieu of the badge.

  41. kelly June 28, 2016 at 10:12 am #

    don’t know how to do it on square space…. anyone?

  42. Tina August 8, 2016 at 3:49 pm #

    Hi Melissa,

    I am trying to upload the badge…it is there although the image is distorted – I have tried to resize, thumbnail, etc and it isn’t working – any suggestions?


    • Melissa (FBC Admin) August 8, 2016 at 5:22 pm #

      Hi Tina,
      It’s showing up as distorted because you are trying to make it bigger than it’s meant to be. The badge is 150px by 150px but you’ve got it set to 210px. There’s no way to englarge an image without distorting it.

  43. Tina August 9, 2016 at 9:05 am #

    Thank Melissa – I will try again as I uploaded the image (for some reason did not get a url link?) as per the instructions and this is what happened as I did not adjust size it just seems to be the size its adjusting too??? Thanks again!

  44. Michelle Jaelin RD August 24, 2016 at 1:36 pm #

    This is great, thank you!

Leave a Reply

Hello Summer!