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.
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:
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.
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,
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.
This has three stages.
First, get this basic code for the gadget bar. Copy this into a text-editor (eg Notepad)
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 <!-- PUT THINGS IN HERE--> 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: <!-- THIS IS THE CODE FOR FACEBOOK--> The <!-- and --> are the way to say "ignore what's in between here" in HTML.
Third, customize this code with your own details. For each service that you want to show a subscription button for, replace
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.
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.
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:
I've put a few line breaks in, so you can see that there is
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:
To add new services to this, you just need to follow the same process, ie
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
Read more > Six simple subscription buttons for Blogger
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:
- RSS
- Google+
- YouTube
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;">
<!-- PUT THINGS IN HERE-->
</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 <!-- PUT THINGS IN HERE--> 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: <!-- THIS IS THE CODE FOR FACEBOOK--> The <!-- and --> are the way to say "ignore what's in between here" in HTML.
<!-- 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 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>
<!-- 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>
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:
<!-- 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
- 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.
Related Articles:
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
