«

»

Aug
29

How To Add a Google+ Badge to Your Blog

I have had a few people ask me how I got my widget on this blog, and on my new WordPress blog that I am starting to make. Here are some instructions, with pictures, for people that are not too good with the whole adding code and widgets thing.
Primarily this “how to” is for Blogger, but the process is the same for WordPress.
 

This works for both Blogger and WordPress

1. Open up your Google+ account and click on YOUR “about page” –> You will see a series of numbers in the web address. This is you ID number. Cut and paste this somewhere safe as you will need it.

2. Go to this website –> http://widgetsplus.com/–> To create your widget

2. Click the “get widget” blue button on the left hand side. (Your widget looks like the box in the top right) 3. Once you click the button “get widget” the screen changes to this one

3. Fill in your ID number (from step one) into the box that i have circled for you. Advanced: –> You may change the other boxes to get the colours/size you want.

4. Hit the big orange “Get code” button.

5. Cut and paste all of the code it creates into an HTML widget on your blog.

Creating the Blog widget:

WordPress –> This is normally under –> widget –> Text/HTML –> you drag the box to your sidebar where you want it. Add in the code to the HTML section and that should do it.  (Sorry i have not done pictures of this one)

Blogger –> You add an gadget and then add the HTML/Javascript widget to you blog.

 

Add the HTML widget

Then add a title “Google +” or some such Then add in that code and hit save :-)

Make sure you add ALL the code as an error in one little part will stop it from working. you should have now have your widget.

 

HINT: –> What do i do if the widget is too wide for the blog spot?

This is easy. Open up your widget again so you can see the code. If you look at mine in the picture above, you will notice a “320″ on the first line of the code. Change the numbers to “230″or something. Be careful to keep everything else the same including the quote marks. This should reduce the width of the widget.

 

HINT –> What do I do if it is not working?

1. Start the process again. Sometimes you might have made a copy and paste error when copying the code to the HTML. 2. Refresh the page 3. Sometimes things just don’t work. Wait come back in an hour and see.

Hope this little guide was of help to you …

1 comment

  1. Crystal says:

    That is so nice of you to post a how-to! :-)

    Also? Jealous that you’re on Google+! I signed up to be invited, but they haven’t let me come and play yet. Oh, well, I know I’ll get on there someday – I can’t wait to check it out!

Comments have been disabled.