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.

122 Responses to “WordPress’s Follow Button for Non-WordPress.com Users”


  1. 1 kp Oct 5th, 2011 at 11:59 am

    This is cool! (Was looking for whatever plugin WP used on the demo site)

    What I need is something that sends out notification if a page has been updated as well as doe a new post.

    By chance does this send notification for page updates?

    Many thanks,

    kp

  2. 2 Frederick Giasson Oct 5th, 2011 at 12:37 pm

    Hi!

    Yes you can send notifications for pages, but I can’t see an option in Subscribe2 to do send an email for updated pages. In any case, I think it would be pretty easy to add this functionality to that plugin, for your own needs.

    So, to resume: you can send emails for *new* pages and posts; but apparently not for updated ones.

    Thanks

    Fred

  3. 3 Renji Oct 6th, 2011 at 10:57 am

    Hi Frederick, can I use the Feedburner subscription instead of the Subscribe2 Plugin?

  4. 4 Frederick Giasson Oct 6th, 2011 at 11:32 am

    Hi Renji!

    So, what you want is only the feedburner link that I have on my blog, without caring about the email subscriptions right?

    If so, then you can certainly do this. What you will have to do is to skip the Step #1 and Step #2. In Step #3 you will have to remove everything between the lines 209 to 229, and you will have to put your Feedburner chicklet in there.

    Should be as simple as this.

    Tell me if it works!

    Take care,

    Fred

  5. 5 Renji Oct 6th, 2011 at 12:43 pm

    Hi Fred,

    Sorry for not being clear.

    I mean, can I use the Feedburner email subscription form instead? If I replace the lines from 211 to 223, with the form code that Feedburner provides, will it work? Right now, I have that form in my blog’s sidebar. So if this would work, I would like to remove it.

    Thanks.

  6. 6 Frederick Giasson Oct 6th, 2011 at 12:47 pm

    Hi Renji,

    Sure it should. Just copy your current Form’s HTML and replace what is between lines 209 to 229 by it, and don’t bother with Step #1 and Step #2.

    Tell me if it works,

    Thanks,

    Fred

  7. 7 Vincent Oct 6th, 2011 at 3:20 pm

    Thank you very much for this guide.

    It allowed me to add into a new ‘non WordPress’ website with minor modifications, hope you don’t mind?

    Needed to add jQuery 1.6 as site is still running 1.3.2 so ‘slide’ effect didn’t initially work.

    Can see it in action here:
    http://spanishvilla.businesswebsitemanager.com/_blog/Spanish_Property_News

  8. 8 Frederick Giasson Oct 6th, 2011 at 3:38 pm

    Hi Vincent!

    That looks great and clean! Yeah, you have a good point regarding JQuery, users have to make sure to load the latest version on their blog (but this really depends on their theme I think).

    Thanks for your inputs!

    Take care,

    Fred

  9. 9 Natalie (Fashion Intel) Oct 15th, 2011 at 12:45 am

    Dear Fred,

    You are A M A Z I N G, thank you for creating this for us to use. I am beyond happy with the ability to have the “Follow” button on my blog now. Seriously, I am jumping for joy. xoxoxox

    Check it out if you’d like: http://fashionintel.com/

    Best Wishes,
    Natalie

  10. 10 Natalie (Fashion Intel) Oct 15th, 2011 at 1:45 am

    Grrrr, I spoke too soon. Womp.
    Was hoping you could help me trouble shoot something. My follow button looks great when you click on it, but it doesn’t actually subscribe the reader when they enter their email address. It doesn’t do anything and I’m not sure why. I linked it to this page I specifically created: http://fashionintel.com/follow/ in the code, but even when you try to subscribe on that page, it doesn’t work.

    Do you have any insight you could share please. Would love your help!

    Best Wishes,
    Natalie

  11. 11 Frederick Giasson Oct 17th, 2011 at 8:50 am

    Hi Natalie!

    Glad you like it :) I took a quick look at your blog, and you seems to be missing a few things from what I put in this blog post. Take a look at the HTML code you put on your blog, and check the difference. Take a particular look at the <input /> elements which are not good. The input elements is what send the information to the S2 WordPress plugin. So, what you have to do is to re-use the *exact* HTML code from this blogpost, and to change the text if needed. Also make sure that the S2 plugin is properly working first.

    Tell me if you hit any other bumps down the road :)

    Take care,

    Fred

  12. 12 Natalie (Fashion Intel) Oct 17th, 2011 at 12:41 pm

    Hello Fred,

    Thanks for the reply, I sincerely appreciate it! What you had looked at on my page was the RSS subscribe and not the wp subscribe, I was trying to go the angle of your other followers by replacing 209 to 229.

    BUT, I’ve gone back to square one and it still doesn’t work for me. I copied all of the code here, pasted it exactly in my footer, just changed the “ADD YOUR LINK HERE” parts. I have Subscribed2 activated an everything. YET, when I enter an email address into the box, it still does the exact same thing. Why is it not prompting a new window. I created the page http://fashionintel.com/follow/ for it to refer to and nothing.

    Would love any advice to help figure this out.

    Best Wishes,
    Natalie

  13. 13 Frederick Giasson Oct 17th, 2011 at 12:52 pm

    Hi Natalie!

    Good, so you definitely fixed a few things. The code is all there now. However, the problem is that the user get redirected to this page:

    http://fashionintel.com/?s=&email=abc&ip=abc&subscribe=Sign me up!

    instead of this one:

    http://fashionintel.com/follow/

    If I try to subscribe using the second link, everything works perfectly. However, the redirection between the Follow popup and that follow page is problematic.

    The code seems good, and Subscribe2 is working properly. I suspect that you may have some issues with some plugin or settings that change the requested URL. Here I am talking about some Apache2 web server settings for the mod_rewrite module. Maybe some “pretty URL” settings in wordpress, some .htaccess files on your server or some other plugin that acts on the URL.

    It may be something else, but this would be the next thing I would investigate.

    Thanks,

    Fred

  14. 14 Natalie (Fashion Intel) Oct 17th, 2011 at 1:07 pm

    Dear Fred,

    Thanks for the update, I appreciate the help and support. Everything you just mentioned is unfortunately beyond my computer knowledge. Hopefully I can find someone to help me out on this and I can get it up and running!

    Best Wishes,
    Natalie

  15. 15 Frederick Giasson Oct 17th, 2011 at 1:20 pm

    Hi Natalie,

    I think I found your problem. Re-open your theme’s page where you put the Follow button. I think you created an error when editing that file.

    Check somewhere around here:

    =====
    <form method=”get” id=”searchform” action=”http://fashionintel.com/”>
    <div><input type=”text” size=”18″ value=”” name=”s” id=”s” />
    <input type=”submit” id=”searchsubmit” value=”Search” class=”btn”</>
    <BR><BR>
    =====

    When you copy/paste the code, you apparently cut some of your page. The search’s form element is not closed, and the input element neither. So what happens is that there is some conflict between the Follow Button’s form and the search’s. Go back to square #1 (I hope you saved the file before starting these modifications) and make sure that you don’t modify any existing code in your page. Then you should be good to go :)

    Thanks,

    Fred

  16. 16 Natalie (Fashion Intel) Oct 17th, 2011 at 2:45 pm

    Dear Fred,

    You were TOTALLY RIGHT! I removed the other coding from the theme and entered yours and it completely worked. :) Now I’ve gone ahead and replaced the wordpress subscriber option with an RSS email subscribe option as I think that might generate more readers. What are your thoughts on that btw?

    Thanks again for your time and effort. You’re a rad guy!

    xoxo
    NJ

  17. 17 Frederick Giasson Oct 17th, 2011 at 2:49 pm

    Hi Natalie!

    Great! I confirm that it is not properly working. I like the Feedburner integration as well. This is a nice tweak.

    I think you are good to go now :)

    Take care,

    Fred

  18. 18 Frederick Giasson Oct 24th, 2011 at 3:10 pm

    Hi Everybody,

    I just found that this Follow Button may be causing display issues on some mobile devices. So I added a new step (the new Step #4 in this blog post) that is used to hide the Follow Button if the user that request the webpage is a mobile device.

    So, if you already installed this code, I would suggest you to apply the new Step #4 to your installation so that the Follow Button doesn’t diminish the quality of the experience of your readers.

    Take care,

    Fred

  19. 19 Frances Nov 6th, 2011 at 3:41 pm

    Hi Fred,

    I’ve installed Subscriber2 and I’ve created a page called “Follow”. Currently there is a “Follow” menu item in my sidebar and the link works properly. When I try to implement your button solution, I cannot get any response from the Follow button even though I’ve tried every variation of a URL path that I can think of.

  20. 20 Frances Nov 6th, 2011 at 4:21 pm

    I suspect that my theme, which is old, isn’t compatible with this type of function.

  21. 21 Frederick Giasson Nov 7th, 2011 at 9:48 am

    Hi France!

    Ok, if I take a look at your blog, I can see that you are not using the “clean URL” option. So, the pages and blog posts that are available on your blog looks like:

    http://surrealstructures.com/blog/?p=952

    So, at the step that you create a new WordPress page, it will create a page, with a unique ID. Theorically, how you will access that new page is with the URL that looks like:

    http://surrealstructures.com/blog/?p=REPLACE-FOLLOW-PAGE-ID

    That should be the URL of your follow page. Check in your admin dashboard section to find the ID of that page.

    Hope it helps!

    Take care,

    Fred

  22. 22 Frances Nov 7th, 2011 at 10:54 am

    Hi Fred,

    I have changed my theme to “twenty-eleven”, which I presume is an up-to-date theme. I have changed the permalink settings so that my follow page url is “http://surrealstructures.com/blog/follow/” and I’ve put the code snippets into the footer.php (with the proper URLs).

    I’m still not having any luck. The panel that is supposed to be animated is just stuck half-showing, and the Test (Follow) button is unresponsive. Am I missing some java script code? Or having I put your code in the wrong place?

    Thanks. :)

  23. 23 Frederick Giasson Nov 7th, 2011 at 10:57 am

    Hi!

    Yes, jQuery is missing. In the header.php (or whatever the name of the file where the header of your blog is generated) of your theme, add the following line in the <head>…</head> section of the page:

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

    Then retry.

    Thanks,

    Fred

  24. 24 Frances Nov 7th, 2011 at 12:11 pm

    Thanks Fred. That was it! :)

  25. 25 Frances Nov 7th, 2011 at 3:37 pm

    I forgot to say thanks for the work you did on this. :)

  26. 26 Frederick Giasson Nov 7th, 2011 at 5:39 pm

    Frances: no problem, my pleasure :)

  27. 27 Uwe Dec 7th, 2011 at 12:23 pm

    Hi Federick,

    splendid instructions. In my local test environment it works like a charm.
    I have a question, though. In theory, it should be possible to link the “subscribe” button to the subscription module of WordPress’ Jetpack, rather than to Subscribe2, right?
    If I am right: Which part of the code you give above defines what subscription module is used?

    Thanks

  28. 28 Frederick Giasson Dec 8th, 2011 at 11:55 am

    Hi Uwe!

    Good to see its works properly!

    About the JetPack: is their Subscribe option Subscriber2? If so, I would say it should works; otherwise some testing will be needed. I have no idea if it works the same way or not since I never tested it.

    If you have time to check, and if it works, do post the conclusion on this blog post :)

    Thanks!

    Take care,

    Fred

  29. 29 Uwe Dec 8th, 2011 at 3:37 pm

    Hey Fred,

    no, Jetpack doesn’t work with Subscriber2 as their email subscription module. Instead, you get the same as you would with a wordpress.com email subscription. There is no additional page. You, the reader, manage your subscriptions through WordPress.

    On my second blog – http://www.nevermindthebuzzkills.com/ – I have the Jetpack email subscription activated (right sidebar).

    I’ll try to poke a stick at the code, but since I don’t know what piece of your code refers to the subscription module I doubt I can get it to work. That’s why I was asking. I’ll try. But chances are that I replace the wrong piece, cut out too much or not enough.

  30. 30 Frederick Giasson Dec 8th, 2011 at 5:08 pm

    Hi!

    Hoo ok. So, it should work. Try using that “subscription” code from you blog, and replace what is between lines #211 to #223 above. (So, basically to switch the forms from the subscription2 to the one of the Jetpack).

    Personally I prefer S2 because I don’t need to link my blog to any wordpress.com account. But this is just a mater of taste; it should certainly work.

    Thanks,

    Fred

  31. 31 Uwe Dec 8th, 2011 at 7:29 pm

    Hey Fred,

    I’m a happy camper. That was exactly the hint I needed. Replacing the piece of code you mentioned with the equivalent from the Jetpack module, some light tweaking of that code to make things look better and now it is live and working.

    The only thing still bothering me is that it also shows up on the start page of the site (the rest of the footer is suppressed there, but this code comes after the footer container so it is still displayed).
    A little more experimenting should take care of that. Hopefully.

    And you are right, it’s a matter of taste. I use Jetpack anyways and prefer to have an email subscription without an additional form page. Also, the emails wordpress sends look nice enough.

    Thanks a bunch. I’ll even consider implementing this in my music blog as well.

  32. 32 Kenn Dec 9th, 2011 at 7:44 pm

    Hi Fred.

    Thanks for posting this information.

    However I wasn’t able to make it work.

    I used Thesis 1.8.2 (not sure if you’ve heard that) so I kind of chopping your codes.

    I separate the CSS, jQuery and the PHP files but nothing will show up.

    I try pasting the whole code in Thesis Open Hooks in Footer area. It seems fine, but the problem is it will only work in Post. It will show nothing in the Page. Even The word Follow cant be Seen in page. Only in post.

    Any help would be much appreciated.

    Cheers,
    Kenn

  33. 33 Elena Dec 11th, 2011 at 12:08 pm

    Thank you!
    It is wonderful and very helpful. I’m newbie in php and javascript but I can make this follow button and another button (like you “Resources”) for my site!

  34. 34 Frederick Giasson Dec 13th, 2011 at 6:02 pm

    Hi Uwe!

    Great to see that it is now working on your side, the way you wanted it! :)

    About your “problem”, it is really a matter of where you put it in your Theme, and how. There should be a way to display it in some of your blog section only. (and on the main page for example).

    My pleasure!

  35. 35 Frederick Giasson Dec 13th, 2011 at 6:06 pm

    Hi Ken!

    Sorry to hear that. Unfortunately I have no idea what this is, so I will be of little help I fear :(

    It is sure that if this thing is playing with the code, and doesn’t play nice with it, you may endup with some issues. To fix that, some debugging would be warranted I think.

    Good luck!

  36. 36 Uwe Dec 13th, 2011 at 6:58 pm

    Hey Fred,

    found the solution to hide it on the start page through a style.css exception definition, same way I did with header, footer, menu etc on the start page.
    And by now I can confirm that it is working beautifully in connection with Jetpack. Emails are coming in (or going out, depending on how you see it).

    Thanks again

  37. 37 Frederick Giasson Dec 13th, 2011 at 7:19 pm

    Hi Uwe!

    Yup, I can see it now, well done Sir!

    I guess that they will eventually add it to the JetPack directly, but in mean time, this is quite useful!

    Take care,

    Fred

  38. 38 Vincent Dec 14th, 2011 at 5:18 am

    Hi Fred,
    Can we get it to ‘pop-up’ after X seconds like the survey thingy on this page?
    http://headwaythemes.com/pricing/

  39. 39 Dani Dec 22nd, 2011 at 4:29 pm

    Hi Frederick,

    I installed the code and customized it. It worked well when testing, and now it freezes. Can you see my site and see what has gone wrong?

    http://yeahthatskosher.com

    Thanks.

  40. 40 Geoff Dec 23rd, 2011 at 12:37 am

    Hi Fred

    Thanks for all your helpful hard work. I’m an near total newbie at blogging, at WordPress, and at RSS, so perhaps this is just too ambitious for me. I’ve tried to follow the instructions exactly but it’s not working.

    I don’t want to waste your time but wondered if you can anything obviously wrong about what I’ve done?

    Anyway, season’s greetings!

  41. 41 Frederick Giasson Dec 23rd, 2011 at 11:43 am

    Hi Dani,

    The page is still loading after 3 minutes (seems that multiple things comes from various external sites that are not really responsive, like images, etc.)

    I yet doesn’t see the button. But in any case, most of the time, the reason for that to happen is that there are other JavaScript errors that stops the execution of the script (and so, the “freeze”). I would suggest you to check for javascript errors, and see if it is not another module that interact with it and make it freeze. Right now, it doesn’t seem to be enabled.

    Thanks!

    Take care,

    Fred

  42. 42 Vincent Dec 23rd, 2011 at 11:58 am

    Hi Fred,
    What would we need to change to make the ‘button’ appear and slide from either the top or side?

    Could be a useful follow-up to this ;-)

  43. 43 Frederick Giasson Dec 23rd, 2011 at 12:12 pm

    Hi Geoff!

    You are, I think, experiencing the same issue as Dani. So, in your case, the problem is that you theme is not loading jQuery by default. So, what you have to do is to load jQuery, in your theme. Check the Step #3, I updated it with an Important Note. Just follow what is there and it should resolve your issue.

    Dani: same for you.

    Hope it resolves your issues!

  44. 44 Frederick Giasson Dec 23rd, 2011 at 12:13 pm

    Vincent: it would need some tweaks to the code. Considering all the works I have to do on the Open Semantic Framework, I leaves this as an exercise to the readers :D

    If anyone come-up with something regarding this, then I will add to this blog post.

    Thanks!

  45. 45 Dani Dec 23rd, 2011 at 1:36 pm

    Hi Frederick,

    Thank you following up.

    I added the jquery tag, and it didnt make a difference.

    The Follow tab worked originally, but after I added subscribers, it continues to show up, but doesnt actually pop up.

    Here is a screenshot: http://yeahthatskosher.com/wp-content/uploads/2011/12/Screen-Shot-2011-12-23-at-12.02.03-PM.png

    Unsure how to fix this.

    Thanks.

    ~Dani

  46. 46 Frederick Giasson Dec 23rd, 2011 at 2:13 pm

    Hi Dani,

    What I see is a javascript error:

    “jQuery(…).dialog is not a function”

    at line 38.

    Because of this error, jQuery stops its execution, and so the reason why the thing is not working. Check the code around that place. I think this is some customization you did, and there are some execution errors with it.

    Hope it helps!

    Thanks,

    Fred

  47. 47 Jorge Pinzon Dec 25th, 2011 at 8:27 pm

    Hi Frederick,

    My wife is a photographer and she wanted the follow button but couldn’t make it work. We followed your instructions and it now works perfect!!! We changed the asterisk for a camera and took off the rss feed option. Thank you very much for you instructions.
    You are welcome to visit (http://severine-photography.com/) and provide any feedback.

    Thanks,

    Jorge & Severine

  48. 48 Dani Klein Dec 27th, 2011 at 6:13 pm

    Hi Frederick,

    I actually removed all the code, and inserted your code back with no customizations, and I’m still seeing the same error.

    What’s ironic is that when I first installed it, it worked last week, but something happened, and now I get what you see on my site now:

    http://yeahthatskosher.com

    Why would it initially work, and now cease to work?

  49. 49 Federico Bozo Dec 27th, 2011 at 10:08 pm

    Hi Frederick!
    Thank you for this article.
    I’ve translated your article to spanish and made a few changes.
    A friend of mine wanted to make this change and your solution was the only one I really liked.
    Basically my friend wanted to have the closest to the real thing so I didn’t add the RSS feed and replaced the icon with a plus made by me.

    You can check my article http://corchoweb.com/2011/soluciones/el-follow-buttonde-wordpress-para-usuarios-no-wordpress-com/
    and I say clearly that is YOUR article with a few tweaks.

    Thank you and my best wishes to you.

  50. 50 Frederick Giasson Dec 28th, 2011 at 11:59 am

    Hi Jorge!

    Great to hear that! Looks pretty good to me.

    Thanks,

    Fred

  51. 51 Frederick Giasson Dec 28th, 2011 at 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

  52. 52 Frederick Giasson Dec 28th, 2011 at 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

  53. 53 Leah McCullough Dec 28th, 2011 at 12:35 pm

    Thank you!!!!

  54. 54 Chris Jan 2nd, 2012 at 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?

  55. 55 Frederick Giasson Jan 2nd, 2012 at 9:52 am

    Hi Chris!

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

    Thanks,

    Fred

  56. 56 Tom Jan 3rd, 2012 at 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!

  57. 57 Henry Jan 3rd, 2012 at 8:01 pm

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

  58. 58 Henry Jan 3rd, 2012 at 8:03 pm

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

  59. 59 Frederick Giasson Jan 4th, 2012 at 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

  60. 60 Frederick Giasson Jan 4th, 2012 at 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

  61. 61 Henry Jan 4th, 2012 at 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!

  62. 62 Natalie (Fashion Intel) Jan 4th, 2012 at 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

  63. 63 Frederick Giasson Jan 5th, 2012 at 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

  64. 64 Frederick Giasson Jan 5th, 2012 at 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!

  65. 65 Henry Jan 5th, 2012 at 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.

  66. 66 Henry Jan 5th, 2012 at 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.

  67. 67 Jan Willhaus Jan 18th, 2012 at 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! :)

  68. 68 Frederick Giasson Jan 18th, 2012 at 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

  69. 69 Jan Willhaus Jan 18th, 2012 at 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

  70. 70 Matthew Gannon Jan 20th, 2012 at 4:34 am

    nvm followed your instructions and it worked great thank you!

  71. 71 Frederick Giasson Jan 25th, 2012 at 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

  72. 72 Andrew Jan 28th, 2012 at 10:52 pm

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

  73. 73 Prasann Feb 5th, 2012 at 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

  74. 74 Frederick Giasson Feb 6th, 2012 at 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

  75. 75 Uwe Feb 6th, 2012 at 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

  76. 76 Uwe Feb 6th, 2012 at 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

  77. 77 Prasann Feb 6th, 2012 at 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

  78. 78 Uwe Feb 6th, 2012 at 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

  79. 79 Prasann Feb 7th, 2012 at 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

  80. 80 Dustin Mooney Feb 9th, 2012 at 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?

  81. 81 Frederick Giasson Feb 9th, 2012 at 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

  82. 82 Dustin Mooney Feb 9th, 2012 at 5:05 pm

    Thanks for looking into it for me!

  83. 83 Peter Kriegel Feb 11th, 2012 at 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 !

  84. 84 Frederick Giasson Feb 11th, 2012 at 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

  85. 85 Elena Feb 18th, 2012 at 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.

  86. 86 nick Feb 18th, 2012 at 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

  87. 87 nick Feb 18th, 2012 at 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

  88. 88 nick Feb 18th, 2012 at 1:21 pm

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

  89. 89 Frederick Giasson Feb 19th, 2012 at 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

  90. 90 Frederick Giasson Feb 19th, 2012 at 5:54 pm

    Hi Nick!

    Good that you get it to work properly.

    Thanks,

    Fred

  91. 91 Tony Schoen Feb 26th, 2012 at 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

  92. 92 Lea Thomsen Feb 26th, 2012 at 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. :D

    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.

  93. 93 Frederick Giasson Feb 27th, 2012 at 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

  94. 94 Frederick Giasson Feb 27th, 2012 at 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

  95. 95 Lea Feb 27th, 2012 at 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.

  96. 96 Frederick Giasson Feb 27th, 2012 at 5:28 pm

    Hi Lea!

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

    Take care,

    Fred

  97. 97 Lars B Mar 30th, 2012 at 8:13 am

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

  98. 98 Alberto May 3rd, 2012 at 12:31 am

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

  99. 99 Erika May 14th, 2012 at 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!

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

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

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

  103. 103 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?

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

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

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

  107. 107 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?

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

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

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

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

  112. 112 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!

  113. 113 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:

  114. 114 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!

  115. 115 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,

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

  117. 117 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)

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

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

  119. 119 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?

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

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

  1. 1 WordPress.org ähnlicher Folgen Popup | ITsolution² Entwicklungswebseite Pingback on Nov 28th, 2011 at 7:49 pm

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 73 other followers:

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




RSS Twitter LinkedIN