Adding social media buttons to your WordPress site

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

Adding social media images

You will get a new window open as below

Adding image

Select the first social media icon (e.g. twitter) and add it

On the Insert media window pop up fill in as below

Adding image details wordpress

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.

Wordpress ad media social icons

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.

 

22 Comments

  1. Thank you so much! This has been so helpful

    Reply
  2. Hi, thank you so much. This was really helpful and you inspired me to make my own social buttons!

    Reply
  3. Thank you so much. After several attempts this has been the easiest to follow tutorial that worked. THANKS!

    Reply
  4. Thanks for the tips! This was extremely useful and easy to follow!

    Reply
  5. OMG! This was so helpful! Thank you so much, you really helped me out here!

    Reply
  6. Thanks so much for this tutorial!! It’s so clear and easy to follow. Thanks Jo! :)

    Reply
  7. Best. Tutorial. EVER!!! I never thought to use the posting option to create a social media widget!

    Reply
  8. God bless you!

    Reply
  9. 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!!!

    Reply
  10. Thank you. This was really helpful

    Reply
  11. Perfect, that for speaking in non-geek to me! I understand this!!

    Reply
    • Glad it was useful :)

      Reply
  12. You are a genius thank you! And the polka dot ones are lovely. Thank you :)

    Reply
  13. Thank you so much for such easy instructions! Every other blog post I found made it soooo difficult to understand :)

    Paula at Beauty Lover

    Reply
  14. 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..

    Reply
    • There are a few possible reasons, have a fiddle with justifying them with none or left

      Reply
  15. Thanks, really really helpful. Only just gone over to wordpress from blogger & this has made setting up media buttons so easy

    Reply
  16. 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 :)

    Reply
  17. Thanks so much for this post!! Very helpful to my blogger education!!

    Reply

Trackbacks/Pingbacks

  1. How To Add Social Media Icons To Your WordPress Blog | Blondes Love Cupcakes - [...] I decided to finally sort it out today and I found a really great post on GeekFairy (check it …
  2. How To: Pantone Inspired Social Media Icons - [...] after a step-by-step tutorial from Geek Fairy, and about two hours later (the tutorial was awesome, it’s just my coding …
  3. friday’s letters | a scenic detour - [...] Geek Fairy, thank you for your awesome tutorial for adding social media buttons to my blog. Yay! I’ve [...]
  4. Making social media buttons for your wordpress site. - […] MAKING SOCIAL MEDIA BUTTONS FOR YOUR WORDPRESS SITE […]
  5. Changes | thirteen paper planes - […] week so please stick with me. I plan to trawl the net for useful tutorials like this one from …
  6. מראה חדש לבלוג, פברואר 2014 | אינטרנט להשפעה ושינוי חברתי - […] לבניית הווידג'ט של קישורי מדיה חברתית השתמשתי ברעיון הזה: ליצור פוסט או דף חדש בבלוג, להעלות אליו את קבצי …
  7. How To Add Social Media Icons To Your Wordpress Blog Tutorial | Blondes Love Cupcakes - […] I decided to finally sort it out today and I found a really great post on GeekFairy (check it …
  8. Some changes around here! | My Bloggable Day - […] with myself for this, I created my own social media icons (they grey hearts to the right) using this …

Submit a Comment

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Pin It on Pinterest