DIY Social Media Buttons

I have seen so many cute social media buttons on different blogs that I follow and I wanted to have my own. Prior to this, I was just using the ones generated by the website that I was linking up to (i.e. Facebook, Twitter, Pinterest) and not loving the cluttered look it was giving my sidebar.

So, I decided to try to make my own. I made mine in Photoshop Elements, but any similar photo editing software will work just fine. For the purposes of this tutorial, I will be showing you how to do it with Photoshop Elements 9.

Let’s get started.

1. Create a new file. The pixels will be 510 X 510 and be sure the background contents is set to Transparent. This way you don’t have any lines if your background of your blog is a different color than white.

2. Pick a shape that you want to use for your buttons. For this tutorial, I will show you how I made mine, located on the right sidebar, so we will be doing circles using the Ellipse Tool.

3. Draw your shape so that it is centered on the transparent background that you created. You will need to fill in the color with the chosen color for your blog using the paint bucket feature. (I used the same color that is on my blog to tie it all together).

4.Next, draw another circle using the Ellipse Tool over it in a different color so that it is centered on the base circle. This will create another layer for you. You will want to chose your color for this before you start drawing it so that you are able to see what you are drawing.

5. Now you need to go to Google and do an image search for the Facebook, Pinterest, RSS feed, etc buttons or icons. Find one that you like and save it to your computer.

6. Open that file in Photoshop Elements.

7. Using the Magic Wand Tool, click on the white ‘F’in the picture. This will select the entire outline of the letter. You can see in the picture below that there are dotted lines around the perimeter of the letter ‘F’. On your keyboard press “Ctrl+C” to copy to image.

8. Double click on the original file you were working on at the bottom of the screen. This will open that file back up so that you can edit it. On your keyboard, press “Ctrl + V” to paste the image. It will be off-centered but we will move it around and resize in a minute.

9. Resize the pasted image to your liking and fill it in the color you want it to be. Be sure to center it as necessary.

10. You will need to repeat this same process for the other buttons you want.

**Note** When doing the RSS feed button, you will need to click on each section and paste it over one at a time, resize and then change the color on each layer.

11. Open the image in Photobucket so that you can grab the Direct Link for it.

12. Open Blogger in another window. Click on “Layout”. Decide where you want this to go on your blog and click on “Add a gadget”. Scroll down to “HTML/Javascript” and click the ‘+’ to add that gadget.

13. In the title field, I put in “Let’s stay connected” but you can put in anything you want, or nothing at all if you’d like. Your choice.

14. Using the direct link that you have for the pictures you uploaded into Photobucket, use the following script in order to add your pictures and link them up. PLEASE NOTE: All { and } will need to be changed to < and > respectively.

{a href=”ADDRESS YOU ARE LINKING TO”}{img src=”PHOTOBUCKET LINK”/}{/a}

**Replace the words “Address you are linking up to” with the URL to the site that you want that button to link to. For the Facebook button, it would be www.facebook.com/yourblogsname and then repeat for your other buttons. You will probably have to change your sizes which can be done by adding the words information width=”50″ height=”50″ next to the word ‘img’ in the code above.

For an email button, you will change the link to the following:

{a href=”mailto:EMAIL ADDRESS”}{img src=”PHOTOBUCKET LINK”/}{/a}

Again, changing the { and } to < and >.

15. When doing more than one button, just start the next line of code directly after the previous button so that they line up nicely. It will look like this with four buttons in your HTML/Javascript window.

16. Click ‘Save’ and you are all done!! Congrats to you!!!

Let me know if you have any questions!!

I’m linking up here

Vote for me!!

Comments

Melanie says:

March 6, 2012 at 3:17 pm

My readers would love this tutorial…. I'd love for you to come link this up!

http://www.reasonstoskipthehousework.com/2012/03/tuesday-time-out.html#.T1YnylHlyGc

Melanie :)
Reasons To Skip The Housework

iSavortheWeekend says:

March 7, 2012 at 12:41 am

So cool, now you need to feature how to make a background. Visiting from Flaunt it Friday.

Rose :: Fine Craft Guild says:

March 7, 2012 at 7:36 am

Fun little tutorial. Just got social media buttons,but it might come handy for some other navigation tools one day.

Blythe says:

March 9, 2012 at 12:16 pm

Awesome post! I have been trying to do this and getting frustrated. I don't have photoshop but will try same steps in another photo editor. Thanks so much for sharing. Just became a new follower!
Would love it if you'd check out my blog too.
Blythe
http://www.thedesperatecraftwives.blogspot.com

Katie @ Little Becky Homecky says:

March 9, 2012 at 12:28 pm

Stopped by to follow you back!! Thanks for stopping by!!:)

Katie

Aimee - ItsOverflowing.com says:

March 11, 2012 at 5:16 am

Awesome tutorial Katie!!! Thanks LOTS!!! XO, Aimee

Jess says:

March 15, 2012 at 8:44 pm

Just had to share your tutorial on my blog. Never would have thought to use the magic wand. You're awesome! Thanks again :)

Carrie @ DreamGreenDIY says:

March 16, 2012 at 3:03 pm

THANK YOU!!!!!! I have been wanting social media buttons on my blog for so long and have even tried to pay someone to do it. You are my new favorite person – Check out the fruits of my labor on the sidebar! Thanks! http://dreamgreendiy.com/

Katie @ Little Becky Homecky says:

March 16, 2012 at 5:36 pm

You are just too sweet!! I mean obviously, if I want more involved buttons I will have to pay for them because I am not that handy;), but for now, while my blog is still small I decided they would do! And I really do like them! :) I stopped by to check yours out and they turned out amazingly!! Great job!!:)

Carrie @ DreamGreenDIY says:

March 16, 2012 at 5:54 pm

I think yours are fabulous =) Thanks again!! And I appreciate you taking the time to head over to my blog too!

Emily says:

March 21, 2012 at 9:32 am

great tutorial! I recently made my own to, but I used Picnik… you really described how to do it well. I think this is my first time your blog… lovely!

Meredith says:

March 29, 2012 at 10:36 pm

Great tutorial!! I've been needing to do this….DONE! Feels good to check something off the to-do list :)

Have a great weekend!

K Coake says:

April 16, 2012 at 2:17 pm

Thanks for the tutorial. I pinned it a while back and just used it to make my buttons. Thanks so much, it was soooo helpful!
One question I have, how do you arrange the buttons? I got mine made and they look good, but I can't seem to get them arranged how I want and I am sure there is a trick.
Thanks so much!

Janice Dickson says:

March 4, 2013 at 12:50 pm

Thanks so much!! worked like a charm. xx

DIY Social Media Buttons for Blogger

Comments

Leave a Comment Cancel reply

Email Updates

Affiliates