Contact Form

Name

Email *

Message *

FeedBurner Subscribe and Download Widget For Blogger

Share This : Twitter Facebook Pinterest Google+ Email Reblog
Surprise! Syncboost Network is happy to announce that we are introducing FeedBurner subscribe and download widget for BlogSpot blogs. Which is first of its kind of the only widget available on Blogger platform. It allows distributing files through email subscriptions form to users after they have successfully subscribed to your blog.


Feedburner Subscribe and Download file Widget for BlogSpot


Email Subscription widgets will help to deliver content directly into the inbox of subscribers after new content is published each time on the blog. Providing files to users after subscription was never that so easy before in Blogger. Today, we are taking blogger one step ahead.

Let's get started.


Why are subscription widgets so necessary ?

Subscription Widgets helps bloggers to hang out with their readers and to build the better relation with subscribers. But, what if, you are a newbie, and your blog doesn't have any readers. You have been in an extreme situation, as every new blogger will face, at the beginning of his blogging career.

There are many techniques to increase the no's of readers for your blog. But, each technique requires lots of hard work and patience too. Because you can't raise thousands of readers overnight. There is 4 point USP as used by successful blogs, which works behind to increase no's of subscribers to them.

  • Providing Quality and Engaging Content with internal links.
  • Marketing Quality Contents on different platforms.
  • Encourage readers and subscribe to give their valuable comments, review articles for them.
  • Sharing amazing and unique downloadable resources like E-Books, Codes, Themes, Plugins, etc. at free of cost.

How to increase no's of readers is a million dollar question for the new bloggers. Because, they do not have enough amount to spend on premium tools like Aweber, Mailchimp, and the situation will be worse if they are using BlogSpot in place of WordPress.
Since, WordPress has some free plugins, which lets it's user to setup subscribe and download function to their blog.

But here, this article don't tell about WordPress Plugins, rather than it describes, how to setup FeedBurner Subscribe and Download widget for Blogger Blogs, which helps in increasing no's of subscribers.

Before this article, there is no widget available for BlogSpot platform, which provides an option to download the file after subscription with the help of FeedBurner E-mail Subscription Widget. But, Now the scenario has been changed.

Read Out: How to add Couch Mode to Blogger Blog.


What is FeedBurner Subscribe and Download Plugin ?

FeedBurner Subscribe and download plugin are variant of email subscription widget since we have only modified settings for it. So that, it works as like subscribe and download widget for BlogSpot Blogs. If you want to share free downloadable resources from your blog like design, E-books or anything. It can increase your subscriber magically.


How does this FeedBurner plugin will work ?

This plugin works in conjunction with Subscribe Via Email Widget. When a user Sign up for receiving newly published content of any blog over email, then FeedBurner Sends a confirmation link on mail id of such user for verification. After that, when a user clicks on verification link available by mail, he will be redirected to download page, from where he can download the shared resource. In the meanwhile, the subscription is automatically verified.


Pros and Cons

Pros,
  1. Work with any Blogger template.
  2. Small changes are required to do in template.
  3. No need to use Aweber like tools for subscription.
  4. It is totally Free.
Cons,
  1. You can provide only 1 file for download at one time. (This is due to restriction with FeedBurner)


Installation Steps

1Create a Demo Page for your Blogger Blog.
2Modify your blog template.
3Change the Settings of your FeedBurner Account.
4How to Check subscription status With FeedBurner.

Important Note
Please note that FeedBurner Tweaking Guide for Blogger covers Step 3 and 4. To Know more about this guide, read the rest part of this article.


Step 1 : Create a Demo Page for your Blogger Blog

1Go To Blogger > Pages.
2Create a New Page By Clicking New Page Button.
3Give it Title Demo Page
4Change Page options Settings available in right sidebar as shown in below image.

Disable Comments in Page options Settings

5Change Robots tags Settings available in right sidebar as shown in below image.

Select Noindex, Nofollow Robots Tags

6Click on Publish Button.
7Copy URL of Demo Page, so that, it can be used later.


Step 2 : Modify your Blog Template

Note
Backup Your Template Before Editing

1Go To Blogger > Template > Backup your template.
2Click Edit HTML.
3Search ]]></b:skin> in your Template.
4Paste following code just above it.


#view {
padding: 0;
margin: 0;
border: 0;
position: fixed;
top: 50px;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 93%;
background:url(http://2.bp.blogspot.com/-inJ_59r9FJ0/UuEXr4IQn0I/AAAAAAAAGWg/OSIKdAm4Wwg/s1600/loader.gif)no-repeat center center;
transition:all .4s ease-out;
}
#tab-demo {
width:100%;
height:50px;
top:0;
left: 0;
background:#222;
color:white;
font:normal 13px Arial, sans-serif;
z-index:99999;
position:fixed;
}
.closebutton {
background:#66af33 url(http://2.bp.blogspot.com/-yDP_V5EQ09U/UuC7diNnwYI/AAAAAAAAGVw/Hez_ZcpmFLE/s1600/close.png)no-repeat 15px 50%;
text-align:center;
height:50px;
padding:0px 20px 0px 50px;
position:fixed;
top:0;
right:0;
line-height:50px;
cursor:pointer;
color:white;
}
a.closebutton {color:white;text-decoration:none;}
.closebutton:hover {background:#579c26 url(http://2.bp.blogspot.com/-yDP_V5EQ09U/UuC7diNnwYI/AAAAAAAAGVw/Hez_ZcpmFLE/s1600/close.png)no-repeat 15px 50%}
.dlbutton:hover {background:#579c26 url(http://3.bp.blogspot.com/-MHVCwQQDhzQ/UuC7dgZiqvI/AAAAAAAAGV0/llC0hES500M/s1600/download.png)no-repeat 15px 50%}
.dlbutton, a.dlbutton {
background:url(http://3.bp.blogspot.com/-MHVCwQQDhzQ/UuC7dgZiqvI/AAAAAAAAGV0/llC0hES500M/s1600/download.png)no-repeat 15px 50%;
text-align:center;
height:50px;
padding:0px 20px 0px 55px;
position:fixed;
top:0;
right:158px;
line-height:50px;
cursor:pointer;
color:white;
text-decoration:none;
}
.demologo, a.demologo {
background: url(http://lh3.googleusercontent.com/-nMNBVaQjMCg/VuKWthpbIyI/AAAAAAAAAaE/n4CiT7eSJJ0U5PoxJOlPr4aV_il-rF3ygCCo/s40-Ic42/Syncboost-Logo-40x40.png)no-repeat left center;
padding-left:55px;
font-size:17px;
font-weight:normal;
font-family:Oswald, Arial, Sans-serif;
text-transform:uppercase;
line-height:50px;
left:15px;
position:fixed;
color:white;
text-decoration:none;
}

Note
Replace
http://lh3.googleusercontent.com/-nMNBVaQjMCg/VuKWthpbIyI/AAAAAAAAAaE/n4CiT7eSJJ0U5PoxJOlPr4aV_il-rF3ygCCo/s40-Ic42/Syncboost-Logo-40x40.png with your logo.
(42px X 42px Size Recommended)

5Search <body> in your template.
6Paste following code after <body> tag.


<b:if cond='data:blog.url != &quot;http://www.syncboost.com/p/demo-page.html&quot;'>

Note
Replace http://www.syncboost.com/p/demo-page.html with URL of Demo Page Created as per Step 1.

7Now, Search for </body> in your blog template.
8Paste below mentioned code just above </body> tag.


</b:if>
<b:if cond='data:blog.url == &quot;http://www.syncboost.com/p/demo-page.html&quot;'>
<script type='text/javascript'>
//<![CDATA[
function getQueryVariable(variable) {
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i = 0; i < vars.length; i++) {
var pair = vars[i].split("+");
if (pair[0] == variable) {
return pair[1];
}
}
return (false);
}
window.onload = function() {
var url  = getQueryVariable("url");
var download  = getQueryVariable("download")
document.getElementById('view').src = url;
document.getElementById('dl').href = download;
};
//]]>
</script>    
<div id='tab-demo'>
<a class='demologo' href='http://www.syncboost.com'>Thanks to Subscribe</a>
<a class='dlbutton' href='' id='dl'>Download</a>
<a class='closebutton' href='javascript:void(0)' onclick='document.getElementById(&apos;tab-demo&apos;).style.display=&apos;none&apos;;document.getElementById(&apos;view&apos;).style.top=&apos;0&apos;;document.getElementById(&apos;view&apos;).style.height=&apos;100%&apos;'>Remove Frame</a>
</div>
<iframe id='view'/>
<style>
body {background:white;}
</style>
</b:if>

Note
Replace http://www.syncboost.com/p/demo-page.html with URL of Demo Page Created as per Step 1.
Replace http://www.syncboost.com with URL of Your Blog.

9Save your Blog Template.


Step 3 : Change the Settings of your FeedBurner Account

This Topic is covered in "FeedBurner Tweaking Guide For Blogger".

Step 4 : How to Check subscription status With FeedBurner.

This Topic is also covered in "FeedBurner Tweaking Guide For Blogger".


FeedBurner Tweaking Guide For Blogger

FeedBurner Tweaking Guide is a wonderful guide written by me, which illustrates Step 3 and Step 4 in detail. So that, you can setup your FeedBurner Account for using it with this Plugin.

The reason for not including Step 3 and Step 4 in this article is that, after inclusion of above-mentioned steps, this post will exceed the default limit for a post on the blogger blog. BlogSpot doesn't allow individual post over 1 MB.

Here is the list of topics covered in this guide.

  • How to Modify Settings of Your FeedBurner Account.
  • Bonus Tip to use this Widget.
  • How to Check Status of Subscription in FeedBurner.
  • Roadmap to future versions of this Widget.

Here is Screenshot from this Guide.

Feedburner Tweaking Guide Front Page


Download FeedBurner Tweaking Guide

Now, you can download this guide without subscribe to this blog.
You have to subscribe to this blog to download this guide. Just click the GET YOUR COPY button as given below and fill out the form to complete the subscription request with your valid Email ID.



Download FeedBurner Tweaking Guide for Blogger. Click the button given below to receive your copy.
Note: you will be sent a confirmation email to confirm your email address. You must click the link in the confirmation email to complete your sign-up process.

Note
I have already sent this guide to existing subscribers of this blog. If you don't receive your copy or having any problem to implement this tweak to your blog. Then, Just Ping me up via Contact Page.

Credits

We would like to thank the helpful community of developers at CSS-Tricks who made this amazing JavaScript (It is heart of this beautiful plugin, without which development of this plugin is not possible). You can read more about this script at here.

We would also like to thank blog.kangismet.net for developing Demo and Download Toolbar for Blogger.

Note - We have modified Demo and Download toolbar and Script made by CSS-Tricks for this plugin.


What is Next ?

In coming Days, we will post about version 2 for this widget, which will be more lightweight and user friendly.

A quick favor from your side is required: Can you share this article with your friends, who just started blogging with BlogSpot Platform? So that, they can Setup this unique widget for their blog. Here is the direct link to this article, which you can share on Facebook, Twitter or email it to your friends.

[Permalink - http://www.syncboost.com/2016/03/guide-feedburner-subscribe-widget.html]

Do share your precious comments, suggestions on this plugin and let us know how we can make it better for BlogSpot Blogs.

You Might Also Like

Subscribe via email

Like the post above? Please subscribe to the latest posts directly via email.

8 Comments

Click to Comments
avatar
02 November, 2016 23:52 delete icon

I am having an issue with getting the subscriber emails verified. The link works great and it takes subbies to the Demo Page but it doesnt verify their subscription. I am using +${confirmlink} after the demo page url but no such luck. Any tips on what I may be doing wrong? Thanks!

Reply
avatar
18 November, 2016 14:55 delete icon

Replace +${confirmlink} With

http://www.your-blog-name.com/p/demo-page.html?url+${confirmlink}&download+file-downloadlink-here

Just Change the text with your blog details...

Thanks

Reply
avatar
09 December, 2016 17:14 delete icon

Awesome trick. Thanks for this tutorial..

Reply
avatar
01 April, 2017 22:28 delete icon

it worked for on my blog, but the page is too small for me. How can i make it wider?


Here is a link to the image of the page http://i65.tinypic.com/2h8bx1c.png

Thanks

Reply
avatar
10 April, 2017 07:03 delete icon

Hi, I followed your instructions and even downloaded the guide but it is not working. I tried another way but still not. Can you please help? I consider myself as a newbie and have this blog http://www.momsreverie.com/. Here's what I want to happen with my blog:

There is an image in the sidebar that says "Printables for Free Download". When someone clicks that image, it will lead to Printables page. In that page should have the PDF files for free download. But before downloading the PDF file, user must subscribe.

By the way, how to upload PDF file in blogger?

I know you can help. Thanks.

Reply
avatar
17 April, 2017 15:59 delete icon

Hi Rona,

I can help you on that issue. Please Follows all the steps given in this post and thereafter follows the step given in the PDF file Downloaded from my blog.

Since, You did not edit your blog theme and no code has been added in your theme. Therefore, It is not working on your blog.

If you want me to add this widget to your blog, then you can request at - http://bit.ly/S2DWIDGET

If you still have any question, then let me know.

Warm Regards,

Robin

Reply
avatar
17 April, 2017 16:00 delete icon

Tip - Please Upload PDF file to DropBox and then add it link to your blog.

Reply

Thanks you for Reading! We welcome and appreciate your precious comments, but make sure to add some value to this article while posting your comments. If you have any queries, suggestions or anything related to this article, feel free to ask them via comment form.

But, if your blog comments are a random "Thank you", "Useful Post", or anything that doesn't actually enhance value of the article, then we will be removing them and it won't be appeared below. Thanks for understanding and connecting with us. If you want to give us any feedback or report any errors, you can kindly contact us and we'll revert back soon.