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.

Simple Subscription Icons 

In the sidebar 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  Decide which social networks

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 is the 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;">
<!-- PUT THINGS IN HERE-->
</div>

From the  sections 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 <!-- PUT THINGS IN HERE--> is.

Notice that I've shown you what each block of code is for by using comments at the start and end, like this:   <!-- THIS IS THE CODE FOR FACEBOOK-->       The <!--     and -->    are the way to say "ignore what's in between here" in HTML.

For each service that you want to show a subscription button for, replace

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

<!--  THIS IS THE CODE FOR GOOGLE+ -->
<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>
<!--  END OF  THE CODE FOR GOOGLE+ -->

<!-- THIS IS THE CODE FOR FACEBOOK--><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>
<!-- END OF THE CODE FOR FACEBOOK--> 

<!-- THIS IS THE CODE FOR YOUR RSS FEED--><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>
<!--  END OF THE CODE FOR YOUR RSS FEED-->

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

<!-- THIS IS THE CODE FOR YOU-TUBE  --><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>
<!-- END OF THE CODE FOR YOU-TUBE -->

<!-- THIS IS THE CODE FOR PINTEREST --> <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>
<!-- END OF THE CODE FOR PINTEREST-->

<!-- THIS IS THE CODE FOR A LINKED-IN PERSONAL PROFILE--><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>
<!--  END OF THE CODE FOR LINKED-IN-->
</div>

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".

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:

<!-- THIS IS THE CODE FOR A WHATEVER -->
<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>
<!--  END OF THE CODE FOR WHATEVER-IN-->

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

1. Opening comment
2. A href statement = the address of what is being subscribed to
3. The image address, 
4. Style commands for the image
5. 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.

Adding more social networks

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

1. Make an account to follow
2. Get an icon-shaped (ie square) image to represent it
3. Add a block to the code, with the "follow-me" code from the relevant service in it.
4. 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.

---

Related Articles:

Linking your blog to the social networks

An introduction to Picasa and Picasa-web-albums

File-hosting options

Adding a Follow-me-on-Twitter button