Pages - Menu

Sticky Feedburner follow/subscribe box

FeedBurner email subscribe/follow box.
Do you want to get more subscribers for your FeedBurner. Here is a way to boost your FeedBurner’s subscribers. You can add Feedburner follow box (coded by me) to your blog. This is really very attractive and will attract most readers of your blog to sign up with their email for updates. I visited a random blog hosted on Wordpress where I saw follow box similar to this (I should say mine is similar to that). That follow box is available for every wordpress user so I thought I should make it available for everyone that is not on wordpress.

What I get with feedburner?

If you have similar question then maybe you are not using FeedBurner. If you have blog or website then I suggest you should use it because you can give your readers option to subscribe with any of their favorite feed reader through FeedBurner (My blog's FeedBurner). It also allows subscription with email (Subscriber will get email when you post new content). If you are using some CMS for managing your blog then you should have no worry because most CMS create and update feeds automatically. (Related: HelloBar alternative)
That was too much about Feeds and FeedBurner now let me tell you how you can add FeedBurner Subscribe box to your blog. Before that you may want to have a demo of that.
If you are still reading this that mean you liked my email follow box. So here is quick way to add that to your blog or website.

Steps to follow

Step 1: Search for </head> and add following lines before that.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="http://ethow.github.io/feedburner-follow-widget-like-wp/feedburner-follow-widget-like-wp-js.js "></script>
<link type="text/css" rel="stylesheet" href="http://ethow.github.io/feedburner-follow-widget-like-wp/feedburner-follow-widget-like-wp-style.css " />
Maybe you are already calling jQuery and jQuery UI. If yes then delete old jQuery UI because newer is better than older (You can search jquery-ui-min.js or jquery-ui.js to see if you already have jQuery UI). If you also have jQuery and it is 1.10.2 then do not add line in red color (You can search jquery.min.js or jquery.js to see if you are already calling jQuery and its version). If it is different than this then you should add this too and don't worry I coded this with noconflict method. This follow box will not conflict with other jQuery libraries.
Step 2: Before moving to this step make sure you followed above steps correctly as they are mentioned. Hard steps are over now you only have to add following lines before </body> and your follow box will be ready to get you followers and subscribers.
<div id="ethowWF">
<div id="ethowWFOB">+ <span>Follow</span></div>
<div style="clear: both;"></div>
<div id="ethowWFA">
<form style="padding:3px;text-align:center;" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Ethow', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<div style="font-size:18px; font-weight:bold; color: #CCC;">Follow us</div>
<div>Get updates to your email</div>
<div><input type="text" style="width:140px" name="email" placeholder="You email..." id="ethowWFEmT"/></div>
<input type="hidden" value="Ethow" name="uri"/>
<input type="hidden" name="loc" value="en_US"/>
<input type="submit" value="Subscribe" id="ethowWFSubB" />
</form>
</div>
</div>

Please do not try to change this code because it can break widget. Only replace Ethow with your username. If you don't know what is your username then visit my blog's feedburner and consider looking at ULR. You'll figure out what is your username. (http://feeds.feedburner.com/Ethow)
I hope this tutorial helped you. Please follow EtHow to get more stuff. If you want to share this with your readers, please give backlink to this page or to demo page. If there is anything wrong don't hesitate to tell me.