About two weeks ago, the WordPress.com team released a wonderful new tool called the Follow Button to all theirs WordPress.com users. This button is floating in the bottom-right corner of a blogs and let readers subscribing, by email, to the blog’s publications. Each time a new blog post is published, they receive an update in their inbox.

The idea is far from new, and may even looks like old-school. However, the implementation they did is simple, really well done and really clever. Also, the wording they used in the tool is perfect (for example, using the word Follow instead of Subscribe).

The only problem is that this wonderful new tool is only available for WordPress.com users! As you may know, this blog is using WordPress, but it is a self-hosted instance. After doing some research, I couldn’t find any plugins or methods to install it on my blog. Also, the email service under this user interface is built into WordPress.com. As last resort, I checked their Jetpack plugin, to see if it got added the Follow Button to it, but apparently they didn’t (it is probably too recent).

So, I was in a dilemma: I wanted this feature for my blog, I didn’t want to migrate everything to WordPress.com, and I didn’t had the time to write a plugin that does exactly this. So what I did is to take a few hours to hack my own Follow Button using what is already existing out there. In fact, I have been quite surprised to see how easy it turned out to be.

It as been as easy as installing the really good Subscribe2 plugin and to create the UI, from the original Follow Button using some HTML, CSS and JQuery code. After some re-wiring, I ended-up with my own self-hosted Follow Button.

This is what I want to share with you here, in this [raw]Hors Série[/raw] blog post. I am pretty sure that many self-hosted WordPress blogger will want it, so I took an additional hour to write and publish this blog post.

I did two additional “improvements” to the concept:

  1. I changed the icon to put some color in there. Not only to make it less dull, but also to bring a little bit mo attention to it.
  2. I also added a link to my RSS feed. To me, “Follow” is not just about emails, but it is also about other syndication mediums too. However, I kept the email as the first option to keep the spirit of the tool.

Finally, I didn’t want to hack any piece of code in WordPress nor in any other WordPress plugin. The only thing that we will modify is the theme, by adding some code to it. The current implementation could be improved by upgrading Subscriber2 for example, but I didn’t want people to have to do this to enable the Follow Button on their blog.

Step #1: Install Subscribe2

First thing first. The first thing you will have to do is to install the WordPress plugin that will enable your users to subscribe, and to manage their subscriptions, to your blog via emails. We are using the really good Subscribe2 WordPress Plugin that gives these features to your WordPress instance.

To install this plugin using WordPress’ automatic plugin installation system, follow these instructions. Read the plugin’s installation instruction if you want to do this the manual way:

  1. Log in to your WordPress blog and visit Plugins->Add New.
  2. Search for Subscribe2, click “Install Now” and then Activate the Plugin
  3. Click the “Settings” admin menu link, and select “Subscribe2”
  4. Configure the options to taste, including the email template and any categories which should be excluded from notification
  5. Click the “Tools” admin menu link, and select “Subscribers”
  6. Manually subscribe people as you see fit
  7. Create a WordPress Page to display the subscription form. When creating the page, you may click the “S2” button on the QuickBar to automatically insert the subscribe2 token. Or, if you prefer, you may manually insert the subscribe2 shortcode or token: [raw][subscribe2][/raw] or the HTML invisible Ensure the token is on a line by itself and that it has a blank line above and below. This token will automatically be replaced by dynamic subscription information and will display all forms and messages as necessary
  8. In the WordPress “Settings” area for Subscribe2 select the page name in the “Appearance” section that of the WordPress page created in step 7

On this blog, I called the page created at step #7: Follow. Once you are done installing the plugin, you can test it by visiting your Follow page and by entering your own email (one that is not attached to any user of your account is preferable) and by checking in your inbox if you receive a subscription notification. If you haven’t, you may want to take a look at this FAQ to debug any possible issue with your outgoing email service.

Step #2: Customize your Follow Page

This next step is optional. Since that the form generated by the Subscribe2 plugin is really minimalist, you may want to customize it a little bit, to change its design and to add some explanation in the page, to help your readers to understand what is going on. Take a look at my own Follow page to see what I did to customize that page.

Step #3: Add the Follow Button code in you theme

The third step is really what will morph the Subscribe2 plugin into the Follow Button. What we are doing here, is just to add the code, in your theme, to display the Follow Button.

The first thing you have to do, is to locate where the footer of the pages is generated in the theme. Open the theme folder of your blog: /../wordpress/wp-content/themes/mytheme/. Then you will have to open a few files to check where the </body> ending HTML tag is generated. The file where that code is generated really depends on how the theme got designed. You can do a search, within all the PHP files in that folder for the string “</body>“. This should give you the answer right away. Once you located that place, you are good to continue with the following instructions.

Important note: It is possible that your Theme doesn’t use jQuery by default. If it is the case, then you have to edit the header.php (or whatever the name of the file where the header of your blog is generated) of your theme, and add the following line in the <head>...</head> section of the page:

[cc lang=’html4strict’ line_numbers=’true’]

[raw][/raw]

[/cc]

If you don’t have jQuery loaded, a JavaScript error will be returned, and the panel will “freeze” in the webpage. Once you make sure that jQuery was loaded, do proceed with this code:

[cc lang=’html4strict’ line_numbers=’true’]
[raw]

Follow

Get every new post on this blog delivered to your Inbox.

Join get_var(“SELECT COUNT(id) FROM wp_subscribe2 WHERE active=’1′”); ?> other followers:

Or subscribe to the RSS feed by clicking on the counter:

[[ADD-YOUR-RSS-FEED-LINK-HERE]]

[/raw]
[/cc]

The only thing you have to do is to copy/paste that code above the </body> tag. Then, do the following three modifications to properly wire it in your blog:

  • At line #41, replace [[PATH-TO-THE-FAMFAM-ICON]]with the path of the asterisk_orange.png icon, on your blog
  • At line #211, replace [[PATH-TO-YOUR-FOLLOW-WORDPRESS-PAGE]] by the URL of your Follow page (the one you created when you installed Subscribe2)
  • At line #228, replace [[ADD-YOUR-RSS-FEED-LINK-HERE]] by the link to your RSS feed

You can get the free asterisk_orange.png icon image from the FamFamFam website. The only thing you have to do, is to download that image, and to put it in the folder you defined for [[PATH-TO-THE-FAMFAM-ICON]]. However, you can use whatever image that you prefer, that may better fit the design of your blog.

Step #4: Disable it For Mobile Devices

Some mobile devices may have issues displaying this floating window. Sometimes, the window may be floating in the middle of the device’s screen without folding-back in the bottom of the page. For this reason, you may want to disable (remove) this option if the user is using a mobile device to read your blog. You can easily disable it if the web server detects that a mobile devise is requesting the webpage by adding these two blocks of code.

First, copy and paste this first block of code above the code of the Follow button (before line #1):

[cc lang=’php’ line_numbers=’true’]
[raw]

[/raw]
[/cc]

Then copy and paste this second block of code below the code of the follow button (after line #231):

[cc lang=’php’ line_numbers=’true’]
[raw]

[/raw]
[/cc]

This code come from the Detect Mobile Browser project and is the best mobile device detection code I saw so far. What this code does, is not to include the Follow Button if the device that is requesting the webpage is a mobile device. Otherwise, the Follow Button is added to the HTML page.

Step #5: Test it!

If you are reading this step #5, it means that you finished to create your own, self-hosted, Follow Button!

Congratulation!

But the last thing that remains to be done, is to test it. Once you saved your file with the code above, just refresh any page of your blog. You should see appearing the Follow button on the bottom-right corner of your blog. If you click on it, you should see the form that let your readers subscribing to the system. If you add one of your emails, and click the subscribe button, you should get redirected to the Follow page. Finally you should receive a confirmation email that ask you to confirm your subscription by clicking on a link.

If all these steps properly works, it means that you are done and ready to provide that new functionality to the readers of your blog!

Conclusion

Even if this blog post is few pages long, I hope you found it easy to install and setup. If you have any question regarding this hack, don’t hesitate to ask them down there, in the comments section of this post. I will be happy to answer all of them.

Happy Hacking!

 

Translations

This blog post as been translated in Federico Bozo in Spanish. Other translations will be added to this section.

124 thoughts on “WordPress’s Follow Button for Non-WordPress.com Users”

  1. Frederick Giasson

    December 28, 2011 — 11:59 am

    Hi Jorge!

    Great to hear that! Looks pretty good to me.

    Thanks,

    Fred

    Reply

  2. Frederick Giasson

    December 28, 2011 — 12:10 pm

    Hi Dani!

    Well, it is still the same error that happens (“dialog()” not defined). There is probably a conflict somewhere with other pieces of your blog. Try to remember what changed on your blog between the time it was working, and the time it stopped working.

    Thanks,

    Fred

    Reply

  3. Frederick Giasson

    December 28, 2011 — 12:11 pm

    Hi Federico!

    Thanks for this translation and credits. I added it to a new “translations” section in this blog post so that people can easily find it.

    Take care,

    Fred

    Reply

  5. Chris

    January 2, 2012 — 3:29 am

    AWESOME solution!!!!

    Do you know if there is a solution for the WordPress Like button to be added to non-wordpress hosted blogs?

    Reply

  6. Frederick Giasson

    January 2, 2012 — 9:52 am

    Hi Chris!

    Unfortunately not. I never checked that feature on the hosted blogs.

    Thanks,

    Fred

    Reply

  7. Tom

    January 3, 2012 — 12:02 pm

    I have used this code on a few sites and found a small bug that I fixed and wanted to pass on to you. I am a css/browser compatibility expert, I did my battery test and found a problem with IE7 and IE8&IE9 running compatibility mode. The fix is three quick css changes.

    First – Add width the the whole container:
    #bit {
    bottom: -300px;
    font: 13px “Helvetica Neue”,sans-serif;
    position: fixed;
    right: 10px;
    z-index: 999999;
    width: 230px;
    }
    Second and Third, float the bitsubscribe element to the right and remove the top margin:
    #bitsubscribe {
    background: none repeat scroll 0 0 #464646;
    color: #FFFFFF;
    float: right;
    margin-top: 0;
    padding: 15px;
    width: 200px;
    }

    I also did some adjustments to fix the cutoff of the image. You can see my blog at http://www.murhost.com/blog to see how it works. I did not have the time to find out all the changes for this, so when I get a few minutes, I will look into that. I remember it has something to do with the padding and the font size.

    Wonderful post!

    Reply

  8. Henry

    January 3, 2012 — 8:01 pm

    Such a fantastic tutorial, just what I was looking for. Thank you

    Reply

  9. Henry

    January 3, 2012 — 8:03 pm

    Actually, could you go one step further and put Facebook and Twitter buttons in there alongside the RSS counter?

    Reply

  10. Frederick Giasson

    January 4, 2012 — 9:13 am

    Hi Tom!

    Great, thanks for this investigation. I made all the changes into this blog posts, so everything should be fine now.

    Take care,

    Fred

    Reply

  11. Frederick Giasson

    January 4, 2012 — 9:14 am

    Hi Henry!

    What you would have to do, is to go to these websites, find the code to add to your webpage, and add that code around line #227.

    Hope it helps!

    Thanks,

    Fred

    Reply

  12. Henry

    January 4, 2012 — 4:15 pm

    Thanks Frederick, it is fantastic that the feature is very flexible.

    @Tom – you’re cross browser tweaks solved my ie9 issue where the follow button didn’t pin tightly to the bottom of the window. So thank you!

    Reply

  13. Natalie (Fashion Intel)

    January 4, 2012 — 4:37 pm

    Hello Frederick!

    First let me say that your follow button is genius and I have already acquired so many new followers because of it. For that, I thank you.

    I have a question, hopefully it will be simple to solve. My follow button looks great on Firefox, but when I look at my blog in Chrome or Safari, my Follow button protrudes a bit higher than it should be thus revealing some of the text box. I really need to fix this and it looks a bit sloppy. Can you offer any tips? Here’s my site. http://www.fashionintel.com

    Best Wishes,
    Natalie

    Reply

  14. Frederick Giasson

    January 5, 2012 — 9:50 am

    Hi Natalie!

    Try changing line #4 (bottom: -300px;) by: bottom: -338px;

    Not sure it will fix the issue, and not sure this won’t create other issues with the other browsers. The problem is that the calculated height is not good with these browsers, and it seems to be affected by something in your theme. What would be needed here is to debug what is going on with your theme, and how it affects this situation with these browsers. This is something we can hardly with these comments on that blogpost I feat 😐

    Hope this point-out will helps

    Take care,

    Fred

    Reply

  15. Frederick Giasson

    January 5, 2012 — 9:52 am

    Nathalie, I forgot to say: yes it is genius, but it is not “my” follow button 🙂 This has been created by the WordPress.com team, and I simply adapted it for non-wodpress.com hosted blogs 🙂

    Just to make sure to have facts right!

    Reply

  16. Henry

    January 5, 2012 — 10:03 am

    @Natalie,

    I’d love for mine to look the same in all browsers too. visit http://www.thirstcard.co.uk and you’ll see in IE9 that there is hardly any top or bottom padding yet in Chrome and Firefox you’ll see that it is nicely padding out.

    Reply

  17. Henry

    January 5, 2012 — 1:31 pm

    again @Natalie,

    Try taking out the “via bloglovin” button and see if that works. Then try taking out the RSS button and if that doesn’t work try taking out the rest of the elements one by one. It will be tedious but you’ll be able to pin down what is causing the protruding box.

    Reply

  18. Jan Willhaus

    January 18, 2012 — 7:27 am

    Thanks for this great tutorial! Though I got one complaint: The css3-attributes you added for the gradients on the button only work on Mozilla-browsers. In Safari and Chrome they don’t look really nice (even here on your own blog, as seen here: http://cl.ly/DQVh ).
    So I added some css3-attributes for webkit to enable better compatibility on my own site ( http://janwillhaus.de ) You maybe wanna add some of those for your site, too! 🙂

    Reply

  19. Frederick Giasson

    January 18, 2012 — 4:55 pm

    Hi Jan!

    Great! However, could you tell us what you added and were in the CSS? Then I will simply update the blog post according to these changes.

    Thanks,

    Fred

    Reply

  20. Jan Willhaus

    January 18, 2012 — 6:16 pm

    Hi Frederick!

    Below line 18 of the main code block I added a webkit-fix and another line for our friends on IE (of which quiet frankly I’m not sure if it works, but the Webkit-fix does work):
    background: -webkit-gradient(linear, left top, left bottom, from(#3F3F3F), to(#464646));
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#3F3F3F’, endColorstr=’#464646′);

    To fix the broken submit-button you have to add basically the same two lines below line 105, but with the correct colors for the button:
    background: -webkit-gradient(linear, left top, left bottom, from(#333333), to(#111111));
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#333333′, endColorstr=’#111111′);

    The same has to be inserted below line 116 and 123, though you have to change the colors again. 🙂

    To make the follow-button even more bullet-proof you should add the correct transition-attributes since they are still work in progress by the browser-devs: Below line 104 you add the following
    -webkit-transition: all 0.25s ease-in-out 0s;
    -o-transition: all 0.25s ease-in-out 0s;
    -ms-transition: all 0.25s ease-in-out 0s;
    transition: all 0.25s ease-in-out 0s;

    I hope this is clear enough for you, since it’s hard to provide my code here; I adjusted it a little much more to fit my theme.

    Best regards, Jan

    Reply

  21. Matthew Gannon

    January 20, 2012 — 4:34 am

    nvm followed your instructions and it worked great thank you!

    Reply

  22. Frederick Giasson

    January 25, 2012 — 4:19 pm

    Hi Jan!

    Great thanks for this! I just updated my blog and the blog post with these modifications. Everything seems alright with these modifications.

    Take care,

    Fred

    Reply

  23. Andrew

    January 28, 2012 — 10:52 pm

    Thanks so much for sharing the hack Frederick! It’s pretty awesome. 🙂

    Reply

  24. Prasann

    February 5, 2012 — 11:12 pm

    @Fred @Uwe
    I am not even a bit coding geek
    Can you please help me out on how can I use the Jetpack Subscription Manager instead of Subscribe 2

    Reply

  25. Frederick Giasson

    February 6, 2012 — 9:56 am

    Hi Prasann!

    I never used it, so I cannot be of a big help. This may be possible (to switch from Subscribe 2 to its Jetpack version) but I am not 100% sure; I would have to check the Jetpack version first.

    Anybody else has some experience with it?

    Thanks,

    Fred

    Reply

  26. Uwe

    February 6, 2012 — 10:37 am

    Hi Prasann,

    I’m afraid if you have no coding experience at all, I can’t help you. I did what you’re trying to accomplish. And I did it with the tip Fred has given me here. However, I did it with a little trial-and-error, and I didn’t document the process in a way that allows me to give a step by step instruction.

    All I can tell you is that the following piece of code from the Jetpack Subscription module needs to be put in Fred’s code, roughly where he indicated above:

    0 ) {
    echo wpautop( sprintf( _n( ‘Join %s other subscriber’, ‘Join %s other subscribers’, $subscribers_total[‘value’], ‘jetpack’ ), number_format_i18n( $subscribers_total[‘value’] ) ) );
    }
    ?>

    And then you need additional tweaking. Can’t give you any more details, since I tweaked Fred’s code too much for my own blog to make a line-by-line comparison.

    Sorry,
    uwe

    Reply

  27. Uwe

    February 6, 2012 — 10:47 am

    Ahh, sorry, inserting the code didn’t work. Silly me. Basically what you need from the supscriptions.php of the Jetpack module are the lines 457 to 477.

    uwe

    Reply

  28. Prasann

    February 6, 2012 — 10:54 am

    @Uwe @Fred,
    You mean I need to replace
    <form…..
    ….
    ….
    from Fred’s S2 code to the <form………… of the Jetpack subscribe.php Module

    Reply

  29. Uwe

    February 6, 2012 — 11:06 am

    Hi Prasann,

    that’s pretty much the idea, yes. But it might require additional tweaking of the code. How much and what exactly I can’t tell you.

    Uwe

    Reply

  30. Prasann

    February 7, 2012 — 9:05 am

    @Uwe
    Hello,
    You have integrated the jetpack’s subscription system with follow button in your blog so can you give me just the <form……………………………………. code which you used

    Reply

  31. Dustin Mooney

    February 9, 2012 — 4:22 pm

    I am using your code for the follow button and I love it. But there was one thing I was wondering. Is there a way you can make it stop popping up halfway every every time the page loads. On a load or refresh, the follow slider pops up about halfway and then slides back down. Can you make that stop?

    Reply

  32. Frederick Giasson

    February 9, 2012 — 4:38 pm

    Hi Dustin,

    Quickly: not. Would have to re-check the code. Not sure when I will have time to do this, but I will ping you when I do. In mean time, maybe other people on this thread will give thing to change to make this happening.

    Thanks,

    Fred

    Reply

  33. Dustin Mooney

    February 9, 2012 — 5:05 pm

    Thanks for looking into it for me!

    Reply

  34. Peter Kriegel

    February 11, 2012 — 2:11 pm

    Thank you for this!!!!!!
    I have a long search behind me, to find this!
    This works super with feedburner!
    Do you plan to convert it, into a real Plugin?
    I will donate it !

    Reply

  35. Frederick Giasson

    February 11, 2012 — 3:26 pm

    Hi Peter!

    Good to see that is works perfectly for you! No I don’t and I probably won’t. This was just a side project for my own needs. I put all my coding time on our Open Semantic Framework (see the Resources tab; or my about/project pages for more information). I just put it online because I was guessing that other people would like to know how to get it. And apparently that many people did if we look at all these comments 🙂

    Take care,

    Fred

    Reply

  36. Elena

    February 18, 2012 — 4:23 am

    Hello. Thank you for good code, it’s really cool!
    I have one question – I made additional panel for my site like you “Resources”, and then I reload site page this panel loading in expanded mode and then collapsed, how can I make it loading in collapsed mode?
    My site is http://www.liseykina.ru.

    Reply

  37. nick

    February 18, 2012 — 11:02 am

    Hey thanks for this.I got email subscription to work but when I am entering my feed URL I am just able to see the URL in follow form..

    [[ADD-YOUR-RSS-FEED-LINK-HERE]]

    I replaced [[ADD-YOUR-RSS-FEED-LINK-HERE]] with my link. But it doesnt work. Please help

    Reply

  38. nick

    February 18, 2012 — 11:11 am

    You can see the follow button here and see that the only thelink appears and no image 🙁

    http://www.nickksworld.co.cc

    Reply

  39. nick

    February 18, 2012 — 1:21 pm

    Never Mind, I managed to get it work 🙂 Thanks a lot for this amazing work 🙂

    Reply

  40. Frederick Giasson

    February 19, 2012 — 5:52 pm

    Hi Elena!

    Someone else had this question on this blog post I think, but right now I didn’t had time to check to do this. As soon as I have some spare time for this, I will fix that on this blog post and notices everybody subscribed to this thread.

    Thanks,

    Fred

    Reply

  41. Frederick Giasson

    February 19, 2012 — 5:54 pm

    Hi Nick!

    Good that you get it to work properly.

    Thanks,

    Fred

    Reply

  42. Tony Schoen

    February 26, 2012 — 4:24 am

    Fred,

    You made a really nice feature. The asterisk didn’t seem to work for me, in Firefox it was resized to a lager blurred background image (maybe I have some other conflicting CSS style, have to check it). Other issue that in FF sometimes the tab pops up a few pixels higher, showing a black line.

    Suggestion, also for other users: I moved the tab from the footer (as you suggested) to the body of my home page, this makes de tab only show up on the home page, not with every move through the site (the tab hopping up and down makes it a bit annoying, after a while).

    You have a suggestion about the asteriks (or other background image)?

    Please keep me updated on modifications.

    Regards,

    Tony

    Reply

  43. Lea Thomsen

    February 26, 2012 — 7:39 am

    Hi Frederick

    Great guide. It was JUST what I was looking for. However, I can’t manke the jquery part of it work. The box is sort of frozen from the beginning in a not so practical spot where no actions are possible for the user. 😀

    I tried updating the jquery line in the head tag to that of the latest version: http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js but nothing changes. Actually it’s the same weather I have the line of code in or not.

    Any ideas of what I am doing wrong? Sorry to bother you.

    Reply

  44. Frederick Giasson

    February 27, 2012 — 2:20 pm

    Hi Tony!

    About the asterix, I would need to see it in action on your website. Otherwise, what you could do is check, using something like FireBug, to see what is the difference between my asterix (the underlying CSS code) and yours. Maybe it becomes in conflict with some of your theme’s CSS.

    Thanks,

    Fred

    Reply

  45. Frederick Giasson

    February 27, 2012 — 2:31 pm

    Hi Lea!

    jQuery is the problem on your blog. The problem seems to be related to your W3 Total Cache plugin. My guess is that the settings you have enabled for W3TC doesn’t play nice with jQuery. It is in a cached JS file that the “jQuery not defined” exception is raised.

    First, check to flush the entire W3CT cache, and then reload the site. Hopefully this will fix the problem. Otherwise try to disable it, see if ti works,if it does, then check what setting doesn’t play nice with jQuery.

    Hope it helps!

    Thanks,

    Fred

    Reply

  46. Lea

    February 27, 2012 — 4:27 pm

    It worked! You are a bloody genious! 😉

    Thank you SO much for taking time to help – and for writing this guide. You made my day.

    Reply

  47. Frederick Giasson

    February 27, 2012 — 5:28 pm

    Hi Lea!

    Thanks for confirming that it was the issue! Looks much better now. Good luck!

    Take care,

    Fred

    Reply

  48. Lars B

    March 30, 2012 — 8:13 am

    Wow ! Thank you for this !! Great tutorial, just works fine.

    Reply

  49. Alberto

    May 3, 2012 — 12:31 am

    I get lost at Click the “Tools” admin menu link, and select “Subscribers”. there is no subscriber button in tools menu…

    Reply

  50. Erika

    May 14, 2012 — 5:28 am

    Hi,

    Thanks for the tutorial!

    I’m having problems with getting the Subscribe2 to work properly. For some reason when I try and test it, it keeps coming up with and error: “Sorry, there seems to be an error on the server. Please try again later.”

    Does anyone know what it might be…?
    I already talked to the service provider and they say it’s not a problem fro mtheir end… any ideas..?

    Thanks!

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *