How to add your Facebook photos to Blogger, TypePad, and other webpages, in a widget link

Look to the far left of this article on my blog page and you will see what I'm talking about!  Click on it, just to see what I'm talking about,  and you will go to my Harrach Glass Facebook group page.

A long time ago I had added my Facebook group page, Harrach Glass,  to my blog,  but after a year or so,  I deleted it because the pictures were too big and distorted.  I had intended to reinstall that widget to my blog with smaller pictures.  Unfortunately when I went to put Facebook back on my blog,  I couldn't remember how or where I had originally found that widget and then I was up a creek without a paddle.  After looking all over, I finally found the widget on Facebook and I thought I'd share this info with my readers today.

The link for this feature on Facebook is Facebook Badges.  Once you click on the link you will see that there are a few different choices you can use.  I wanted to use the Photo Badge option so that when someone looks at my blog, they see my Harrach Glass page link to Facebook complete with some of my  most recent photos that I've posted.  If you decide to do the Photo Badge as well, you have the option as to putting it on Blogger, TypePad (which I'm not familiar with) or your own webpage.

I noticed that when I put my badge on my blog and tested it out, the link brought me to my personal Facebook page instead of my Harrach Glass page.  And for me, that was not what I wanted!!!  So, if that happens to you, once you have put it on your blog, follow these perhaps not so simple step by step directions and you should be able to fix the problem.

1. In Blogger's "new look" page view, shown above...  since that is what I've been using, click on the Layout section.  It's located on the left side of the page. 
2. Once again, on the left hand side of your blog's layout page view,  located somewhere under the title or header of your blog, you will now see a box that says HTML/JavaScript right under the light blue Add a Gadget box.  Basically, look for the blue Add a Gadget Box, and then look right under it.  To make sure it is the correct box, click on the HTML/JavaScript link to verify you have the correct box!  
3. Next, click on the "edit" link on that HTML/JavaScript box.
4. You should see, Facebook Badge START in the html box.
5. So to be able to make a badge you have to have a group page.  If you don't have one, you need to make one now.  If you have one, open a new window in your web browser and pull up your group page and copy the group page's address. 
6. Go back to the your blogger page and in that box we've been looking at, in the HTML text paragraph, highlight everything you see between the quotes, starting on the second line and perhaps includes the third line (depending on how long your link is).  Once highlighted, hold down the control key and V key on your computer's type pad.  This should replace the original link with the correct link to your Facebook group page.
7. Scroll farther down in the HTML code until you find title=    I replaced the name of my business with the name that showed up there.  Once done, that will be the title of your widget.  In my case, the title is my business name, but you can name it whatever you want to.  
8. Finally, click SAVE.  Then go back to your blog to proof read it to make sure your links are correct.  And you're done :-)  If all else fails and you can't get it to work, remove it :-)  Then you can start all over!