Create customized Social Media Buttons

I’m totally stoked to share this post cause I spent so much of my time trying to find the look I wanted for my social media buttons that I finally decided to research how to create your own.  I love technology and the vast info that’s at our disposal.  I can rule the world basically, cause I’m sure there’s a “how to” for that!  But in this post I will help you create customized social media buttons for your own site.

Facebook, Twitter, Instagram, and many others have standard buttons for us to “share” if you are wanting readers to “follow” thru various social medias on your site. It helps generate more traffic and new readers, which is a good thing!

BUT wouldn’t you like to have “custom” buttons that reflect your theme?  When I searched around, which seemed like forever, and couldn’t find what I wanted, I decided to make my own.  You can see and click on my right side toolbar to check mine out! 

I created a little tutorial because I wanted to save you some time and because if I can do this- so can you!

Let me start with…

I’m NOT an expert!  But with tweaking and research, I came up with some cute buttons for my site and I thought I’d share the “how-to’s” with you.

My host is WordPress but Blogger was my first host, so I know that the format is pretty similar and this should work for both.

We’ll be using a facebook button as the example. (This is handy if you have a “facebook page” for your blog or site.)

• You want to create a button that will compliment your site. You do that by using a photo editing program.  I used picmonkey to create my look and design. (If you don’t have an account, you can still use the “free” version.) Once you do that and have the right look, size, and color, you want to save it for uploading later. (My buttons are 40×40!)
• Go to http://www.facebook.com/badges and click the one that identifies the page and look you want to create a button for. (If you have more than one page, they will all show up on that page.)
• Copy and paste the code on a word doc.  I did this in case I messed up or wanted to change some things on it. Plus, that way you can just start over again if you screw up!
• The coding is your custom “facebook page” widget for YOUR site.  But it’s for a basic facebook button. The information after the “SRC=” area is what you are looking to replace. But you will need to remove parts of the code that are exclusively facebook. So I have scratched that coding that is no longer needed, (see below). *I’ve done the same for a portion of the tinypic code that you will no longer need as well!
• Go to a photo uploading site. I use TinyPic it’s easy and I use it quite a bit for my blog.   First, be sure you’re on the upload tab.  Now upload the image you created earlier on picmonkey. (I “tag” it for easy referencing later).   Once you upload it you will see many options to copy. You want to choose the “HTML for websites” code. COPY it and paste it below the facebook code on your word doc.

You should now have something similar to this on your word doc: *remember I’ve crossed out the portion you won’t need anymore!

 Facebook code:

<a href=”https://www.facebook.com/gullycreekcottage” target=”_TOP”

title=”Gully Creek Cottage”><img src=

“https://badge.facebook.com/badge/1478806535670683.11108.176878494.png

” style=”border: 0px;” />

_TOP” style=”font-family: “lucida grande”,tahoma,verdana,arial,

sans-serif; font-size: 11px; font-variant: normal;

font-style: normal; font-weight: normal; color: #3B5998; text-decoration: none;

” title=”Make your own badge!”>Promote Your Page Too</a><!– Facebook Badge END –>

Tinypic code: (My HTML Code)

<img src=”https://www.gullycreekcottage.com/wp-admin//wp-admin//wp-content/uploads/2014/05/2wh4dwn.jpg” border=”0″ alt=”Image and video hosting by TinyPic”></a>

Facebook now want’s you to replace their code AFTER the **SCR=** and add the part of your tinypic code.

Once you combine both codes, your Final Coding should LOOK like this: 

<img src=” https://www.gullycreekcottage.com/wp-admin//wp-admin//wp-content/uploads/2014/05/2wh4dwn.jpg” border=”0″ alt=”Image and video hosting by TinyPic”></a>

• Now take that completed code and put it in a text widget and that’s it!

It’s a little time consuming…but totally worth it!

Don’t leave out any other words, numbers, or abbreviations. Any changes to the rest of the format might mess you up and it might not work. (That’s why it’s good to have the word doc to play with.)

Remember I use WordPress but this should work in any text widget area. You might want to do some research with your platform for further directions in case your host might have a different format.

I hope you find this info helpful~