Showing posts with label Following. Show all posts

Monday, May 14, 2012

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

Tuesday, May 3, 2011

The "follow by email" gadget: an easy way to add an email subscription to your blog

Blogger have made it very simple to offer an email-subscription to your blog, with the new "Follow by Email" gadget. This article describes adding it to your blog, and how it works for your readers.

Previously, I've explained why RSS is important for your blog, and how to give your blog a subscribe by email option using Feedburner.

The Follow by Email gadget that Blogger provide makes this even easier: you can add an email subscription option to your blog by following these steps:

How to add the Follow by Email Gadget

Log in to Blogger
Use a Google account with admin rights to the blog, and which you want to use to get statistics about your email subscribers.
Go to the Design tab
Select Add a Gadget in the area where you want to put the email subscription option
Choose Follow by Email (it's current at the top of the list)
Enter the title that you want displayed on your blog (initially it's "Follow by email")
Press Save.

This puts the gadget onto your blog. But there are two more things that you should do:

Check that your blog's RSS feed is enabled: it should be either "Full" or "Until Jump Break", not "None". You need to do this because the Follow-by-email tool will only send out emails if your feed is turned on.

Subscribe to it yourself- by entering your own email.
This isn't absolutely essential - the tool works even if you're not signed up to it. But it's a good idea to try to see your blog from the reader's perspective.
And some items in your posts (eg slideshows or PowerPoint presentations) may not work as expected in the emailed version - and you won't know about it unless you're getting the emails.

What your readers see:

On Your Blog:

The Follow by Email gadget looks like this:

The title was set when you were adding the gadget: you can change it by editing the gadget in the usual way.

The background colour, button colour, title underline and font are based on the settings for your template: you can only control them by editing the gadget colours in your template.

You cannot put text immediately before our after the place where people can enter an email address: though you could put a text-gadget before or after the Follow-by-email gadget.

When they enter an email address:

When your visitor enters an email address and presses Submit, a new window opens:

This window:

Welcomes them to Feedburner
Acknowledges their Google account, if they are logged in at the time - remember, not all your visitors will be Google users
Tells them about the feed that they are asking to subscribe to
Warns them that a confirmation message will be sent to the email address they entered
"will receive a verification message once you submit this form" and that "FeedBurner activates your subscription to ... once you respond to this verification message"
Asks them to solve a text-catpcha puzzle, to prove it's a real person (not a computer) setting up the subscription.

The colours, design and content of this window are totally controlled by Feedburner. You can't influence them in any way.

After the anti-spam-test is successfully completed, a second screen opens. This tells the reader that

Your request has been accepted! Please check your inbox for a verification message from “FeedBurner Email Subscriptions”, the service that delivers email subscriptions for <<your-blog-name>>. You will need to click a link listed in this message to activate your subscription. If you dont see a confirmation e-mail in a reasonable amount of time please check your bulk/spam folder.

Again, you have no control over the color, format or placement of this window, it is totally up to Feedburner. You also don't control the message text, which many people are likely to ignore.

In their email in-box, today:

Your potential subscriber gets an email from Feedburner, usually within 2-10 minutes, asking them to click a link to complete the subscription process.

If they click the link, they become a verified subscriber.

If they don't click the link, then they stay on the subscribers list as unverified.

You can customize the "click the link to subscribe" message, using some fairly simply settings in Feedburner.

In their email in-box, when you post:

On days when you have posted to your blog, every verified subscriber is sent one email message, with all your posts during the day.

The message may include the full post or just a summary, depending on what settings you have for your blog's RSS feed (Settings > Site Feed > Blog Posts feed).

Feedburner provides a number of options for controling how this email looks, and when it is sent: see the Publicize > Email Subscriptions > Email branding tab in Feedburner for these. (full article coming soon).

More information about the gadget:

This new gadget has been widely requested, and is an exciting addition to Blogger. But there are some challenges with it, which are discussed in Understanding the Follow-by-Email gadget.

Why RSS is important for your blog,

An alternative to "Follow-by-email": giving your blog a subscribe by email option using Feedburner.

Customizing Feedburners verification message

Putting a Picasa slideshow into a blog-post

Showing a PowerPoint presentation in your blog, as a slideshow

Understanding the Follow-by-Email gadget and Feedburner

The Follow-by-email gadget is built on top of Feedburner's email-subscription service. It's very easy to add to your blog, but there are some things that you need to think about if you are using it to deliver posts to your followers by email.

Adding the "Follow by Email" gadget

The Follow-by-Email gadget is a very simple way to give your readers access to blog-updates by email: it delivers a message in their inbox every day that you post.

But to decide if it's a good thing to use, to get good value from it, and to troubleshoot any problems, you need to understand a little more about how it works.

And, since it uses Feedburner, this means understanding how Feedburner works.

What is Feedburner:

The Follow by Email gadget uses a product called Feedburner to manage the list of subscribers.
This started as a tool to enhance the RSS subscribtions that website-owners delivered - see Why RSS / Subscribe to Posts is important for your blog for info about RSS. Very roughly speaking, every time a website publishes a new item, Feedburner adds that item to a "feed" or summary of the site, and tells all the subscribers about it, without the subscribers having to visit the website.

One option that Feedburner added was subscribe-by-email: website owners who use Feedburner for this have to turn the service on, and then put "something" on their website that offers the service to people who want to get emailed updates. To start with, Feedburner just kept a list of emails addresses, but now it's more sophisticated and checking with addresses that they really do want to be subscribed before adding them to the list, and offers un-subscribe option with each subscription email.

Adding the follow-by-email option to your blog sets this up for you: it sets up a feed, turns the email service "on", and puts an email-capturing box onto your blog.

What is set up when you add the gadget:

You put the Follow-by-email gadget onto your blog the same way you would add any other gadget.

This means that, you are logged in to a Google account at the time.

If that Google account already owns an entry (ie a "feed") in Feedburner for the blog you're adding the gadget to, then the gadget just uses this feed.

But if the Google account doesn't currently have an entry from the blog, then a new feed is created, and the email service is turned on for it.:

The Feed Title is based on the blog's name.
The feed address appears to be fairly random (eg I created one for a blog called "Another test blog", and the feed name is http://feeds.feedburner.com/blogspot/meaUW

Advantages of the Follow-by-email gadget:

This gadget makes it a lot easier to offer a follow-by-email option: you don't have to set up the feed yourself, or use a HTML-gadget to provide a subscribe-by-email form.

And because it uses Feedburner, you have full access to Feedburner's statistics, and a number of other things that are included in Feedburner's features, including:

Customizing the "click the link to subscribe" message,
Getting a list of all your email subscribers (verified and unverified), and
Configuring the look-and-feel (including timing and from-address) of the daily email to your follow-by-emailers.

Disadvantages of the Follow-by-email gadget:

There are some disadvantages of both the gadget, and the approach that Blogger has used to implement it:

Google / Blogger have mixed up the words "subscribers" and "followers". It used to be that subscribers used RSS gadgets (from Feedburner or other feed-providers), and followers used Blogger's own following-tools. But this new gadget is called "follow-by-email", and it's possible that mixing up the ideas will make some people very confused.

Using the gadget, you have very little control over the look and feel of the follow-by-email option on your blog.

Compare this to the "Get updates by email" option which is in the top of the sidebar on this blog: I've put a lot of effort into getting the wording "just right" so potential subscribers know that they will be getting a please-confirm email. This on-screen wording means that even if they don't act on the email immediately, they get another reminder about if they come back to the blog again in the future.
You have no control over the message that potential follow-by-emailers are shown to tell them to verify their subscription. It looks like this

While this message is fine for the tech-minded people who are likely subscribe to an RSS feed, it will probably bring a glazed look to those of your visitors who need a very simple subscribe-by-email option!

People who follow your blog by email will not be included in your Followers gadget or count - though you can use the Feedcount button to show how many subscribers your blog has.

People who subscribe to your blog by email don't see any of the widgets on your blog, or any advertisements. (Unlike regular RSS-feed subscribers for whom you can set up AdSense for feeds). Despite the options mentioned above, ou have very little control over how they see your messages, especially if they happen to be using email software that shows your messages in plain text.

blog