First of all find the buttons you would like to use
You can see my free icons here
But if you search Google images using the colour and/or style you want you will find lots of free resources.
Save the icons to your computer, you may need to unzip the file
Next go to your WordPress dashboard and open a new post (as if you are going to add a new blog post)
Title the post Draft:Social media icons HTML (this means that if you need to update them you can use the code again)
Click on the add media icon
You will get a new window open as below
Select the first social media icon (e.g. twitter) and add it
On the Insert media window pop up fill in as below
The click insert into post at the bottom
You should now see your icon
You can now resize the image (click on the photo icon that appears on the image to get the image options box)
By using the % slider or on advanced settings entering the exact size
In the advanced options you will also see at the bottom the option for making the link open in a new window
Repeat to add all the social media icons you would like
To add a link for an e-mail icon, instead of putting in the URL put in mailto:youremailaddress
When you are happy with the size and links switch over to the Text view and copy the text. If you save that post as a draft you will be able to use it and make changes to it.
Paste the code into a text widget on your widget page if that is where you want the buttons to show.
You can use the code anywhere that you can use HTML code.
Save the text widget and have a look on your site to see if the size, layout and links are correct, if not go back to the draft post and fiddle until you are happy.
Thank you so much! This has been so helpful
Hi, thank you so much. This was really helpful and you inspired me to make my own social buttons!
Thank you so much. After several attempts this has been the easiest to follow tutorial that worked. THANKS!
Thanks for the tips! This was extremely useful and easy to follow!
OMG! This was so helpful! Thank you so much, you really helped me out here!
Thanks so much for this tutorial!! It’s so clear and easy to follow. Thanks Jo! 馃檪
Best. Tutorial. EVER!!! I never thought to use the posting option to create a social media widget!
God bless you!
THANK YOU so much for this tutorial!!! Between you and crochetime, I FINALLY got the media buttons up on my site. I have only been blogging for three months, so am just now tweaking the little details for my little blog. I have read so many other tutorials, but your’s was concise and easy to follow, and GOT RESULTS!!! Can’t thank you enough! Especially for people who aren’t coders!!!
Thank you. This was really helpful
Perfect, that for speaking in non-geek to me! I understand this!!
Glad it was useful 馃檪
You are a genius thank you! And the polka dot ones are lovely. Thank you 馃檪
Thanks for this! 馃檪
Thank you so much for such easy instructions! Every other blog post I found made it soooo difficult to understand 馃檪
Paula at Beauty Lover
Hi,
I love this blog that I discovered recently !
I have a question…When I want to add them in a post, my social icons appears vertically instead of horizontally..How can i deal with that? I really have no clue..
There are a few possible reasons, have a fiddle with justifying them with none or left
Thanks, really really helpful. Only just gone over to wordpress from blogger & this has made setting up media buttons so easy
Thank you, thank you, thank you! You are indeed a fairy!
Thanks for this post! been wrecking my head how to add links to raverly etc. at top of my page and this explained everything perfectly 馃檪
That was so useful and brilliant instructions. I did it first time!
Thanks so much for this post!! Very helpful to my blogger education!!
Can I add these to my signature in Hotmail?
Yes 馃檪 Lots of tutorials out there on how to do it if you need help
Thank you very much!