Infinite Scrolling in Blogger

infinity Symbol

Infinite Scrolling refers to the ability to continuously load new content on a page without refreshing it which gives an appearance of endlessness. It is used by major sites like Google+ , Facebook and Twitter and pretty successfully at that. The biggest benefit being exposure to more content and faster browsing . We will see how to integrate it into our Blogger blog by using Infinite Ajax Scroll jQuery plugin



Features

1. Faster Loading
2. Content Exposure increase many fold
3. More intuitive for Touch devices
4. Best suited for image-heavy blogs
5. Simplified Navigation
6. Higher user Engagement 

Adding it to your Blog

Across the Whole Blog
It will work on the Home Page , Label Pages , Archive Pages as well as Post Pages ( the previous post will be loaded in full )



Only Home Page, Label Pages and Archive Pages
It will not work in the Post Pages





Video Tutorial



Some Tips

+1 , Tweet and Like Buttons will be loaded after every AJAX request , so if you have these social sharing buttons beneath every post then don't worry about them not showing

When the new post is loaded beneath a post ( If you choose the first option ) , then the Threaded comments in the newly loaded post will not work

To replace the Loader image , just search for .gif in the Widget code and replace that whole URL with another Image

To change the number of times before the user is asked to load more pages , search for triggerPageThreshold: and replace the numeric value ahead of it , if for example you set the value as 4 then the plugin will load new content four times before it asks you weather you want to see more content or not

onRenderComplete:function() function is used to tell the plugin what to do after the page has been successfully loaded , Here I have added a snippet which tells Google Analytics that a new page is loaded so that GA registers every AJAX request as a New Page visit

loaderDelay: tell how much milliseconds to wait before the new content is actually added to the page

For information about all the other options available in this plugin visit IAS Options

If you face any troubles in implementing , feel free to ask me via comments




Written by Prayag Verma

Find me on Twitter

Email Newsletter

Like what you read here in this post ?
Get new posts delivered straight to your inbox

Post a Comment

Legendary stuff... just can't beat it :-)

Simply Awesome .... no words ..... Dude please give me some online sessions :)

guri said...

From long time i was finding this but now my seach is finished on your site.

Thanks this is really awesome.

Anirudh said...

Hey Prayag! How to add this in Wordpress?

In the JetPack Plugin , there is a option for infinite scroll present

Eshelon said...

not working on mine :( template called "The style "
Any help ?

Hi Eshelon

What is your Blog URL ?

Unknown said...

Not working for me.

is there any way to make this work.

http://www.thinkdigitalworld.com

Unknown said...

Hi,
working well, but taking more time to load older posts. How can I change column color and date font size etc. Please check my blog : http://www.windiaw.com/
Title area is too wide how can i add title in left side and advertisement in right side? how to change 'read more' text small? Label list in footer looks not good with color and size. how can I change as three column footer?

All these questions, becoz I like your template,and check the changes I made with your great stuff.

my email : watchindiawide@yahoo.com

Unknown said...

how to disable it? Want back "Home", "Older posts" buttons

psydex said...

It doesn't seem to be working on my blog for some reason. Not sure why O_O
It would come in handy tho.

Hi again , I checked your blog, I have two ideas that will make it work on your blog

Firstly , you have jQuery version 1.6.2 , try using version 1.8.1 or 1.9.1 . For that just change URL from
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js'></script>

to
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js'></script>
or
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>

If this doesn't work , then add the following script just before the Infinite scrolling code ( As it in the original gadget )

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js'></script>

This will load two instances of jQuery in a page , but this might work

psydex said...

I tried what you suggested but nothing worked.

When using JQuery 1.9.1 my featured content slider ain't working, so i updated to 1.8.1 which works fine.
Tho the infinite scrolling still don't work (note that my custom numbered page nav disapears when i put infinite scrolling code, i thought it might be causing the issue but when i remove the numbered page nav - infinite scrolling still don't work).

Any other ideas?

rajesh said...

i have set 5 posts on home page and they are being displayed properly but when i scroll down from the 6th post the "read more" link is not being displayed instead the whole post is displayed...any idea ?

not working on my blog so i removed it

Anonymous said...

Will this affect my page views?Because Users would not click the links and direct to another page in my blog,which will reduce in the no. of page views...Is there any way to do that?I think it will affect my Google page rank and alexa rank

Malik said...

Please reply urgent
How to disable it it is not disabling link to blog.
http://nerdsfuel.blogspot.com/2013/09/romotive-turn-your-iphone-into-robot.html

Rakesh said...

When I add this script it activates infinite scrolling, but the posts below the first five are opening in full, I need only preview like the first few. How do I get that?

hey bro plz help me it is not working in my blog http://deathofjesus.blogspot.in/ plz tell me what to do ??? plzzzz

Hi Kashif Khalid
Can you put the code in your blog , so that I can see what's causing this issue
I checked your blog even with the code missing and found that there were 3 instances of jQuery in it , Please try to remove them , they only lead to conflicts and slow page speed

Unknown said...

Hey Prayag the automatic readmore doesnt work when the post is loaded.Do tell me a solution
http://diamond-flatmag.blogspot.in

After that carries no more posts image appears within the posts.

http://testes-do-avalie-a-foto.blogspot.com.br/

Can you help me please?

Arun said...

I can't add widget, is there any way to just copy past content??

ire said...

Whoops, that's an error. whe adding to blog. what's that?

As Arun said, I am also getting an error while loading the Widget. Is there a way to copy the script and paste appropriately.

Thanking you in advance.

Hi Hari , Arun and Iresh
The issue with the widget generator is now fixed , the code will get added in your blog when the "Add to Blogger" button is clicked

Anonymous said...

tumbnail img dosn't not show in the new loaded post? can you help

Unknown said...

Hello. Your article is good. I was trying to fire up masonry+infinite scroll script for my customers blog and meet a big problem. The deal it - when scripts are on everything looks like working but only on the frist screen of scroll. Nex screens becomes without a pictures and summary. I did a research and find out somth strange code on the layout. The functions calls createSummaryAndThumb and generates little pictures for the page and fancy summary. So on the first screen its working allright but then - it doesnt. I tryed to put the functions call in my scripts where i turn on the infinitescroll but it doesnt works - it takes some strange blogger variables as argumetns and i dont know how to get them.. have anyone expereince with it? Need it urgently, latng for simple (like i thought ) job.

Anonymous said...

lame.. showing on blog posts www.kotakujogos.blogspot.com.br

Hi Carlos

Remove your current widget that you added and use the one with the name "Only Home Page, Label Pages and Archive Pages" as shown in the post