You have custom social media buttons for your readers to follow you, but what if you want custom social media buttons for your readers to share your content? I was looking at Vintage Revivals and saw that she has custom share buttons at the bottom of all her posts. I wanted some of my own so I set to work figuring it out. I’m not really what you would call “computer savvy” but this is what worked for me and hopefully it can help you too. The first thing that I did was design what I wanted it to look like. I used Picmonkey.com because it’s free. Do you need some social media icons? Check out this post by Ashton at Something Swanky to get your own social media silhouettes. She also shows you how to edit them in Picmonkey. Win!
I sized it to fit in my blog. I used 780 px wide. The height isn’t important. It’s important that you size it for your blog, so be sure you know how big your post area is. Then I cropped it into sections and saved them all as PNG files. In Picmonkey you can crop and save an image and then press the undo button and it will un-crop it and take you back to your full design. Super helpful. My design is 6 separate images.
My call to action image (780 x 118 px):
My Pinterest image (195 x 158 px): My Facebook image (195 x 158 px):
My Google+ image (195 x 158 px):
My Twitter image (195 x 158 px):
And my reminder to follow me on social media image (780 x 68 px):
Once I had all my images it was time to upload them to the internet. You can do this with any site that will give them an URL (ie photobucket). I just upload mine to a private blog post so they are being hosted by my blog.
So you have the URLs for the images that you want. Now what? Now comes the coding. Don’t worry. It’s easy. I am not a code person. So if I can do it, anyone can do it.
PLAIN IMAGE (No links)
<img src="YOUR+IMAGE+URL" border="0" width="auto" height="auto" nopin = "nopin"/>
php echo urlencode("Look how amazing this is! "); ?>" title="Share this article on Twitter" target="_blank">
MAPPED IMAGE (Image with links)
Ashton has another super helpful tutorial on how to map your images here.
You just hover over the code and a gray box will drop down. Then you can click on the copy icon to copy the code. Change out all the capitalized text for your information. Next you want to make sure that all your image codes have: width=”auto” height=”auto” nopin=”nopin” This will automatically adjust the sizes of the images based on the size of the window they are being viewed in. The nopin code will keep it from coming up when the Pinterest button is clicked. We don’t want people pinning the share buttons.
Now go to: Appearance > Editor > Single Post (single.php)
It’s a good idea to copy and paste this existing code into another document BEFORE you change anything. That way if you mess it up you can simply replace the original code. By placing it in the Single Post coding it will only appear on each individual blog post. If you want it to appear on every page as well as post you can add it to the Content.php
The way my code looks is:
Call to action image
<center>Pinterest Facebook Twitter Google+</center>
Follow Me mapped image code
Depending on where you put it in your page code that will determine where on the page your links will show up. If you want it at the top place it around where it says “header” and if you want it at the bottom place it around where it says “footer”. You can always move it if you don’t like where it’s at. Hopefully this helps you create your own custom social media share buttons. And you don’t have to spent hours and hours on it like I did trying to figure it out.
* * * * * * * * * * Remember SAVE SAVE SAVE your code BEFORE you alter it! * * * * * * * * * *
You are welcome to use the images I have provided in this post for your blog if you would like. I would love to see what you do with this tutorial. Please leave a comment with a link to your blog so I can check it out!
Think this post was awesome? Be sure to share it using my custom social media share buttons below!