WordPress’s Follow Button for Non-WordPress.com Users

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 Hors Série 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: [subscribe2] 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:

1
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js” type=text/javascript”></script>

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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
<style type="text/css" media="screen">
  #bit, #bit * {}
  #bit {
      bottom: -300px;
      font: 13px "Helvetica Neue",sans-serif;
      position: fixed;
      right: 10px;
      z-index: 999999;
      width: 230px;
  }
 
  .loggedout-follow-typekit {
      margin-right: 4.5em;
  }
 
  #bit a.bsub {
      background-color: #464646;
      background-image: -moz-linear-gradient(center bottom , #3F3F3F, #464646 5px);
      background: -webkit-gradient(linear, left top, left bottom, from(#3F3F3F), to(#464646));
      filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#3F3F3F', endColorstr='#464646');   

      border: 0 none;
      box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.2);
      color: #CCCCCC;
      display: block;
      float: right;
      font: 13px/28px "Helvetica Neue",sans-serif;
      letter-spacing: normal;
      outline-style: none;
      outline-width: 0;
      overflow: hidden;
      padding: 0 10px 0 8px;
      text-decoration: none !important;
      text-shadow: 0 -1px 0 #444444;
  }
 
  #bit a.bsub {
      border-radius: 2px 2px 0 0;
  }
 
  #bit a.bsub span {
      background-attachment: scroll;
      background-clip: border-box;
      background-color: transparent;
      background-image: url("[[PATH-TO-THE-FAMFAM-ICON]]asterisk_orange.png");
      background-origin: padding-box;
      background-position: 2px 3px;
      background-repeat: no-repeat;
      background-size: 20% auto;
      padding-left: 18px;
  }
 
  #bit a:hover span, #bit a.bsub.open span {
      /*background-position: 0 -117px;*/
      color: #FFFFFF !important;
  }
 
  #bit a.bsub.open {
      background: none repeat scroll 0 0 #333333;
  }
 
  #bitsubscribe {
      background: none repeat scroll 0 0 #464646;
      border-radius: 2px 0 0 0;
      color: #FFFFFF;
      margin-top: 27px;
      padding: 15px;
      width: 200px;
      float: right;
      margin-top: 0;
  }
 
  div#bitsubscribe.open {
      box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
  }
 
  #bitsubscribe div {
      overflow: hidden;
  }
 
  #bit h3, #bit #bitsubscribe h3 {
      color: #FFFFFF;
      font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
      font-size: 20px;
      font-weight: 300;
      margin: 0 0 0.5em !important;
      text-align: left;
      text-shadow: 0 1px 0 #333333;
  }
 
  #bit #bitsubscribe p {
      color: #FFFFFF;
      font: 300 15px/1.3em "Helvetica Neue",Helvetica,Arial,sans-serif;
      margin: 0 0 1em;
      text-shadow: 0 1px 0 #333333;
  }
 
  #bitsubscribe p a {
      margin: 20px 0 0;
  }
 
  #bit #bitsubscribe p.bit-follow-count {
      font-size: 13px;
  }
 
  #bitsubscribe input[type="submit"] {
      -moz-transition: all 0.25s ease-in-out 0s;
      -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;  
      background: -moz-linear-gradient(center top , #333333 0%, #111111 100%) repeat scroll 0 0 transparent;
      background: -webkit-gradient(linear, left top, left bottom, from(#333333), to(#111111));
      filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#111111');   

      border: 1px solid #282828;
      border-radius: 11px 11px 11px 11px;
      box-shadow: 0 1px 0 #444444 inset;
      color: #CCCCCC;
      padding: 2px 20px;
      text-decoration: none;
      text-shadow: 0 1px 0 #000000;
  }
 
  #bitsubscribe input[type="submit"]:hover {
      background: -moz-linear-gradient(center top , #333333 0%, #222222 100%) repeat scroll 0 0 transparent;
      box-shadow: 0 1px 0 #4F4F4F inset;
      color: #FFFFFF;
      text-decoration: none;
  }
 
  #bitsubscribe input[type="submit"]:active {
      background: -moz-linear-gradient(center top , #111111 0%, #222222 100%) repeat scroll 0 0 transparent;
      box-shadow: 0 -1px 0 #333333 inset;
      color: #AAAAAA;
      text-decoration: none;
  }
 
  #bitsubscribe input[type="text"] {
      border-radius: 3px 3px 3px 3px;
      font: 300 15px "Helvetica Neue",Helvetica,Arial,sans-serif;
  }
 
  #bitsubscribe input[type="text"]:focus {
      border: 1px solid #000000;
  }
 
  #bitsubscribe.open {
      display: block;
  }
 
  #bsub-subscribe-button {
      margin: 0 auto;
      text-align: center;
  }
 
  #bitsubscribe #bsub-credit {
      border-top: 1px solid #3C3C3C;
      font: 11px "Helvetica Neue",sans-serif;
      margin: 0 0 -15px;
      padding: 7px 0;
      text-align: center;
  }
 
  #bitsubscribe #bsub-credit a {
      background: none repeat scroll 0 0 transparent;
      color: #AAAAAA;
      text-decoration: none;
      text-shadow: 0 1px 0 #262626;
  }
 
  #bitsubscribe #bsub-credit a:hover {
      background: none repeat scroll 0 0 transparent;
      color: #FFFFFF;
  }
</style>    

<script type="text/javascript" charset="utf-8">
  jQuery.extend(jQuery.easing, {
      easeOutCubic: function (x, t, b, c, d) {
          return c * ((t = t / d - 1) * t * t + 1) + b;
      }
  });
  jQuery(document).ready(function () {
      var isopen = false,
          bitHeight = jQuery('#bitsubscribe').height();
      setTimeout(function () {
          jQuery('#bit').animate({
              bottom: '-' + bitHeight - 30 + 'px'
          }, 200);
      }, 300);
      jQuery('#bit a.bsub').click(function () {
          if (!isopen) {
              isopen = true;
              jQuery('#bit a.bsub').addClass('open');
              jQuery('#bit #bitsubscribe').addClass('open')
              jQuery('#bit').stop();
              jQuery('#bit').animate({
                  bottom: '0px'
              }, {
                  duration: 400,
                  easing: "easeOutCubic"
              });
          } else {
              isopen = false;
              jQuery('#bit').stop();
              jQuery('#bit').animate({
                  bottom: '-' + bitHeight - 30 + 'px'
              }, 200, function () {
                  jQuery('#bit a.bsub').removeClass('open');
                  jQuery('#bit #bitsubscribe').removeClass('open');
              });
          }
      });
  });
</script>

<div id="bit" class="">
  <a class="bsub" href="javascript:void(0)"><span id='bsub-text'>Follow</span></a>
 
  <div id="bitsubscribe">
    <h3><label for="loggedout-follow-field">Follow this Blog</label></h3>
 
    <form action="[[PATH-TO-YOUR-FOLLOW-WORDPRESS-PAGE]]" method="post" accept-charset="utf-8" id="loggedout-follow">
      <p>Get every new post on this blog delivered to your Inbox.</p>
      <p class="bit-follow-count">Join <?php echo $wpdb->get_var("SELECT COUNT(id) FROM wp_subscribe2 WHERE active='1'"); ?> other followers:</p>
      <p>
        <input type="text" name="email" id="s2email" style="width: 95%; padding: 1px 2px" value="Enter email address" onfocus='this.value=(this.value=="Enter email address") ? "" : this.value;' onblur='this.value=(this.value=="") ? "Enter email address" : this.value;'  id="loggedout-follow-field"/>
      </p>
       
      <input type="hidden" name="ip" value="<?php echo $_SERVER['REMOTE_ADDR']; ?>">
     
      <p id='bsub-subscribe-button'>
        <input type="submit" name="subscribe"  value="Sign me up!" />
      </p>
    </form>
   
    <p style="padding-top: 10px;">Or subscribe to the RSS feed by clicking on the counter:</p>  
   
    <p>
      [[ADD-YOUR-RSS-FEED-LINK-HERE]]
    </p>
  </div>
</div>

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):

1
2
3
4
5
<?php
 $useragent = $_SERVER['HTTP_USER_AGENT'];
 if(!preg_match('/android.+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i',$useragent)||preg_match('/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|e\-|e\/|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(di|rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|xda(\-|2|g)|yas\-|your|zeto|zte\-/i',substr($useragent,0,4)))
 {
?>

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

1
2
3
<?php
  }
?>

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 Responses to “WordPress’s Follow Button for Non-WordPress.com Users”


  1. 1 Frederick Giasson May 15th, 2012 at 10:41 am

    Hi Erika!

    This looks like that you may have an error in the PHP code of your wordpress installation. My guess is that you may have introduced that error by performing the steps of this tutorial. If the errors reporting are disabled by your host, you may have some problem finding what the problem is (except if you are a PHP developer of course).

    But I would suggest you to make sure that there is no PHP error that have been introduced when performing the steps of this tutorial.

    Hope you can find that issue!

    Take care,

    Fred

  2. 2 Prasann Jun 21st, 2012 at 11:01 am

    I updated to 3.4 and the button disappeared????
    Please help
    P.S. When I re-installed 3.3 it came back but as soon I again update to 3.4 it disappeared

  3. 3 Frederick Giasson Jun 29th, 2012 at 8:41 am

    Hi Presann!

    I haven’t updated yet, so I haven’t experienced this issue. Will have to test that once I have a couple of hour for my own. Will keep you updated.

    Thanks,

    Fred

  4. 4 Ajay Jul 12th, 2012 at 8:37 am

    Hi,

    How do I get the Resources tab? The same that is on your website here at the bottom. Is there a plugin for this?

  5. 5 Frederick Giasson Jul 13th, 2012 at 9:16 am

    Hi Ajay,

    This is a modification of the Follow button that we use to show a links page. You can check the source of this page to see how we did it.

    Thanks,

    Fred

  6. 6 Erwin Aug 16th, 2012 at 2:27 pm

    Hi Fred,

    Really good job on explaining the steps in detail, I had no problems following it and setting all up. I still encounter a problem though. When I subscribe with any email address, I receive the confirmation email, but then when I click on the confirmation link in the email, it takes me to my “Error 404 -Page not found” page. Do you know why this happens? I’d really appreciate any help you might have.

    Thanks a lot,
    Erwin

  7. 7 Zoe @ my own blog Oct 20th, 2012 at 7:50 am

    Great tutorial! I’ve been looking for ways to make this possible. Thanks for the instructions.

  8. 8 Akshay Oct 21st, 2012 at 7:25 am

    Thanks a lot! This was much needed.

    Was great to see a well thought out and detailed description that even a novice could understand.

    Will you ever get around to creating the plugin though?

  9. 9 Frederick Giasson Oct 22nd, 2012 at 8:35 am

    Hi!

    Unfortunately I do not think so. I would be happy to link to such a plugin in the future, but I don’t have enough time to work on this considering all the work I am putting in my other projects.

    Thanks,

    Fred

  10. 10 Akshay Oct 25th, 2012 at 3:58 pm

    Hi Frederick,

    I have a small issue. The follow pop up works fine on the home page, but on single posts or pages its frozen. The blog is http://www.aglastation.com

    Have a look at it whenever you have the time.

    Also, I tried to replicate your resources tab but it doesn’t seem to work. I want to create one, where I can show the RSS feed from my other blog. Any pointers?

    Thanks,
    Akshay

  11. 11 Frederick Giasson Oct 30th, 2012 at 8:57 am

    Hi Akshay!

    Yeah, seems to be in conflict with other plugins in these pages (the bottom bar or something; I can see multiple JavaScript errors on your page)

    Thanks,

    Fred

  12. 12 sakthi Nov 1st, 2012 at 1:07 am

    Hi,

    Thanks for this tutorial, i did it in my site, its working in safari, mozilla etc browser but it wont working in ie browser, can you give me any solutions for this, my site is http://teotrainer.com

    Thanks
    Sakthi

  13. 13 alessandra Jan 7th, 2013 at 8:04 am

    Hi Frederick, I have this plugin on my blog and tried to follow your instructions, since I am not a programmer, but something is not working as it should. First af all a programmer friend of mine installed me the plugin so point 1 e 2 are done. I had problems with point 3. The pages of my theme are all in php so it was impossible for me to see html code as I am use to see elsewhere. That is why I was not able to insert the code you gave us and actually I have the same problem with other stuff (analytics for example).
    Infact if you see my follow page, it appears this line: You may manage your subscription options from your profile where profile is a link to the administration panel. Surely enough there is something I do not understand. Thanks for helping me!

  14. 14 Mella Jan 12th, 2013 at 12:17 pm

    Hi Frederick,
    I love this follow button! But I’m having a little difficulty in the setup. I get the below showing on the frontend and cant see where the code is wrong on mine. I copy and pasted your code twice to try and fix it. I’m sure its something simple but I’m not a coder…

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

  15. 15 vicki Mar 22nd, 2013 at 10:09 pm

    Hi. I have the same widget as you do for following but mine is not displaying the numberof followers..like yours says “Join 32 other followers”.. i checked your code and mine and its identical:

    but mine shows nothing reagarding the number of followers. do you have a hit a certain number of followers before it will show up? theres nothing really in my widget panel to adjust this widget…only in the plugin editor can i edit things. Any ideas?
    thanks!

  16. 16 hassan Oct 15th, 2013 at 5:35 pm

    Hi Fred,

    i thank you for your help,i have tried your code but the windows is not completed,and when i click on follow nothing happen,
    please have a look http://th3wall.com/

    thank you again
    regards,

  17. 17 hassan Oct 15th, 2013 at 5:39 pm

    Hi Fred,

    it is work when i put the jquery in the footer with you code,
    thank you alot:)

  18. 18 linsey Oct 21st, 2013 at 12:35 pm

    Hi Fred. I know im late to the party but I’ve just come across this post… I have just tried to install this follow button onto my site and it looks like ive failed miserably lol. I have checked the code and all seems right to me so I have no idea what ive done wrong. If you could help, that would be great as im already pulling my hair out. lol

    http://www.ljsealey.com

    P.S This is just great! I have wanted the same follow button as wordpress.com for a while.. so thank you :0)

  19. 19 Ralf Jan 20th, 2014 at 12:06 pm

    Many thanks for this guide. I integrated it in my website and it works great.

  20. 20 Mark Feb 20th, 2014 at 1:25 am

    Subscribe2 page and Subscribe2 widget successfully receive new subscribers. But subscriptions submitted using the Follow popup do not work. It shows Confirmation msg. on it’s way but no messages are received and no new user has been added to current subscriber list. Any thoughts?

  21. 21 aveesh Kumar Mar 11th, 2014 at 9:07 am

    I think this functionality is already in the latest Jetpack – so you can connect your self hosted wordpress site to the follow post funcionality using a wordpress.com account for your users

  22. 22 Fred Jackson Mar 24th, 2014 at 4:00 am

    Hi Fred, 😉

    Love this and it appears that it will be just what I need for my blogs.

    One little problem… It won’t send the email. The s2 plugin woks great but it appears that the follow button does nothing. When I click it it appears to do what it should and takes me to the Follow page showing that a confirmation email has been sent but the email never arrives in the inbox.

    Thanks.
    Fred

  23. 23 Eddie (@50minCoach) Jan 7th, 2015 at 9:35 am

    Hi Fred,

    That is a real nice tool despite I can’t use it for now. I do have some basic questions that should help in my next steps that in return should lead into me installing your follow tool.

    Q1: right now my blog is 50minCoach.wordpress.com. If I upgrade my account, will I be able to install your follow tool?
    Q2: I presume that “Subscribe2” can only be installed once I upgraded my wordpress account. But for the meantime, any suggestions how to use my current free account to do something similar functions?

    Thanks a lot for your effort and time given.

  24. 24 Mon @ Blognifico Dec 19th, 2015 at 11:59 am

    Really a great tutorial thank God i found this article online. I keep wondering where do they get this kind of follow button because i want it on my blog too.

Leave a Reply






This blog is a regularly updated collection of my thoughts, tips, tricks and ideas about data mining, data integration, data publishing, the semantic Web, my researches and other related software development.


RSS Twitter LinkedIN


Follow

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

Join 90 other followers:

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




RSS Twitter LinkedIN