DIY Social Media Buttons

Today, I want to talk about social media buttons.  I've written about social media buttons before, but I thought it was time for a little refresher since that was several years ago and I have been using a different style of button more recently.

Social media buttons and/or subscription buttons are important because:


1. They make it simple for people to find a way to follow your blog.

2. They make it easy for people to find you other places on the web.


If you want to connect social media accounts like Instagram, Twitter, or Facebook to your blog, social media buttons are a must.  And if you don't want to have social media accounts associated with your blog - it is still helpful to have buttons that make it easier for people to subscribe or contact you (like a Bloglovin button, a button for your feed, and a mail button).

So if you are a blog design DIY-er (like moi), how do you create those cute little social media buttons that line up in your sidebar?  It's actually really simple once you know how to do it!

Diysocialmediabuttons


1. You need to start out with some images to use for your social media buttons.  These usually include the appropriate social media or subscription icons, and they should all be the same size (or really close).


Hint: If you are creating your own icon images and want them to look like the icons are laying flat against your background, either make sure the background of the image is the same color as your blog background (most commonly white), or put your shapes against a transparent background and save as a .PNG.  (.PNG files keep the transparency when you put them on your blog).


2.  Get them sized the way you want.  If you want them to line up in your sidebar, you need to make sure they are sized so that they will all fit - my sidebar right now is 360 pixels wide, and I have seven social media icons - I have my icons sized to 35 pixels wide each to ensure they all fit with plenty of space.  I might be able to get away with 45 pixels, but 50 pixels would probably be cutting it too close because Blogger likes to put a buffer space on each side - so if I did 50 pixels Blogger might push one of them into a second row.  You'll have to experiment with the sizing a little bit depending on your sidebar width.


3.  Upload them to a photo hosting site.  I use Photobucket.


4. Find the direct URL for your images. This is what that looks like on Photobucket:


Directurl


5.  Plug the following info into this bit of button code:

<a href="url of your social media site" target="_blank"><img src="direct url of your social media button image" /></a>

Replace the red words with the appropriate URLs.  Make sure not to alter other parts of the code or it may not work!  You'll need to create a copy of this code for each individual social media button, with the appropriate URLs.

Hint: For a button that will open email, put mailto:youremailaddress where you would normally put your social media page link.  Obviously, inserting your email address in that space.

Hint, Hint: Go To Feedburner.com and set up your blog to get a url you can use for your RSS feed.  There are probably other ways to establish/find this URL, but that's just the way I did it.


6.  Next go to the Layout tab in your blog dashboard and create a new gadget.  Choose "HTML/Javascript" and then insert the codes into the gadget.


Addagadget

Htmljavascript


7.  When you insert the codes you created, make sure there are no spaces between the end of one button code and the beginning of the next.  This will make them all line up in a row.


8.  Save and view your lovely new buttons!  I recommend going through and testing each one to make sure the links work.






Now the big question - where do you get social media button images?


Option 1: If you have Photoshop Elements, it's pretty simple to create your own - you can save images of the logos for each of the social media sites to your computer, open them in PSE and use the magic wand selector tool to "grab" the logo shapes and move them into your button images.

Selectortool


Option 2: There are certain fonts that look like specific social media icons.  Check out this Facebook font and this Twitter font.


Option 3: You can also create text buttons in Picmonkey, kind of like this:
Pinterestexample
I messed around with it a little bit and didn't see a good way to extract social media logos to use in Picmonkey, but this is a good alternative.


Option 4: The final option for getting social media icons is to search for free ones that you can use.  Which leads me to a fun announcement . . .

I'm posting my first blog design freebie today!

Here are some social media icons that I'm giving to all of you, for free!  I made these little heart icons in honor of Valentine's Day, since it's a week from today!






If hearts aren't your thing, I'm planning on creating more free social media buttons to include with future posts - so comment with any ideas you have and stay tuned!

These social media buttons are free for personal use or commercial use (crediting me isn't necessary, but appreciated).  They may not be redistributed or sold though, so don't even go there - please just send people back here to download for themselves if they would like to use them.


How To Use These Icons:


1. Save the image by clicking on the images above and then right-clicking and saving to your computer.


2. Pick the size you want to use (I've provided 35 pixel, 50 pixel, and 65 pixel buttons).

3. Crop each icon you want to use out of the whole image and save individually to your computer.  Just in case you haven't seen some of the symbols before, the buttons are for:

Facebook
Twitter
Email
Pinterest
Bloglovin'
Rss feed
Instagram

4.  Follow the above tutorial for turning the images into social media buttons for use on your blog!

These are .PNG images, so they should let whatever background color you have on your blog show through.  I'm including the color codes I used in case you want to use the color scheme other places on your blog.

Enjoy!
You may also like:
Meghan said...

It amazes me that you are so skilled with all of this stuff! Thank you so much for sharing such a clear tutorial. I love these!

© Through Clouded Glass. Design by MangoBlogs.