Blogging Help: Social Media Buttons

OK, so your stressed and you cant figure out how to get one of those cute social media buttons most blogs have, am I right? I had that problem, too, and every time I was given a link to a tutorial guide or searched for one, I got a headache because Im just not that tech savvy. Well, today is your lucky day! I have found an easy, headache free way to make one of those cute social media buttons! Its just a few clicks, and bam! You have yourself cute media buttons!



OK, so first, you need to figure out what you want your buttons to look like! You can type "free social icons" into your web browser. Or, you can go to the place I found mine, socialicons.com, and just browse through their collection.

Second, once you find the button you want, DONT CLICK ANYTHING!! Hover over the image and THEN RIGHT CLICK! Click to save the picture (and only the picture), and make sure you know where you are saving it at. Get all the buttons you need for every social media site you are hooking to your blog or whatever you are trying to connect to (I.E google+, goodreads, youtube, facebook) and then go to photobucket (or any site like it will do. I use photobucket because its easy to navigate). Upload ALL of your pictures.

Here is where you have to pay attention!! This code is pretty easy to mess up, but with a little bit of work, it can go a long way!

<a href="ENTER WEBSITE HERE"><img src="ENTER PHOTO HTML CODE HERE"/></a>

Everything in red in the code, you are going to REPLACE with your own information. Here is an example. I am going to replace the first one with my twitter link:

<a href="http://twitter.com/CeliaWReviews"><img src="ENTER PHOTO HTML CODE HERE"/></a>

Its that simple, and yes, you will need to put http:// every time! It might be easier to copy and paste the link, though.

Now, for the second part, you will look for the HTML of your picture. In photobucket, just click on whichever picture you want, and look to the right side of the screen. You will see a box that is titled IMAGE LINKS! Make sure you ONLY copy the code that says HTML CODE! All you have to do is click on it, and it will copy for you. Now, go back to your code and replace the words with the code in the second part.

<a href="ENTER WEBSITE HERE"><img src="<a href="http://s267.beta.photobucket.com/user/Poohbear0995/media/twitter.png.html" target="_blank"><img src="http://i267.photobucket.com/albums/ii312/Poohbear0995/twitter.png" border="0" alt="twitter photo twitter.png"/></a>"/></a>

Ok, so pay attention to this... those highlighted parts? Get rid of them. They will only show up as text and make for an ugly pic. For some reason there is a picture of a page that is ripped  that shows up after you put the code in. Delete it. Deleting those will set your code right. 

Now, all that's left is putting the HTML on your blog! Make sure it works, and enjoy! If you have any questions, feel free to leave a message with your email, and I will get back to you and try to walk you through it.