February 15, 2012

Create & Add a G+ Icon to Your Blog [tutorial]

Have you guys heard the Google Plus buzz?
I ignored it until Google went and announced they would be yanking my favorite free photo editing software - Picnik. After that announcement, and the rumors Picnik would still be available if you belonged to G+, I decided to sign up just to check it out.
For all you guys who have already jumped on board I thought I share how I made my G+ icon. First you need to make the icon image, and there's a few ways. Then it's a few simple steps to turn the image into a working G+ icon. [THESE SAME STEPS WILL WORK FOR ALL ICONS EXCEPT RSS  -here- AND EMAIL-here-]

Make the icon: WAY #1  {How I made mine}
1] Upload one of your existing button images to Picnik {or photo editing program}.

2]  Make a patch to cover the old emblem.
Go to: Stickers, then to "Shapes." Next, select a square to cover the existing label, whether it's a "P" or "T" or whatever. Then use the dropper to color match the square to the rest of the icon.
3] Edit the icon to add a "G+"
Now- Go to "Text" and select "Georgia"
It's not an exact match, but it's the closest I could find! You want a lower case "g" and place it so it's hanging off the icon a little.
Next add the "+" symbol

Make the icon: WAY #2
1] If you don't have an button you can upload a pic of the outline of a square {or whatever shape you want.}.
2] Edit the square to look like your other icons
If your other buttons have rounded edges, like mine, you should do step 2: Select "Matte" and round out the corners of the square.
3]Go to "Duo-Tone" and select the colors for your square that will match your blog.
4] Edit the icon to add a "G+" Now- Go to "Text" and select "Georgia"
You want a lower case "g" and place it so it's hanging off the icon a little. Next, add the "+" symbol

Make the icon: WAY #3 
 1] You could upload a stock icon--they can be found for free all over the web.  -Or-  You could also just grab drag any of the free icons below {by dragging it onto your desktop. }
2] Edit the square to look like your other icons
 Go to "Duo-Tone" and select a color for your square.
3] Edit the icon to add a "G+"
Now- Go to "Text" and select "Georgia"
You want a lower case "g" and place it so it's hanging off the icon a little. Next, add the "+" symbol.

A] Your image needs a HTML code
Upload your image to a photosharing site, like Photobucket, and "save a copy" then you can get an URL for the pic. COPY the "HTML code".
B] Get your Google+ account URL
Pop over to your Google+ account and grab the web address for YOUR profile page.

Now that you have an image URL for the icon you made and the URL from your G+ account insert them into the red portions specified for this sample code. Easy Peasy, yes?
 I also like to center my icon on my side bar. If you want yours centered it's easy to do- just insert the underlined code onto both sides of the code you've just inserted your information into.

C] Add your new icon to your blog.
For Blogger: Go into Layout for blogger. "Add a Gadget" and open a new "Configure HTML/JavaScript"
Now you can input your new icon using the code above. Just add your info where the red writing is. First the URL for your G+ account, then add the html code for your new icon.

Inserting the HTML code is where Blogger and Wordpress will differ. If you have Wordpress then upload your icon how you added your other social media icons. Sorry I can't give a better description!

My last tip- I put my "G+ code" in the same "Gadget" as my code for my Pinterest, RSS, and Email buttons. I just added it right in at the end and then made sure the "center code" was behind the last icon I added.
It should look something like this when you're done. The buttons all lined up and centered in the middle of the sidebar- or where ever you've put it.

Need any other gadget tutorials? Want to make your own working  Email or  RSS icon? Or add a blogging signature to your posts? How about personalize your favicon?- you know, that little symbol that shows up at the tops of the browser window when people are reading your blog- DIY one in a few minutes.

Here's the thing about this little blogging design stuff, isn't very hard! There's no need to pay people to make these small gadgets and icons! You CAN DIY it!!


  1. This is very useful info. I am going to pin it when I have time to add this feature! Thanks!

  2. I now follow by mail cause' I missed this and I needed it! Thank you so much for helping those of us who are not tech savvy.
    I have a question...I want to have my "favorite" posts on my sidebar with a pic but when I add this gadget I seem to have NO control over what pic shows up. For now I have left of this feature cause I don't know how to pick the picture I want to see on my sidebar....Help please, Lori

  3. Thank you for sharing at Potpourri Friday!

  4. Nice tutorial, Becca. I'm on Google + but I'm kind of boycotting it because I'm ticked off about them taking Picnik away.

  5. thanks for the tutorial. I didn't have this last week so I just had my sister a web designer make mine for me:)

    fyi- you have word verification on for your comments. Email me if you need help changing that setting.

  6. Thank you so much for sharing this. I have been trying to figure out the social media thingys for a while but was totally stuck. I found you through I heart naptime. So glad you linked up!!! Thanks again! Gonna come back when I am at home to make them.

  7. Thank you!! It's been driving me insane how to get those buttons. I really appreciate this so so much.

  8. Thanks so much for this tutorial. I usually hire someone to do something like this, but with your clear directions, I think I may be able to do it myself.

  9. YOu read my mind. Okay, so my gplus account is in review because I want it to read: Laura I'm Not a Trophy Wife. I didn't want my full name on it. ugh... but this tutorial is great for the buttons! I was just googling images and couldn't find anything. I will g+ follow you! Will you try my g+follow too.


  10. Oh, so nice! I want to give it a try! Will you, pretty please, consider sharing with my readers at http://sassafrassalvation.blogspot.com/2012/02/sasss-sunday-salvation-show-12.html ?



  11. Great tute Becca - thanks for sharing this. I need to sort all this stuff out properly on my blog so I'll pin this to help me when I get a minute!

    Thanks for linking to a Round Tuit!
    Hope you have a fabulous week!
    Jill @ Creating my way to Success

  12. Thank you, Thank you!!! I need someone to give me tech tutorials. Technology is not my strong suit!

    Thanks for sharing! Useful info for sure!

    @ Creatively Living

  13. Great info and this is almost exactly how I did mine :) Thanks for sharing!

  14. This is such a helpful tutorial!! Thanks for coming to our "Strut Your Stuff Saturday." We hope you'll join us again next Saturday with more great ideas! -The Sisters

  15. This is really helpful and so easy to follow. I'm in the same boat as you in terms of google+. I've been hesitant to hook my blog up to it, but think it might be time. What are your feelings about it so far? I'd love to hear your thoughts!

  16. Thank you so much for this! I was actually working on this today and kept hitting road blocks. Just as a note, I think your feed burner button may have the wrong link to it... All I get is code when I click on it.


  17. Thank you for sharing this. I really do need to get on making all of my social icon buttons. First I need a theme...hmmmm. FOund you off tip Junkie

  18. Thanks for guide. I am thinking about creating set of icons for all social networks. Because all this standard icons are not bad, but boring, event from big collections such as http://www.cannypic.com/


Thoughts? Questions? Opinions? Let's talk about it!