Six simple subscription buttons for Blogger

This article shows how to make a very simple row of subscription buttons, using image files that you host yourself.

In the sidebar or header of my blogs, there is a very simple set of subscription buttons. Visitors can use them to sign up to follow me (ie my blog's account) on Facebook, Twitter, RSS, LinkedIn, PInterest, etc.

These buttons don't fly-in, hover, shine, zoom, slide, pop out of egg-shells, sing songs or wash the dishes. [tweet this]

They don't take up any more space than is absolutely necessary. They don't spend load time calculating how many followers you have.

But they work.

This article is in response to a reader, who asked how to make a similar set of sign-up buttons for himself. It's a little longer than some similar articles, because I wanted to give enough detail so you understand what needs to be done, and why.

How to make simple subscription icons for your blog:

1 Choose which social networks you want buttons for

You need to consider which of the social networking services you want to use to promote this blog. Some people will say "all of them", but this isn't a great idea - it can take a lot of time, and if your blog's target audience aren't using a network, then you don't need to be there either.

So, make a list of the services you want to offer a follow-option for, and make sure that you have an account there for your visitors to subscribe to. This may be a personal account or a business / group / community / entity-page, all that matters is that you know how to refer to the account you want to offer a subscription too.

Some of the common ones are:

Facebook
Twitter
RSS
Google+
LinkedIn
YouTube
Pinterest

Remember, these icons are for inviting your readers to follow your "social media outpost" on the other network: for them to be useful, you need to be regularly posting on the networks you offer.

2 Get image files

The image file for each button you use needs to come from somewhere. Some social networks provide it for you, and are happy to provide a copy each time your blog loads their subscription button.

But others don't. For them, you need to make your own copy of the icon image-file that you need for the services you've chosen.

Google+, Feedburner and Twitter provide images, so you don't need to organise files for them yourself.

You are welcome to borrow the files shown below, which I've borrowed from elsewhere, I believe legally. If you want to use one of these files,

right-click on the picture shown here,
save the target somewhere
upload it to the file-host of your choice (I recommend Picasa-web-albums)
and keep a note on the picture's URL wherever you loaded it to.

You can also use your own image files. It doesn't matter if they are larger that mine, because the code re-sizes them. But for it to work properly, they need to be square, ie the same height and width.

Whatever icons you decided to use, you need to upload them to an image-host: I use Picasa-web-albums (ref What is Picasa?), but you may prefer a different picture-file host,

Make sure that you can find out the URL for each image.

Why this approach? Many people offering gadgets like this just let your blog link to their own copy of the images. But I don't like this - because if I ever move the file, your gadget will fail. I think you need to have and use your own copy, so I'm not responsible for your buttons working years in to the future.

3 Customize the gadget code

This has three stages.

First, get this basic code for the gadget bar. Copy this into a text-editor (eg Notepad)

<div style="clear:both; text-align: left; float: left; padding-bottom: 10px;">

</div>

Second, from the section below, copy the code for the services that you want, and paste it into the area between the <div> start and end statements, ie where  is in the basic gadget-bar code.

Notice that I've shown you what each block of code is for by using comments at the start and end, like this:  The  are the way to say "ignore what's in between here" in HTML.


<a href="https://plus.google.com/YOUR-GOOGLE-PLUS-ID?prsrc=3" style="text-decoration:none;">
<img src="https://ssl.gstatic.com/images/icons/gplus-32.png" alt="Subscribe to YOUR-BLOG-NAME on Google +" style="border:0;width:32px;height:32px; margin-left:5px; margin-right:5px;"/>
</a>

<a href="https://www.facebook.com/YOUR-FACEBOOK-NAME" imageanchor="1">
<img src="URL FOR THE FACEBOOK ICON" alt="Follow me on Facebook" style="border:0;width:32px;height:32px; margin-left:5px; margin-right:5px;"/>
</a>

<a href="<b>YOUR FEED ADDRESS</b>" rel="alternate" type="application/rss+xml">
<img src="http://www.feedburner.com/fb/images/pub/feed-icon32x32.png" alt="RSS subscription icon" style="border:0;width:33px;height:33px; margin-left:5px; margin-right:5px;"/>
</a>

<a href="http://www.twitter.com/YOUR-TWITTER-ACCOUNT-NAME">
<img alt="Follow <b>YOUR-TWITTER-ACCOUNT-NAME</b> on Twitter" src="http://twitter-badges.s3.amazonaws.com/t_logo-a.png" style="border: 0; height: 33px; margin-left: 5px; margin-right: 5px; width: 33px;" />
</a>

<a href=" http://www.youtube.com/user/YOUR-CHANNEL-ID">
<img src="YOUR YOU-TUBE IMAGE LOCATION" alt="Follow YOUR-CHANNEL-ID on YouTube" style="border:0;width:33px;height:33px; margin-left:5px; margin-right:5px;" />
</a>

 <a href="http://pinterest.com/YOUR-PINTEREST-ACCOUNT-NAME/">
<img src="http://passets-cdn.pinterest.com/images/about/buttons/big-p-button.png" style="border:0;width:33px;height:33px; margin-left:5px; margin-right:5px;"alt="Follow Me on Pinterest" />
</a>

<a href="http://www.linkedin.com/in/YOUR-LINKEDIN-PROFILE-NAME/">
<img src="YOUR-LINKEDIN-PICTURE-URL" style="border:0;width:33px;height:33px; margin-left:5px; margin-right:5px;" alt="Follow Me on LinkedIn" />
</a>

</div>

Third, customize this code with your own details. For each service that you want to show a subscription button for, replace

The account name that you want your readers to subscribe to
Any other items in UPPER-CASE (eg Twitter's "via" parameter)
The URL for the button image (if necessary)

4 Add the gadget

Add a gadget to your blog in the usual way: The type of gadget to use is HTML/Javascript.
Put the customised code that you made into the Contents field.
Choose whether to give it a title ("subscribe" works with techy audiences, but in other niches phrases like "follow-up" or "get free updates" are better).
Choose where to put it:
If the space that you have available is too narrow, you may like to tweak the code - see below for more on this.
After you've saved the gadget, test all the buttons to make sure that they all work they way they should

5 Back up the gadget code

Blogger doesn't have any way for us to back up the settings inside our gadgets.

And it's very easy to either accidentally delete the whole gadget, or lose the code becasue you try to change it and make an error: if the HTML-gadget editor sees an error in your code, it doesn't tell you about the problem, it just deletes the code that it does not understand.

Because of this, I very strongly recommend that you keep a backup copy of the code

Some people use a text file for this. Personally, I usually keep it in a post in the private documentation blog that I keep for each of my main blogs. Either way, it's important to keep it up to date as you do "tweaks".

Job done: You should now have a working set of simple-subscription-buttons on your blog. But you do still have some options for tweaking the button size and position, as explained below.

Adjusting the button sizing and spaces

Depending on the width of your sidebar, and the margins inside any button-pictures that you use, you may want to tweak the code a little. This is easy enough to do. Notice the structure of each piece of button code:

<a href="THE URL TO SUBSCRIBE TO">
<img src="THE IMAGE LOCATION"
style="border:0;width:33px;height:33px; margin-left:5px; margin-right:5px;"
alt="Follow Me on LinkedIn" />
</a>

I've put a few line breaks in, so you can see that there is

Opening comment
A href statement = the address of what is being subscribed to
The image address,
Style commands for the image
alt-text (the latter is read out to visually-impaired people)

To change the size or position of the icon, or the space between then, just change the values in the Style commands, ie inside style="border:0;width:33px; height:33px; margin-left:5px; margin-right:5px;

Make sure that you don't accidentally remove either of:

The semi-colon character ( ; ) which needs to be at the end of each statement
The full-colon character ( : ) which is in between the name of the thing you are changing and the value.

Adding more social networks

To add new services to this, you just need to follow the same process, ie

Make an account to follow
Get an icon-shaped (ie square) image to represent it
Add a block to the code, with the "follow-me" code from the relevant service in it.
Post regularly to the account you made (or else there's no point in asking people to follow you there.

Are there any other social networks or subscription options that you'd like me to add to the list above? Let me know, and I'll see if I can figure out the code for you.

Linking your blog to the social networks

Getting started with SEO for Blogger-users

An introduction to Picasa and Picasa-web-albums

File-hosting options

Adding a Follow-me-on-Twitter button

blog

Monday, May 14, 2012