April 13, 2012

How to add infinite scrolling to Blogger blogs

One nice thing I like about Blogger’s Dynamic Views is that they remove older posts/newer posts links from your blog and load more posts as you scroll to the end of a page.  (This is commonly referred to as infinite scrolling.)  Adding infinite scrolling to your Blogger blog with a traditional template is not that hard.

If you don’t care about the details and you only want to enable the feature on your blog, click on the button below and add the code to your blog.  Infinite scrolling should just work on your blog, in most cases.  If you have a custom template, though, you may need to tweak the code a little.  (Scroll down to “Frequently asked question” section for details.)

If clicking on this button does nothing, or it doesn’t work for some reason, you can add this code manually:
  • Add a HTML/JavaScript gadget to your blog.
  • Leave the gadget’s title empty.
  • Paste the following code as the gadget’s content:
    <script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script>
    <script type='text/javascript' src='//m-misc.appspot.com/js/blogger-infinite-scrolling.js'></script>
  • Save the gadget, and you’re done.
The code for the widget is available on Google Code.  Feel free to copy or adapt the code.  A few points worth mentioning:
  • This code uses jQuery library, so don’t forget to include it.
  • Custom template blogs may have to change the value of postContainerSelector variable in the code.
  • I have manually added +1 buttons to my blog.  Dynamically loaded posts won’t have the +1 buttons initialised; to fix that issue, I had to call gapi.plusone.go() every time new posts are added to the page.
  • _WidgetManager is a JavaScript object present in Blogger blogs.  You can query this object to find some page metadata.  This code uses _WidgetManager to determine if the current page is showing a single post.  Infinite scrolling is not meaningful when only a single post needs to be displayed.

Frequently asked question

  • Q: My blog uses a script/widget that adds post thumbnails or related posts.  When I add infinite scrolling, only the first few posts have thumbnails/related posts.  How to fix that?
    A: Simple answer is that this script doesn’t work well with other scripts that add content to posts.  But if you are willing to change the code, you can get both scripts to work together.  Right after new posts have been added — which is the line after $(postContainerSelector).append(newPosts); in the script — add the JavaScript that will make your other widget update itself.
  • Q: The script doesn’t work on my blog.  Can you help me debug it?
    A: While I really wish I could help everyone use this script, it’s practically not possible for me to look at everyone’s blog and see what’s wrong.  If I don’t respond to your comment quickly (or at all), it’s because I am just too busy with things like my day job.  I’m sorry I couldn’t help you with your blog.
  • Q: Why can’t I post a comment?
    A: Contact me through Google+ if you need to ask me anything. I believe you can send me a message even if you don’t have a Google+ profile yourself.

Change log

  • Mar 9, 2013: Moved the script to m-misc.appspot.com because Google Code is not setting the right content type.  This disabled the script completely in Google Chrome.
  • Nov 19, 2012: Version 1.6 was released with support for Automatic Thumbnail and Read More.
  • Oct 17, 2012: Version 1.5 was released with support for Facebook buttons and a fix for Disqus integration bug.  Thanks to Alex for sharing Facebook support code in a comment.
  • Oct 11, 2012: Version 1.4 was released with support for Disqus comments.  Do not use this version; Disqus integration is broken in this version.
  • Sep 20, 2012: Version 1.3 was released with support for Google Analytics.  If a blog uses Google Analytics, the script will register all automatic post loading as pageviews.  To Google Analytics, it will look like the reader clicked on the Older Posts link every time the script autoloads posts.
  • May 30, 2012: Version 1.2 was released with fixes for all known bugs.
  • Versions up to (and including) 1.1 have known bugs.

208 comments:

  1. Very nice, many thanks for sharing Muthu Kannan ;)

    ReplyDelete
    Replies
    1. I'm glad you found this useful :)

      Delete
    2. Thanks Mathu, i'm testing it and i miss a notice at the end when there are no more posts to show something like: "no more posts", i wondered how to add it :)

      Delete
    3. Hello Mathu, i have an observation: when you are viewing the posts by label, the infinite scroll works but, when it done to display all the posts, appears this message: -No posts with label undefined. Show all posts- several times, you can see it in your blog :)

      Delete
    4. Hi, Karla. Thanks for testing this out.

      To add "no more posts", you'll have to change line 27 in http://code.google.com/p/manki-scripts/source/browse/blogger-infinite-scrolling.js. Changing that line to read something like loadMoreDiv.text('No more posts'); *should* work. (I haven't tested this personally, so it may need some small tweaks to make it actually work.)

      The "No posts with label undefined. Show all posts" is a known issue. I thought I'd fix this later on, thinking not many people would notice the problem... looks like I was wrong :) I'll see if I can fix that somehow.

      Thanks again for the interest.

      Delete
  2. Thank so much Muthu, i'll be awaiting the update ;)

    Have a great day!

    ReplyDelete
    Replies
    1. Sorry Karla, it took so long to fix the problem. I have updated the script, so now it works fine. Do one of these to upgrade:

      a. Delete the HTML widget that you added previously from this blog post and re-add it.
      - OR -
      b. If you are comfortable editing the widget HTML by hand, change "//manki-scripts.googlecode.com/files/blogger-infinite-scrolling-1.0.js" to "//manki-scripts.googlecode.com/files/blogger-infinite-scrolling-1.1.js". (The only change is 1.0 -> 1.1 in the script address.)

      Feel free to ask me if you need any assistance.

      Delete
  3. Hi. I find your post useful and im thankful to you :).
    But can you help, i use this script and its working, but when the last post already loaded, it just keep only loading. I wonder why? Thanks for help! :)

    ReplyDelete
    Replies
    1. Ooooops. I mean, it only load for about 1 time only, then it will just keep on loading but didn't load the next set of post. Aww.

      Delete
    2. Hi Mark. Thanks for your reply. I'm sorry I don't understand the problem you're describing. If you're still using the older version of the script, you need to upgrade to the latest version (see this comment). If that doesn't help, please share your blog's URL so I can take a look. Cheers!

      Delete
    3. Check my blog: http://tweetopia.blogspot.com/

      It will load for 1 time, then it will get stock on loading. Im using the latest one :).

      Delete
    4. Thanks for the link, Mark. Looks like you have uncovered yet another bug in the script. Let me take a look sometime later today. I'll post a reply to this comment when I find out the cause of the issue.

      PS: your blog has a very interesting template.

      Delete
  4. Looking forward to see a new update. Thanks for your work :)! I love your script :).
    Hehehe, thanks. So hard to make a look-alike of twitter :)).

    ReplyDelete
    Replies
    1. Yeah, for a second I thought "hey, this is not a blog... where am I?" :) It doesn't look like a Blogger blog at all. Must have been a *lot* of work!

      So, I found the bug and I have updated the script. Like the previous time, you can upgrade by changing the version number in script URL to 1.2 or by re-adding the script to your blog. (See my previous comment for details.) Thanks for reporting the issue.

      Delete
    2. Haha! Yeah, *lot* of work.
      Btw, your awesome! Working perfect! Thank you!!! :))).

      Delete
    3. Oh, thank you :) I am glad the script works now.

      Delete
  5. Wow thank you so much!! This is great!

    ReplyDelete
    Replies
    1. I'm glad you like it. Thanks for the comment.

      Delete
  6. thank you! this is great!! :))

    ReplyDelete
  7. Thank you. Good job.

    I found 2 small problems that I solved with CSS:
    Generated elements
    <div id="uds-searchClearResults" class="gsc-clear-button"> </div>
    and
    <div style="text-align: center; font-size: 150%;">
    <a href="javascript:;" style="display: inline;"> Load more posts </a> .... </div>
    appeared on (z-index) the contents of the blog without being selected.

    I solved it with a bit of CSS:

    . blog-posts.hfeed + div {display: none;}
    You can see it: http://ksesocss.blogspot.com/

    ReplyDelete
  8. This comment has been removed by the author.

    ReplyDelete
    Replies
    1. Hello, 5202. Thanks for trying out the script :)

      Your blog includes the script http://pagead2.googlesyndication.com/pagead/js/google_top_exp.js. This script, for some reason, fails to load (or encounters an error while running). That error prevents the script from the rest of the page from running. Try removing that script, and it should work. Feel free to ping back if you need support. (Contact me through my Google profile if commenting here doesn't feel very convenient.)

      Delete
  9. Hi Muthu,

    thanks for your very helpful (and fast!) response!

    http://pagead2.googlesyndication.com/pagead/js/google_top_exp.js script is part of google javascript and removing it also terminated "threaded comments" ... not good ...

    But: I studied google script and learned, how it works - i found out, that it needs macro:include id='footer-sections' for doing well. I bring the macro:includes for footer section back to my markup and ... now, your script works like charm!

    Your note was very important to find error, without it, I would have searched for hours ... second time: Thanks!

    ReplyDelete
  10. I have been looking for a code like this for a while. Thank you so much!

    ReplyDelete
  11. What can I do?

    myblog: http://www.aabouzaid.com/

    ReplyDelete
    Replies
    1. Hi, Ahmed. Your template is slightly different from most Blogger templates. Specifically, line 56 in the script is not able to find the "older posts" link on your blog. You'll have to copy the script and modify it to work on your blog.

      Delete
    2. ya, this is what tried to do, but I couldn't find where I should make changes (specially that "blog-pager-older-link" exist in my template, but your hint make it quite clear :-)

      now it's working like a charm.

      Thanks Muthu very much for this excellent script ^_^

      Delete
  12. Legend! Thanks so much Muthu!

    ReplyDelete
  13. Ok, small question ...

    there is option to make it non-automated loading and add button "more post" or some thing like this? (http://i.imgur.com/X3tZA.jpg)

    ReplyDelete
    Replies
    1. Yes, there is :) Check the source of cookingandme.com for something similar. Script in <div class='widget HTML' id='HTML8'> is what you are looking for. Feel free to ask me if you need any hints.

      Delete
    2. Very good!
      Thank you very much :-)

      Delete
  14. Many thanks!! Great work! I just need to add a fade in effect. Thanks!

    ReplyDelete
  15. Hi. Firt off all, thanks for the great job! I have 2 blogs, and in one, works fine, but in the second one, only worked at the first time i used. Now dont work and I dont know why, I tried everything!! Help please!! Blog -> http://futebolmaismais.blogspot.com/

    ReplyDelete
    Replies
    1. Your blog doesn't seem to have "older posts" link at the bottom. Can you confirm that if it does (or doesn't) exist? If the "older posts" link is not found on the page, the script doesn't do anything.

      Delete
    2. Hi, Muthu. Thanks for your help, it works now. "older posts" not missing but appeared to be an error. Now just missing to load the "like" button each time I press "load more posts". Many thanks! (:

      Delete
    3. Glad it works now :)

      By "like" button, do you mean Facebook Like button? (I don't see it even before clicking on "load more posts", for what it's worth.) You may have to call some Facebook API function right before (or after) the gapi.plusone.go() in the code. Feel free to ask for help if you need. Cheers!

      Delete
  16. Hey Muthu Kannan!
    I've been looking for infinite script since the Dynamic views Rolled Out & finally i came across to your post & found it :)
    Thanks alot for all the efforts & work done, Really appreciated.

    Just one little question!!
    I want to Put a small text beside the loading.gif animation that say's "Loading more Posts.."

    Please help me to get this thing work, because i have Heavy images on my posts and that took a little longer than normal so a text would be worth than Loading Animation.

    Thanks & Regards
    -XeBii

    ReplyDelete
    Replies
    1. Hi XeBii, thanks for the comment. I am glad this is useful to you.

      http://code.google.com/p/manki-scripts/source/browse/blogger-infinite-scrolling.js#67 is where the "load more posts" element is constructed. The variable img there is the animation. What you can do is:

      1. Delete the variable img, and create a new span its place:
      var text = $('<span style="display: none;">Loading more posts...</span>');
      2. Add it to loadMoreDiv instead of img:
      loadMoreDiv.append(loadMoreDiv);
      3. Throughout the script, change loadMoreDiv.find('img') to loadMoreDiv.find('span').

      This should work, although I haven't tested it. Please feel free to ask for assistance if this doesn't work.

      Delete
  17. Good thing I came along with this post but I have a problem. I don't know how to install this because my blog's customized. :(

    ReplyDelete
    Replies
    1. Hi, Kimmy. Can you try simply adding the widget using the "Add to Blogger" button? Even when the template is customised, this may just work. If it does not work, leave a reply with your blog URL; I'll be happy to take a look.

      Delete
  18. நல்ல ஸ்கிரிப்ட் தான். நானும் பயன்படுத்த தொடங்கி விட்டேன். நன்றி !

    ReplyDelete
  19. Hi Muthu,

    This is absolutely great! Thanks for sharing! Just wondering how infinite scrolling will affect page view count? If viewers have scrolled down what was supposedly 5 pages worth of content will that translate into google analytics as well?

    ReplyDelete
    Replies
    1. Good question. The stats that Blogger shows count each automatic post loading (because the viewer scrolled to the bottom of the page) as a pageview, so you're likely to see a slight bump in total pageviews.

      For Google Analytics, we'll have to explicitly register these automatic page loads. Adding this code right after line 20 will do that:
      if (window._gaq) {
      _gaq.push(['_trackPageview', olderPostsLink]);
      }

      Delete
    2. Okay, I have updated the script to do this for everyone. Delete the HTML widget from your blog and re-add it using the 'Add to Blogger' button. (Alternatively, you can change blogger-infinite-scrolling-1.2.js in the code to blogger-infinite-scrolling-1.3.js. That's exactly the same.

      Thanks for asking this question. I could improve the script because of you.

      Delete
  20. இதையே Event பகுதியில் கண்காணிக்க _gaq.push(['_trackPageview', olderPostsLink]); இனை _gaq.push(['_trackEvent', 'Load more', 'loaded', '/index.html']); என்று மாற்றினால் சரியா?

    ReplyDelete
    Replies
    1. Correct. '/index.html' என்பதற்குப் பதிலாக olderPostsLink உபயோகித்தால் புதிதாக load ஆகும்  URL-ஐயும் பதிவு செய்து கொள்ளலாம்.

      Delete
  21. நன்றி! மீள இணைத்து இருக்கிறேன். இயங்காவிட்டால் மறுபடியும் இங்கே வருகிறேன்.

    ReplyDelete
  22. OlderPostsLink என்று கொடுத்தேன். ஆனாலும் எந்த மாற்றமும் இல்லை. OlderPostsLink தான் event பகுதியில் இறுதியாக தோன்றுகிறது. அதற்கு அப்பால் செல்ல முடியவில்லை.

    ReplyDelete
    Replies
    1. OlderPostsLink என்பது தவறு. Small letter 'o'-கு பதிலாக capital letter 'O' உபயோகிப்பது பிழை.

      Delete
    2. அதே போல், olderPostsLink-ஐச் சுற்றிலும் quotes இருக்கவும் கூடாது. _gaq.push(['_trackEvent', 'Load more', 'loaded', olderPostsLink]); என்பது சரி. _gaq.push(['_trackEvent', 'Load more', 'loaded', 'olderPostsLink']); என்பது தவறு.

      Delete
    3. நீங்கள் சொன்னதை தான் பயன்படுத்தினேன். இப்போது மீள இணைத்து உள்ளேன். நன்றி!

      Delete
    4. இவ்வாறு மாற்றிய பின்னர் இது இயங்கவில்லை. நான் பயன்படுத்திய ஸ்கிரிப்ட்:
      _gaq.push(['_trackEvent', 'Load more', 'loaded', olderPostsLink]);

      Delete
    5. This comment has been removed by the author.

      Delete
  23. infinite-scrolling முறையே இயங்கவில்லை. _gaq.push(['_trackEvent', 'Load more', 'loaded', "olderPostsLink"]); இப்படி இட்டால் (quotes உடன் ) infinite-scrolling இயங்குகிறது. Trackingகும் நடைபெறுகிறது. ஆனால் OlderPostsLink தான் event பகுதியில் இறுதியாக தோன்றுகிறது.

    ReplyDelete
    Replies
    1. இது குறித்து Google+-ல் உங்களுக்கு ஒரு தனிப்பட்ட தகவல் அனுப்பியிருக்கிறேன்.

      Delete
    2. நன்றி. நீங்கள் ஏன் உங்கள் வலைப்பூக்களில் இவற்றை தொடர் ஒன்றுமே வைப்பதில்லை? Feed burner அல்லது friend connect ஆவது வைக்கலாமே.

      Delete
    3. இந்த வலைபதிவின் FeedBurner முகவரி http://feeds.feedburner.com/manki. இந்த வலைபதிவின் default feed இந்த முகவரிக்கு திருப்பி அனுப்புமாறு மாற்றியமைக்கப்பட்டுள்ளது. Google Reader-ல் (அல்லது வேறு ஏதேனும் feed reader-ல்) blog.manki.in என்று கொடுத்தால் அதுவே இந்த FeedBurner முகவரியைக் கண்டுபிடித்துவிடும்.

      Friend Connect ரொம்ப மெதுவாக பதிவிறக்கம் ஆவதால் அதை நீக்கிவிட்டேன். பெரும்பாலான புதுப் பதிவுகளை நான் Google+-ல் அறிவிப்பேன். சில நண்பர்கள் அங்கிருந்து என் பதிவுக்கு வருவதும் உண்டு.

      Delete
  24. நான் இதை http://tatwitter.blogspot.com/ இல் இணைத்தபோது இயங்கியது. ஆனால் load ஆகும் tweetகளில் CSS வேலை செய்யாது அலங்கோலமாக உள்ளது.. பலவிதமாக CSS சேர்க்க முயற்சித்தும் பயனளிக்கவில்லை.

    ReplyDelete
    Replies
    1. இது ரொம்ப complex ஆன template. வேலை பார்க்க வைப்பது கொஞ்சம் சிரமம் தான் :(

      Delete
    2. கண்டுபிடித்து விட்டேன் :)

      window._gaq.push இருக்கிறதல்லவா? அதற்கு முன்பாக twttr.widgets.load(); என்று சேர்க்கவும்.

      Delete
    3. நன்றி! நன்றாக இயங்குகிறது.
      ஆனால் ஒன்று load முடிந்து மறு load நடந்தால் மட்டுமே முதல் load ஒழுங்கமைகிறது.

      Delete
    4. முதலில் சொன்னது தவறு. plusone.go(); என்பதற்கு அடுத்ததாக twttr.widgets.load(); என்று சேர்க்கவும்.

      Delete
    5. நன்றி! நன்றாக வேலை செய்கிறது!!

      Delete
    6. :-)

      நல்ல வலைபதிவு வைத்திருக்கிறீர்கள். முழுவதையும் வாசித்தேன்... நன்றாக இருக்கிறது.

      Delete
    7. எது? Twitter? சும்மா தான் உருவாக்கி பார்த்தேன்...

      Delete
    8. ஆம், tatwitter.blogspot.com. எனக்குப் பிடித்திருக்கிறது.

      Delete
    9. இப்போது தான் ஆரம்பம். எல்லாம் நானே பதிய வேண்டி இருக்கிறது. நாளடைவில் சரியாகலாம் என்று நினைக்கிறேன். எவ்வாறாயினும் உங்கள் infinite-scrolling தான் அதன் கட்டமைப்பில் அடி நாதமாக இருக்கிறது. உங்களுக்கு தான் நன்றிகள் !!

      Delete
  25. Hello! I added infinite scrolling to my blogspot blog (judixo.blogspot) however, my infinite scrolling makes it so that you cannot leave comments through disqus after the first 3 entries. (3 entries were what my default posts per page were)

    I am not familiar with code so I have absolutely no idea how to fix this error. Could you assist or at least point me in the right direction? I don't want to remove disqus and lose all of my comments, but I really have been looking forward to adding and keeping infinite scrolling on my blog.

    ReplyDelete
    Replies
    1. Hi there, Judikins.

      Looks like Disqus and this script won't work well together. I have contacted Disqus asking for a solution. I'll release a fix as soon as we have a solution in place. Sorry for the inconvenience.

      Delete
    2. Hi again. I have added support for Disqus comments. Can you try adding the code again to your blog?

      Delete
  26. Hi muthu,

    this doesn't work with my site (lolazy.com -- removed the script for the moment)
    is it because i'm using a custom template?

    regards, Jo.

    ReplyDelete
    Replies
    1. Hi there, Jo.

      If you change line 5 in the code to var postContainerSelector = 'ul.blog-posts'; the script will work on your site.

      Delete
  27. Hey, that's an awesome script. Keep it up! Thanks for that.

    ReplyDelete
  28. Thank you for share this nice code.
    one question, How to load the Facebook(using fb sdk) Like button dynamically ?

    ReplyDelete
    Replies
    1. Hi, Alex. I think you need to do something similar to what I have done for supporting Disqus. The code change required is at goo.gl/gRxfx. If you need any help in modifying the code, share your blog URL. I'll be happy to take a look.

      Delete
    2. Hi Muthu, I will try a bit more to make it work. Actually i don't have blogger blog yet. just trying to build a template to meet my needs(integrate FB like button & colorbox to your code) before completely move to blogger. so i can share my blog URL in private way Or when my blog is ready for "public mode", I'd like to show you. thanks for your kind answer ;)

      Delete
    3. For those who would add FB like button...
      window.fbAsyncInit = function()
      {
      FB.init({appId: your ID here, status: true, cookie: true, xfbml: true});
      };
      (function()
      {
      var e = document.createElement('script'); e.async = true;
      e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
      document.getElementById('fb-root').appendChild(e);
      }());
      then, Add the following to Muthu's code to be called after page load:

      FB.XFBML.parse();
      that's it ! now i would add colorbox ;)

      Delete
    4. Nice. Thanks for sharing the code snippet.

      Delete
    5. Thanks to you, I have now added support for Facebook integration in the script itself. Local code modification won't be necessary anymore :)

      Delete
  29. Thank you so much for a simple and useful method.

    ReplyDelete
  30. Just an idea... since you relay in jQuery, why not to use $.getScript('//' + window.disqus_shortname + '.disqus.com/blogger_index.js') instead of the function loadDisqusScript?

    Also, parsing the whole new document with $(html) is not optimal for performance, since the browser keeps a reference for every DOM node, and you are re-downloading a new page.

    I really think the optimal way to do that is with the blogger JSONP feed, generating the HTML (maybe rendering a template)...

    I can't do it right now since I haven't got a computer (I'm writing from my phone), but I'll try to do a version of this script and fork yours.

    Anyway, thanks for the script and keep the good job ;)

    ReplyDelete
    Replies
    1. Thanks Emilio. I am a jQuery n00b, and I didn't know about $.getScript. Will update the script to use that instead.

      If you improve the HTML parsing code, please send me a link to your version so I can fix my version too. Or you can send me patches, which I'll be more than happy to merge :)

      Delete
    2. I've updating the script: you can see it here.

      After a thinking a bit, I realised your method is the only one you can use without changing the template (though I still think the best method should be the feed). But I changed lots of things, like the request method, jQuery sandboxing (to avoid conflicts with other libraries), solved IE problems (permission denied when you parse a script), etc

      Delete
    3. Looks a LOT better than my version. Many thanks Emilio for the improvements. Will update my script.

      Delete
  31. It would be possible to combine "automatic thumbnail and read more function" with "infinite scrolling"? I installed both scripts, shows only first posts with summary and thumbnail but when you scroll down it just shows full posts and not with summaries with thumbnails . Thanks!

    ReplyDelete
    Replies
    1. From a cursory look, it looks like it's possible.

      newDom.find('div.post').find('a[name]:first').each(function(idx, elt) { createSummaryAndThumb($(elt).attr('name')); })

      Adding this code should be sufficient, I think. I'll try to add this to the script in a few days.

      Delete
    2. Hi, Gonzalo. Can you try adding the widget now? Automatic Thumbnail and Read More seems to work now. Thanks.

      Delete
    3. Hi Muthu Kannan,

      I'm newbie and I've same problem with gonzalo. I use latest version 1.6 but when I scroll down it just shows full posts and not with summaries with thumbnails.
      what I must to do? where I put that code above?

      Thanks.

      Delete
    4. Hi, Januar. This is a common problem many people have. You have to modify the script (by a little bit) to work on your blog. I have updated the post to add some details about this. (Look for "frequently asked question" in the post.)

      Delete
  32. Hi Muthu Kannan

    I am new to blogger and I wud like to add the infinte scrolling feature to my posts and pages.So cud u pls tell me how to use this ?

    ReplyDelete
    Replies
    1. Hello, flames. Welcome to Blogger!

      Here's what you need to do:
      1. Click on the Add to Blogger button in this page.
      2. Select your blog if you have more than one.
      3. Leave the Title field empty.
      4. Click on Add Widget.

      That's all. :)

      Delete
  33. Good day. First I would like to thank and congratulate you for this script, I had long looked for something like this.

    I would also ask you the following question:

    How do I link "Load more posts' work? I was taking a look at the script and think what is missing is the URL for the link Olderpostlink (line 95), but I do not know how to insert it into the script.

    What I want is to something that happens on the page feeds from Facebook, where it automatically loads itself two or three page and appears at the end the button with the link to show further updates (manually).

    Sorry, but my English is terrible.
    : D

    Thanks in advance.

    ReplyDelete
    Replies
    1. Hi Pedro,

      The "load more" link does not have a target URL because a script is executed when the link is clicked.

      See my comment above to see how to disable automatic loading of the posts.

      PS: Your English is alright. I'm not a native English speaker either.

      Delete
    2. Thank you Muthu.

      I found a problem seems in my tamplate. The infinite scrolling is working but the summary of the posts only works on the first page load the other pages it does not work. Its you help me figure out what 's going wrong?

      Again grateful Muthu

      Delete
    3. Hi again, Pedro. You'll likely have to add one line to the script. What's your blog URL? I can take a look and see why it isn't working for you.

      Delete
    4. Hello Muthu,

      this is the link to my blog, a blog test yet:
      http://scrollinginfini.blogspot.com.br/


      this is the link to the XML file of my blog:
      https://dl.dropbox.com/u/53901713/template-INFINITE%20SCROLLING.xml


      And this is a link to two examples cited here in the comments and ta working perfectly:
      http://ksesocss.blogspot.com/

      thanks again

      Delete
    5. Your blog (http://scrollinginfini.blogspot.com.br/) has a custom "pager". Most Blogger blogs have "older posts" and "newer posts" links for navigation, but your blog has links for jumping directly to 1st, 2nd, 3rd, etc. pages.

      If the template has one older/newer posts link pair, the script replaces them with a "load more" link. Since your blog has custom navigation menus, the script is not able to change it.

      Delete
  34. இதில் ஒவ்வொரு தடவையும் விளம்பரங்களை (Adsense) தோன்ற வைக்க முடியுமா? எப்படி?

    ReplyDelete
    Replies
    1. It would have been possible with AdSense for AJAX, but that product is not available anymore. So the answer is No.

      Delete
    2. அப்படியா! GFP இலும் அப்படிதானா?

      Delete
    3. GFP என்றால் என்ன?

      Delete
    4. Google Doubleclick for Publishers

      Delete
    5. நான் DoubleClick உபயோகித்ததில்லை. DoubleClick விளம்பரங்களை எப்படிக் காட்டுவது என்று எனக்குத் தெரியாது; மன்னிக்கவும்.

      Delete
    6. பரவாயில்லை! Mashable.com இல் Dynamic template மூலம் தொடர்ந்து scrolling இன் போது Adsense வருகின்றது. அதை தான் கேட்டேன். அவர்கள் Premium Ad Publisher என்று நினைக்கிறேன். Wordpress 3.5 இல் முன்பிருந்ததை விட infinite-scrolling நன்றாக இருக்கின்றது.

      Delete
  35. Under
    "Edit content"
    appear nothing.
    What should I do?

    ReplyDelete
    Replies
    1. Hmm, I don't know. What browser are you using? I also heard that Add Widget feature is currently broken on Blogger. You could be facing that issue, maybe?

      Delete
  36. Thanks for this amazing script Muthu! I'm a novice at jQuery so I was wondering if you can explain how this script works. Thanks.

    ReplyDelete
    Replies
    1. Hi, Rich. When a page is loaded this script tries to find "older posts" link in it. If it finds the link, it removes that link from the page and remembers the URL of that link. When the page is scrolled to the bottom, the script loads the URL it previously noted (the Older Posts URL) using AJAX and adds those posts to the bottom of the page. Hope this helps.

      Delete
  37. This comment has been removed by the author.

    ReplyDelete
  38. Hello there Muthu, I was really hoping you could help me get this working on Blogger Simple View. I've added jQuery " _script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript">
    _script src='//manki-scripts.googlecode.com/files/blogger-infinite-scrolling-1.6.js' type='text/javascript'_>

    This all works pretty fine for me, but it has caused a different problem for me actually.

    All my images that would normally be on any page after the first one do not display properly. They are coming up FULL res, and I would like it to continue the default preview blogger usually uses. Help! Thanks ;)

    ReplyDelete
    Replies
    1. Hi Allan. Fixing this should be fairly easy. You'll have to add one or two lines to the script to make it work for your template. If you can give me your blog's URL, I'll see what needs to be added to the script.

      Delete
  39. Hi i also added the script (through direct installation) and it doesnt work. I look for the code to revome it but cannot find out where it is. PLease help! What happens and it doesn't work? can i make it work or at least remove it? After installing it it doesn't work, however it has expanded my footer downside.. I generally have problemes making anything jquery work! my blog is http://nea-news.blogspot.com

    ReplyDelete
    Replies
    1. Hi. The script would be an HTML/JavaScript gadget on your blog. Look for an HTML/JavaScript gadget on your blog with the code specified in this post. Removing that gadget will remove the script completely. (I have also updated this post now with instructions for adding the code manually.) I just checked; nea-news.blogspot.com does not have this script installed.

      The script will not work on your blog because yours is a custom template. It's possible to modify the script to work on your template, but that will require studying your template.

      Delete
  40. Hi ! Can you tell me if infinite scroll could do in my blog ?
    awesome staff

    http://feedmemoreplease.blogspot.fr

    ReplyDelete
    Replies
    1. Hi, Clément. Your blog doesn't have "Older Posts" link now. That link is one of the requirements for the script to work.

      Delete
    2. Thanks you very much for this faster reply !! :D

      Delete
  41. Thankyou, thankyou, thankyou, i love it. :)

    ReplyDelete
  42. Hello! can you please tell me if your script can work on my custom template? The tamplate had an integrated version for infinite scrolling but that only worked for the first click. Is there any way to implement your scrip insted of thatone?

    http://we-renderteam.blogspot.ro/

    ReplyDelete
    Replies
    1. Hi. Looks like your blog's template uses JavaScript for rendering each post in the home page. This script will not work on such templates. Sorry!

      Delete
  43. Hi!The script is pretty cool but i have a problem...My posts have this structure:

    script type='text/javascript'

    function bp_thumbnail_resize(image_url)
    {
    var image_size=250;
    var show_default_thumbnail=true;
    var default_thumbnail="http://1.bp.blogspot.com/-_r4aSE9uo7o/UDs_8lMSAVI/AAAAAAAAB40/PcYV07J3aSo/s1600/3d-Wall-Gallery_33.jpg";

    if(show_default_thumbnail == true && image_url == "") image_url= default_thumbnail;
    image_tag='img src="'+image_url.replace(/s72-c/, 's400')+'" class="postthumb"/>';
    if(image_url!="") return image_tag; else return "";
    }
    //]]>
    script


    div class='auto-thumbnail'>





    div class='eikona'>
    script type='text/javascript'>
    document.write(bp_thumbnail_resize(""));
    /script>
    /div>







    div class='snippet'>

    /div>






    /div>







    So the result is that the custom thumbs appear only until the 1st scroll! The next posts dont have any thumb!
    Check : http://testlcity.blogspot.gr/

    ReplyDelete
    Replies
    1. Your template uses JavaScript for rendering posts. This script will not work on such templates. Sorry!

      Delete
  44. HOW CAN I ADD THIS CODE TO MY TEMPLATE IN BLOGGER? I USE CLASSIC TEMPLATE AND HTML CODES: http://gahv.blogspot.com
    PLEASE I WANT TO SHOW MY ENTRIES LIKE THAT.
    THANKS!!

    ReplyDelete
    Replies
    1. Hello. I am sorry to say that this script does not work on classic templates. It works only on Layouts templates.

      Delete
  45. Nice tips. Thanks for Sharing Mr. Muthu Kannan (Manki). I think sharing ideas really encourages others to do something extra and innovative.

    ReplyDelete
  46. hi there
    can you check my blog http://kaizerkomik.blogspot.com
    my blog doesn't work on the scrolling button using mouse or down arrow on keyboard...
    is it because of music player, or something else..
    if yes, can u give the exact code to fix it at the html template edit
    TQ

    ReplyDelete
    Replies
    1. I don't know... it works just fine for me. Don't know what's going on.

      Delete
  47. Hi Manki..

    I already tried to my blog with auto readmore and have a same problem with Gonzalo and Yanuar. I try to add newDom.find('div.post').find('a[name]:first').each(function(idx, elt) { createSummaryAndThumb($(elt).attr('name')); }) like you said but it doesn't works. Maybe im wrong to put the code.

    Can you help me for this? I really can not understand with Frequently asked question


    Thank you

    ReplyDelete
    Replies
    1. Hi. Can you check if createSummaryAndThumb uses document.write to alter the page? document.write is known to have compatibility problems with modern JavaScript.

      Delete
    2. It mean not works with autoreadmore? If works, maybe you can give me example one

      Thank you

      Delete
  48. Thank you SOOOOO much <3

    ReplyDelete
  49. Hi Muthu Kannan, did your infinite scroll support float left blogpost?

    I already test on my demo blog. And it look so weird.

    http://kdnap.blogspot.com/

    Do you know what is the problem is?

    Hope you will help. Thanks.

    ReplyDelete
    Replies
    1. Hi, Bond. The blog you linked to doesn't seem to have any content. Clicking on 'View Demo' doesn't do anything either. Not sure how I can help.

      Delete
  50. So I want to add a load more button to my blog instead of having it automatically load more of the page. How can I do this? I tried to implement cookingandme.com but I couldn't figure it out.

    ReplyDelete
    Replies
    1. Removing line 99, the call to win.scrollfrom the script is all you need to do. Since you're editing the script, you'll have to host it yourself, for example, by uploading it to Dropbox.

      Delete
  51. Nice! It worked. I don't know why it wasn't working before as the code I had didn't include win.scroll.

    If I wanted to include the 'No More Posts' text in this, how would I do that?

    ReplyDelete
    Replies
    1. Awesome. Change lines 24 and 39. Instead of loadMoreDiv.hide(), you need something like loadMoreDiv.html('No more posts'). Hope this helps.

      Delete
  52. Thanks! Your timely help is really commendable, keep up the good work. By the way I just wanted to let you know that for some reason the box containing the java code links is cut off in Firefox Browsers. Not sure why this but it works fine in Chrome. Once again thanks, by far the best infinite scrolling tutorial on the net!

    ReplyDelete
    Replies
    1. I see. Thanks for reporting; I'll check that.

      Delete
  53. Quick additional question, is it possible to replace the 'load more posts' and the 'no more posts' with a custom picture?

    ReplyDelete
    Replies
    1. Of course. The string you pass to loadMoreDiv.html can be any HTML. Something like loadMoreDiv.html('<img src="..."> No more posts') will show an image along with "no more posts" text.

      Delete
  54. This comment has been removed by the author.

    ReplyDelete
    Replies
    1. The 'load more posts' link is created on line 95 of the script. Add any HTML instead of "Load more posts" text on that line, and it should work.

      Delete
  55. How come it only appears once and after one click, it doesn't show anymore?

    http://applocity.blogspot.com/

    ReplyDelete
    Replies
    1. The issue is this line: loadMoreDiv.find('img').hide();. Fixing this is a bit more involved. Try this:

      1. Change var img = $('<img src="' + loadingGif + '" style="display: none;">'); to var img = $('<img src="' + loadingGif + '" style="display: none;" class="loading">');. (We're specifying a class to the "loading" animation image.)
      2. Change loadMoreDiv.find('img').hide(); to loadMoreDiv.find('img.loading').hide();.

      This will fix the issue, I think.

      Delete
  56. Hi I just added the widget, but it was slowing down the loading of my page. I wanted to remove the code but couldn't find in my blogs template codes, is there another way to remove it?

    ReplyDelete
    Replies
    1. collegechiconomics.blogspot.com is my blog, I see the code in my page source but not in my blogger template

      Delete
    2. Hi, Salilo. It's an HTML/JavaScript widget. Just delete the widget with this code.

      Delete
  57. Hi, My site isn't be. Can you help me?

    My site : http://www.teknofiber.net/

    ReplyDelete
    Replies
    1. Hi, Mustafa. Sorry for the delayed response. Your template needs to changed a little bit for the script to work on your blog.

      1. All blog posts must be inside a div. Line 5 of the script specifies the selector for this div. This div is not present in your template.
      2. "Older posts" link in your template is not selectable with the selector in line 34 of the script. You'll either have to change your template to match this selector, or you can edit the script to match your template.

      Hope this helps.

      Delete
  58. If I have already included jquery 1.4.1 do I still need to include jquery 1.6.1 ?

    ReplyDelete
    Replies
    1. jQuery 1.4's jqXHR does not have .done() method, so 1.4 won't work. Use version 1.5 or above.

      Delete
  59. First of all thank you for providing such a wonderful script to make blogger scroll infinitely. This is what I really want for my blog. But my problem is that it does not work for me. May be it has to do with the fact that I have a custom template.

    You say in your instructions that "Custom template blogs may have to change the value of postContainerSelector variable in the code."

    Can you please clarify more on that.

    Your help would be very useful for me.

    Regards
    Ale

    ReplyDelete
    Replies
    1. Hi, Ale. I'm glad you like the script. What's your blog's URL? (Is it 6ale.com?) It's easy if I know the specifics of your template.

      Delete
    2. You guess my url right. So what do I do for my template?

      Delete
    3. Okay, so you need to change one line in the code (available here). Change line 94 like this (boldface text is the change):

      olderPostsLink = $('.showpageNum:first>a').attr('href');

      Everything will work, except your date-badge widgets. It's not possible to make it work because it uses document.write, which is known not to work.

      Hope this helps.

      Delete
    4. Sweet, it really did work. I was trying to get this done for days now. Thanks to you, I could finally get infinite page scrolling in my blogger. You are a genius. Thanks for this help.

      Now only if I could get the date-badge widget to work ;)

      Delete
  60. hello dear Mr. Muthu Kannan i try to install it with add/html, but it work but the second site is only with the text with out thumb and pictures? what can i do? maybe do you can help for this problem? so let me know stay nerdii :D

    ReplyDelete
    Replies
    1. Hello! Unfortunately, this script is not compatible with scripts that create post summary or thumbnails.

      Delete
  61. thank you very much, but is there no only way.? if i will change the java extern?

    ReplyDelete
    Replies
    1. The issue with most thumbnail plugins is that they use document.write. When dynamically adding content to a page, document.write does not work. If you can change the code of the thumbnail script to remove document.write calls, it's possible to make infinite scrolling and thumbnails both work.

      Delete
  62. Thanks Muthu Kannan! It works perfectly! I just wanted to know how i can change the title "Load More Posts" cause my blog it's in portuguese so i'd like to change to "Carregar"

    ReplyDelete
    Replies
    1. Hi, Conrado. You can change the text "Load more posts" on line 99 of the script to "Carregar".

      Delete
  63. Hi Muthu,

    Can you help me with my blog? http://www.meetgrail.com/ the blog is set to 1 posts setting and i have 3 posts so that it will load in scrolling effect.

    1. Each post have the "Older Posts" text each time it load, can you help me to change it into "Load More Posts" text.

    2. At the last posts there's still an "Older Posts" text and i want to change it into "No More Posts" as it will be the last posts of the blog.

    Thanks.

    ReplyDelete
  64. not work to my blog http://sdftyujklvbn.blogspot.com :'(

    ReplyDelete
  65. it's workin' for me, but it's not loading the post date ...little help pls

    ReplyDelete
  66. This comment has been removed by the author.

    ReplyDelete
  67. Thanks! This is a great change to the typical blogger navigation for sites like my photo journal, see the code implemented here, photojournal.daytripjunkie.com.

    ReplyDelete
  68. You should add this code for AddThis users so that the toolbox loads with new posts:

    document.doAT('hentry');addthis.toolbox('.addthis_toolbox');addthis.counter('.addthis_counter');


    ReplyDelete
  69. This comment has been removed by the author.

    ReplyDelete
  70. This is incredible awesome, thank you for creating this!

    I am having issues getting this to work with PrettyPhoto though.

    I have tried downloading your blogger-infinite-scrolling.js and tweaking the code per your instructions, but nothing seems to work.

    Do you have any suggestions on things I could try to get this to work with PrettyPhoto?

    Thanks

    Eric

    ReplyDelete
    Replies
    1. I got it working on the first page, but when the second page is auto loaded PrettyPhoto doesn't work for the second page, but still works for the first page. Any insight you have would be greatly appreciated :)

      Delete
    2. You need to tell PrettyPhoto plugin about the newly loaded posts. Once new posts are loaded, the script updates Facebook buttons, +1 buttons, Twitter gadgets, etc. You may have to add some code there.

      Depending on how the code is written it may or may not be trivial. (This is the first time I am hearing of PrettyPhoto; I have no idea how it's written.)

      Delete
  71. Very helpful post.looking for it from a long time and just got it.thank you very much.

    ReplyDelete
  72. Hey man, I love this, but theres no "add comment" to the posts that load from the infinite scroll when google plus comments is enabled. It works for the normal comments but not the google+ comments. Heres my blog for an idea of what I mean: http://kerodean.blogspot.com

    ReplyDelete
  73. Hi Muthu,

    Thanks again for your help. I am trying again to get this to work on my site with PrettyPhoto on multiple pages.

    I feel like all I need to do is add the following code to initialize pretty photo on the second page load to your blogger-infinite-scrolling.js

    $(document).ready(function(){
    $("a[rel^='prettyPhoto']").prettyPhoto();
    });

    Your FAQ says to add this code right after $(postContainerSelector).append(newPosts)

    To the js file that you have uploaded here.
    https://code.google.com/p/manki-scripts/source/browse/blogger-infinite-scrolling.js

    But I am very confused on that part of it, as from what I can tell your widget code doesn't reference that .js file at all.

    Your widget points to this .js file >
    'm-misc.appspot.com/js/blogger-infinite-scrolling.js'

    So my question is, how does a user such as myself edit your blogger-infite-scrolling.js code that you have uploaded here > https://code.google.com/p/manki-scripts/source/browse/blogger-infinite-scrolling.js

    with their own code if your widget does not call that file???

    I hope this makes sense,

    thanks in advance!

    Eric

    ReplyDelete
    Replies
    1. Hello.

      Sorry about the confusing directions. After you have edited the script, you cannot use the 'Add to Blogger' button in this page. 'Add to Blogger' button adds the default script that does not have the modification you need.

      The simplest thing you can do is copy your modified script and add it to a HTML/JavaScript widget. (Remember to put your script between <script> and </script> tags!) Hope this helps.

      Delete
  74. thank you so much!!! this was so helpfull! lots of good vibes for you <3

    ReplyDelete
    Replies
    1. Thank you. I’m glad you liked this :)

      Delete
  75. Hello, I tried using this for my a template. I tried it here http://pinfinitytest2.blogspot.com/ , and it does not work. Can you tell me what I am doing wrong?

    This is just a great plugin and I see so many happy users. Thanks.

    ReplyDelete
    Replies
    1. Hi, Ashish. You have two choices.

      a. Add a <div class='blog-posts'> immediately after <div id='entry-list'> in your template. (You'll also have to close the new div appropriately.
      b. Change the value of postContainerSelector variable to '#entry-list' in the script.

      Either of these should solve the issue. However, this script may not work well with the ReadMore script you are already using.

      Delete
    2. I did what you said. Added the div class='blog-posts' immediately after div id='entry-list'.

      The I added your code (I skipped jquery because my template already has 1.7.1) m-misc.appspot.com/js/blogger-infinite-scrolling.js in my template.

      and only the loading gif is displayed. I tried the second method to and the same happens. What am I doing wrong?

      And I noticed that you had two scripts. The one I have mentioned above and this -> code.google.com/p/manki-scripts/source/browse/blogger-infinite-scrolling.js

      Are both of them the same?

      Delete
    3. The idea is to have all your posts inside the new div. It should look something like this:
      <div id='entry-list'>
      <div class='blog-posts'>
      <div ...>first post</div>
      <div ...>second post</div>
      <div ...>third post</div>
      </div>
      </div>

      Delete
    4. I think that is what I exactly did. I just checked and It is like that right now.

      Delete
    5. New posts are added to the page, but they are hidden behind existing posts. Like I said, the plugin/script you use to show thumbnails and my script don't play well with each other.

      Your other script is absolutely positioning post thumbnails using CSS. You'll have to modify my script to do the same for newly loaded posts (which may not be trivial).

      Delete
    6. This comment has been removed by the author.

      Delete
  76. Hi, thanks so much for the infinite scroller code. I tweeted your link to my followers on G+ and Twitter. The scroller is so much better than having those older posts/newer posts buttons. I was wondering if there was a way to add the ShareThis button to the code as well. I saw there was a post earlier on how to add the AddThis button, but wasn't sure how to do it with ShareThis. Thanks so much

    ReplyDelete
  77. Super helpful. Thanks.

    I had another question about inserting a "tweet" button to the top of my blog body posts. Don't want to hijack from this topic, but is possible to add it next to the "like" button of my body posts? You can email me at khsia2@gmail.com

    My blog can be found at www.kevinhsia.blogspot.com

    Thanks

    ReplyDelete