Custom Social Media Icons

Social media has changed the way we live. Finding old friends via Facebook, reading a feed on Twitter from a favorite college professor, scanning photos uploaded by those with similar interests via Instagram: It’s how we stay connected to one another. While having so much instant information at our fingertips isn’t always healthy for us, I do admit I Facebook stalk my sons or I might not have a clue what they are up to.

As I mosey along through other people’s blogs, I’m always looking for ways I can better my own, one of those little details being social media buttons. I like to mess around with simple graphics programs and realized there was no reason I couldn’t make my own. There is something you need to know about me: I am not technically savvy. In fact, I’m pretty much computer-illiterate unless there are detailed instructions for what I want to do. Having said that, I spent quite a bit of time googling for help specifically for WordPress.com users. While some instructions seemed easy, others involved too much technical talk. Plus I’m a very visual person so pictures would have been of great benefit. But after some trial and error, I was able to figure it out even though I probably went about things the hard way. This tutorial may be a bit juvenile but sometimes simple step-by-step instructions are the best.

  • Find which image you want to use for your icon and add it to your media file. Before I go any further with this, most social media sites want the integrity of their logo maintained. I have seen some really sweet icons on the web but they don’t look a thing like the actual image. Personally, I don’t care, I just created what I felt was best for me. If you google whichever site image you are after, you’ll have myriads of options to copy and save. I wanted all of mine to be the same size and style so I actually created a file on my Iphone, moved all the apps into that file, took a screen shot and emailed it to myself.

photo

  • I opened the file in a graphics program and cropped all the icons out, put them onto a solid background and used an edge detail to just give them some unique character, then saved them to the size I wanted. Again, you can use whatever image works for you (I’m using my Pinterest account for the majority of this tutorial).

pinicon2

  • I needed to find the right “follow button” for Pinterest which included the necessary html code for my account. For Pinterest it’s in a section called “Goodies.” I copied the smallest icon code but it doesn’t matter as you will be removing the imaging code.
Screen shot 2013-01-28 at 9.45.58 AM
  • Open a “New Post” page. At the top of the editor are two tabs: Visual and Text. Click on the Text tab. When the page is open, paste in the html code. For my Pinterest account it looks like this:

html

  • Here’s where you’ll need to remove the code which pertains to the image and this step is not difficult at all. Just take everything off after the first /”

edit1

editTo add your image to the link, put your cursor at the end of the code and click the Add Media button where you can choose the image you saved previously  (don’t switch out of the Text mode – the image needs to be added in as html code).

edit2

  • There are two small pieces of code that will still need removed. It’s back where you put the cursor to add the new image and will consist of <a Highlight and remove them.

edit3

  • Now click Preview and see if your image comes up. You should also be able to click on the icon and have it link to your social site. FYI if it doesn’t link you may also have an extra space after the <a that needs removed. Beyond that, you should be good to go.
  • Once you are sure your icon works, copy it and open your widget section. One of the widgets is a Text widget for plain html. If you paste your new image link code into the box and hit Save Widget, it should work exactly the same as when you previewed your text as a post. I also used this same process for icons that didn’t include ready-made web buttons. I added the html code for the name of the site (ie, href=”http://Instagram.com/beckypickre/, added my image code as previously discussed, removed the extra <a and they linked right up).
  • I grouped my social media icons by putting all four on the same widget as opposed to adding four individual text widgets.

Screen shot 2013-01-28 at 11.16.05 AM

followme

I’ve enjoyed playing around with the icons, so after I finished this post I went back and made some more just for the heck of it which proves just how easy it is. I hope this gives you ideas to create social media links that are uniquely yours.

491px-Heart_icon_red_hollow.svgBecky

I appreciate your feedback.

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

Basic HTML is allowed. Your email address will not be published.

Subscribe to this comment feed via RSS

%d bloggers like this: