DIY custom social media buttons.

Make your blog pretty....

So if you have been here before then you know... I GOT A NEW BLOG!!!

(Well at least a new look for my blog.)

One of the things I changed was that I added social media buttons, you know those "feel free to stalk me elsewhere" 

(Pinterest, Twitter, Facebook, etc.) linky buttons. 

I searched the web and found a few tutorials with how to make them. 


Once I actually got how to do it, I really felt like there could have been an easier tutorial out there because it is SUPER easy once you know the formula.

So here is how to make your very own custom social media buttons.

1. Pick your design.  (This is the fun part. Be creative!!)  I chose peaches for my buttons because I thought they were adorable and they go with my love of all things southern. Choose something that goes well with the look and feel of your blog. You can either make your own or, EVEN SIMPLER, you can find a ton of free and super cute pre-made social media buttons online by Google(ing)...wait for it...

Free social media buttons.

(Here is a few of my faves)

Hearts

Stamps

Woven Fabric

Hand Drawn

2. Upload your social media buttons.  Once you have the design of your media buttons, upload them to an image hosting site. I used Photobucket. (sign up is quick and free if you don't already have an account.) 

3. Learning to speak code. (Don't get scared you can do it, I promise)  

Ok so once you have your buttons on Photobucket (or another hosting site that gives you a direct link address) you will be ready to make a code for your buttons.

To do that you will use this (very easy) code formula. 

<a href="http://www.facebook.com/profile.php?id=1427631996"><img src="http://i1139.photobucket.com/albums/n545/Augmagnolia/blogbuttonspeach-2-2.png" /></a>

*It will be easier to edit the code in your word processing program so you can do it step by step. Paste this code there and follow the next two steps.

The part of the code in red tells your button where to re-direct to when clicked. In the first example Facebook. That means if you want to make your "Twitter button" copy the URL for your Twitter page and replace everything inside the parentheses of the red section with your Twitter URL. For me that would make it look like this.

<a href="https://twitter.com/AugustMagnolia"><img src="http://i1139.photobucket.com/albums/n545/Augmagnolia/blogbuttonspeach-2-2.png" /></a>

(YOUR DOING GOOD ALMOST DONE!)

Next, the yellow part tells your blog where to find the custom button you want use. This is where you will use the image hosting site. Get the link to your button. (If you used Photobucket simply click on direct link and it will copy it for you.) Replace everything inside the parentheses of the yellow section with your image URL. It should look very similar to mine above. 

(GREAT!)

4. Add the button to your blog.  If you are using Blogger then go to your dash board and click design and then add gadget. Click add HTML/java script. Copy and paste the entire code you created into the box and save. 

5. Test your button.  View your blog and make sure the button is in the correct place and is the correct size. (If you want it to be larger or smaller you can edit your button using Photobucket's resize edit until you get it right.) Then click on the button to make sure that it re-directs you to the page you want it to 
(i.e. your Twitter page so that others can start following your tweets.) 

If everything works YOUR DONE! Sit back and admire your spiffy new social media buttons!!

It's that easy! You can use this formula for all your buttons just sub in the different URL's to create a full set of buttons. 

Hope you enjoy!!

A.S.A.P.

(As Southern As Possible)

Mae