How To Add Social Media Buttons to WordPress

On Monday, I posted about my new social media buttons, which I LOVE.  I still have no idea how to create them from scratch & get the correct icon images on them, so I got mine from Olivia at My Favourite Things.  There are tons of free sets available, so find a background color you like and save them all!
Instagram Social Media IconPinterest Social Media IconBloglovin Social Media IconEmail Social Media IconTwitter Social Media IconRSS Feed Social Media Icon
Now that you have your buttons, you need to add them to your blog!  If you use WordPress (like me) I have an awesome shortcut for you!  Disclaimer: I don’t really know what I’m doing, I’m just sharing what worked for me!  {If you use Blogger, check out Olivia‘s How-To}

First, go to your Dashboard, click on Appearance & then Widgets.   Once you’ve click on widgets find “Text” in the available Widgets table.  Next, click and drag “Text” over to your primary sidebar.

Add Text Box to Primary Sidebar

This is where the shortcut comes in.  Instead of typing HTML in the text box, leave this page and go create a new blog post (but don’t publish it).  Upload all of your icons to that post and arrange them in an order that you like – remember that the side bar is approximately three buttons wide.

Add Social Media Buttons

Now click on the first button, and click on the image box that shows up.  Scroll down to Link URL

Edit Link URL

Add the URL for where you want the button to take you.  I’m editing the Instagram button here, so I’m linking the button to my instagram page.  Do the same thing for the rest of your buttons, I did the same for Pinterest, Bloglovin’, and Twitter.  For RSS I linked it to the page that clicking on my RSS link takes me.  To be honest, I don’t really understand how and why RSS exists, so I’m not too concerned about it.

For email, I just linked the button to my current “Contact Us” page.

When you’re done here, save everything as a draft.  Then click over from “Visual” to “Text” so that you get the HTML of what you just created.  Simply copy and paste all the code into that text box you added to your primary side bar previously.  (You’ll have to click on Appearance >> Widgets again & then just find “Text” in your primary side bar.)  Paste the text & click save.  Now go check out your blog to make sure everything works!

How to Add Social Media Buttons in WP

Look at you!  You have Social Media Buttons on your blog!

Some of you were also asking how I made the Bloglovin’ button

To make the Bloglovin’ one, I used PicMonkey or Paint.  Matching the color is easier in Paint, but there are lots of pretty free fonts in PicMonkey.  Either way, import one of the existing buttons.  Then create a circle (or shape) over the existing icon in the same color as the background, so that you have a blank circle, like so

Blank Mint Button

Next add the script.  I simply added a “B” in a font and size that I liked & then I added a heart separately   Make sure your text color is white and not the same as your background color!  Here are two different Bloglovin’ buttons I created.  The one on the left with Paint and the one on the right with PicMonkey.  I think you can see that the one on the right’s color is slightly off – nothing serious, but unlike in paint, there’s no paint dropper tool to use to match the color (or if there is I can’t find it!).

Bloglovin Social Media Icon Option 2 Bloglovin Social Media Icon

I hope you found this to be an easy way to add buttons to your blog!  Let me know if you have any questions.  Disclaimer: I have no idea what I’m doing, I’m just sharing what worked for me!

Linking up here:

https://i0.wp.com/tatertotsandjello.com/wp-content/uploads/2011/09/weekend-wrapup-button150.png

Advertisements

5 thoughts on “How To Add Social Media Buttons to WordPress

  1. Thank you, thank you, thank you!!! I have tried tons of tutorials and none have been as simple and easy as this one! Thanks again for sharing!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s