Updated January 22, 2016
Many people have asked me how to make a blog button. In this post we’ll talk about blog buttons, how they’ve changed, my top 2 blog button tips and how you can create one, or shareable graphics in general.
The history of blog buttons
Blog buttons used to be quite popular, especially before social media came on the scene (circa 2010; this post was originally published in May of 2010). They aren’t quite as common today, but you can still find them around the web. Here’s an example of Money Saving Mom’s blog button at the bottom of her sidebar.
The idea is, a visitor can copy the snippet of code in the box on the right, paste that code into their own site and the button (on the left) will automagically appear in their own site.
When to use blog buttons
Before social media, displaying someone’s blog button on your site was a way to show your support of that particular blog. Social media has now given site owners other ways of professing their like of other blogs and websites, via the Like button, favorites, hearts, etc.
Even though blog buttons as we knew them aren’t as common as they once were, the idea of providing a graphic for your visitors can come in handy. For example, perhaps you are running a promotion or launch of a product, or you want to provide graphics for your affiliates. That is one time you might provide that snippet of code so others can easily display your graphics on their sites.
Pros & cons of blog buttons
I do recommend always making your own graphics others can use when a graphic is called for. That way, it’s convenient for those who are promoting for you, but most importantly, you can keep your branding consistent.
Related: My Top Branding Tips
One thing to keep in mind, though, is that when you provide your own code for this purpose, you are hosting the image yourself. This means every time your graphic is loaded onto someone else’s website, your hosting server is being pinged. Depending on how much traffic that other site receives, that could be a lot of load on your server.
The other option would be to provide your own graphics, but instead of providing the snippet of code for others to use, encourage them to download your image and upload it to their own site as they would any other image. The benefit here is that they are hosting your image on their own server and not yours. Assuming your graphic isn’t huge in size, this shouldn’t be an issue for them. The con to this approach is that some people won’t go through the steps of doing it themselves. Copying and pasting code is quicker and easier.
Related: 10 Blog Design Dos & Don’ts
Let’s assume you want to create a graphic or button for others to use.
My 2 top blog button tips
- Make it interesting.
- Include a very clear call to action (or a very enticing title).
Instead of including just your logo or blog name, make your blog button something someone will want to click. Make it mean something. Be creative. Intrigue them.
Blog buttons and similar-sized ads are a dime a dozen these days. People like images, but they like images that speak to them and don’t just advertise something.
Make someone curious. Make them wonder what’s behind that button of yours. And make it super clear exactly what they should do next (like, include words like “Click Here”).
In short, make your blog button more than just, “Here’s the name of my site. The end.”
What size should your graphics be?
A common size for a blog button is 125 x 25 pixels. Other graphics come in all shapes and sizes and are used in various ways. For example, you may create graphics consistent with Google Adsense ad sizes for affiliate promos.
Just for reference, optimal image dimensions for various social media images vary and change. There are also many, many sizes for profile photos, cover photos and more. Here are the dimensions I am currently using for my basic graphic creation (w x h, in pixels):
- Pinterest: 735 x 1102
- Facebook: 1450 x 725
- Twitter: 1450 x 725
- Instagram: 1000 x 1000
- YouTube (thumbnail): 1280 x 720
Do you want a grab box too?
Once you make a button, you might want others to be able to grab your button and put it on their own site, in which case you’ll need a grab box along with your button. A grab box allows a visitor to copy the code in the grab box and paste it into their own site and your button shows automagically.
In order to do this you need to:
- Create an image, 125px by 125px in this case (which will be the button itself).
- Upload your image to your server.
- Create the code others will copy & paste to grab your button.
- Display your button & grab box on your own site (ready to be grabbed by others).
1. Create your graphic or button
To create your button, you can use either an existing image as your base, or you can start one from scratch.
Both provide templates & tools to help. You can also create an image with your own dimensions. For this tutorial, we’ll use 125 x 125. So, you would click the link that says “Use custom dimensions” and enter 125 by 125.
Next, design your button. I’m not going to go into the hows of design here. Canva’s Design School has a lot of tutorials as does a quick Google search.
In its most simple form, you’ll use the options on the left to upload a photo as your image background or choose a color for the background and then you’ll add text. (Remember my 2 tips above.)
Once your design is done, download it to your computer using the download option in the top right of your screen. You’ll want to publish as an image. It should automatically be downloaded to your computer. Make sure you rename it appropriately. I talked about naming your images here.
Now you’ve got your image.
2. Upload your image to your server
The easiest way to do this is to add your new image to your WordPress Media Library. Do this by going to Dashboard –> Media –> Add New.
Upload your image and take note of its URL.
To find its URL, go to Media –> Library. Click on the image. In the widow, you’ll see the image URL on the right. Copy that URL. The whole URL won’t be visible, so make sure you copy the whole thing.
It doesn’t matter a whole lot where your image is stored, as long as you know its URL.
3. Create the code others will copy & paste to grab your button
The basic code one will copy and paste to get your button to show up on their site looks like this (you will replace the bold with your own URLs).
Basically, it’s just the HTML for a clickable image.
- The <a href=”…”></a>” portion indicates a hyperlink and is the page you want someone to land on when they click your button. Make sure you don’t forget the closing tag (</a>) at the end!
- The <img src=”…”> identifies where the image is located so a browser (i.e. Firefox, Safari, Chrome, Internet Explorer…but I know you’re not using Internet Explorer, right??) knows where to find it in order to display it.
Make sense? If not, read my post How to Make a Clickable Image for more explanation.
4. Display your button & grab box on your site
Let’s put your button and a grab box in your sidebar for others to grab. You’ll do this by pasting the below code in a text widget.
To get to your widgets, from your Dashboard, go to Appearance–>Widgets. Click & drag the widget (box) that says “Text” into your sidebar (your sidebar options may be set up differently from mine in this photo but same idea):
The text widget should automatically pop open for you once you drag it into the sidebar. If it doesn’t click the little down arrow on the right side of it. At this point you’re ready to paste your code (below).
Related: How to Use WordPress Widgets
Putting the HTML code in a widget
The code you will paste into your text widget consists of two parts:
- Your image (on the left from Money Saving Mom’s image above).
- The grab box (on the right).
Highlight and copy the entire next paragraph into your text widget.
<img src=”YourButtonImageURL” alt=”YourSiteTitle” /><div style=”width: 125px; height: 125px; overflow: auto; border: 1px solid #666666;”><a href="YourSiteDomain" target="_blank"><img src="YourButtonImageURL" alt="YourSiteTitle" width="125" height="125" /></a></div>
Once it’s in there, you need to replace the text placeholders with your own information.
Below are examples of the replacements you will make in the above code. Do not touch or change any quotes or weird characters. Simply highlight the exact phrase as shown below and paste your information just like they are written here in my examples:
- YourButtonImageURL (2) = http://amylynnandrews.com/ex-button.jpg
- YourSiteTitle (2) = Amy Lynn Andrews
- YourSiteDomain (1) = AmyLynnAndrews.com
If you copy the code above, change the phrases as indicated and paste it into a widget but it doesn’t work, it could be that you are falling victim to smart quotes. (Feel free to google if you’d like. I’ll spare you the details.)
The bottom line is, it’s a bit of pain, but try this to make your code HTML-friendly:
- So you copied the above code.
- You pasted it into a text widget.
- Now, once you’ve pasted it in your widget, very carefully delete every quote (“) and re-type it. If you see double quotes, turn it into a single quote. I suggest doing them one at a time and in order. Be sure not to add any spaces or extra characters in the process.
- Save your widget.
- Your image and text box should appear. If not, delete the code, re-copy it and paste it into a text widget and try changing the quotes once again. (It’s easy to make a mistake.) (If it still doesn’t work, it’s probably all my fault. :))
Once it’s in your sidebar, people can simply copy all the code in the grab box, paste it into their site and your button will show up!
This post is part of Works for Me Wednesday.