How To Make/Add Social Media Buttons To Your Blog {tutorial}

So, for today I decided to do a tutorial on how to make social media buttons. Hopefully you all will enjoy it and be able to understand it : )

So, firstly you have to find an image that you'd like to use as your social media button or you can also make one.

- I prefer to make my own using Inkscape (a free downloadable program on the internet). But I'm sure there are a bunch of other programs you can use too..

So hopefully the images/screenshots will help guide you through!! (If you want to view the pictures larger- you should be able to click on them! :)

Okay, so now that we have the social media button made now we have to put it into the code and up on your blog.

Here's the code for the button.

<a href="SOCIAL MEDIA URL GOES HERE"target="_blank"><img src="IMAGE LOCATION" /></a>

Yeah, I know it looks like a little bit of a jumbled mess...but hopefully I can explain how to do it.

In the URL GOES HERE section of the code- go to the social media website you made the button for (ex: facebook) and click on your profile where if others would visit your page where they would go...

 ****I'm just going to use my blog for an example.....

Then once you copied that link go back to your code and highlight URL GOES HERE (don't include the " " in your highlighting) and right click on it and click PASTE. Your link for your social media website should be in there after you click paste.

 Now, for the image part of the code we have to upload the design you made to the internet so we have a link to it. : ) To do that go to Google and type in Picasa Web Albums (you probably will have to be signed into your Google account to upload). For those of you who may not know- this is where all your images are stored for your blog.

So.....click on UPLOAD to upload your design you saved.

 Now right click on your image once it is uploaded and click "Copy Image Location"

Now highlight IMAGE LOCATION and right click and select PASTE. Your image location should be in the code now.

Now, if you would like more than one button for your social media sites you can just duplicate the code and change the link locations for both the social media sites and image locations of them. SO basically, just copy the original code and paste it below the one you already adjusted and then do the same thing to that one.

If you want an email button, it is slightly different than the other code. Just highlight the EMAIL ADDRESS part of the code and type in the email address you want in there.

The image location is the same as before- just upload an image and copy and paste the location to the image in the IMAGE LOCATION spot. (Don't copy and paste the image- just the image LOCATION)

Now, we are ALMOST DONE!!!! Go into your blog and click LAYOUT and then click ADD GADGET. select the HTML gadget option...

Now the LAST STEP! :)

Also....a little TIP! IF you would like your buttons centered (like on my blog sidebar) you can just add <center> to the very beginning of the code and </center> to the end....

so, here's what it would look like....

<center><a href="SOCIAL MEDIA URL GOES HERE"target="_blank"><img src="IMAGE LOCATION" /></a>

<a href="SOCIAL MEDIA URL GOES HERE"target="_blank"><img src="IMAGE LOCATION" /></a> </center>


I personally think that looks a little better than all the buttons left-aligned, but that is just my opinion.


Well, let me know if you have ANY questions. This took so much longer than I expected...ahhh...

Have a great weekend!!