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:
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.
- This code uses jQuery library, so don’t forget to include it.
- Custom template blogs may have to change the value of
postContainerSelectorvariable 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. _WidgetManageris a JavaScript object present in Blogger blogs. You can query this object to find some page metadata. This code uses_WidgetManagerto 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.
Very nice, many thanks for sharing Muthu Kannan ;)
ReplyDeleteI'm glad you found this useful :)
DeleteThanks 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 :)
DeleteHello 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 :)
DeleteHi, Karla. Thanks for testing this out.
DeleteTo 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.
Thank so much Muthu, i'll be awaiting the update ;)
ReplyDeleteHave a great day!
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:
Deletea. 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.
Hi. I find your post useful and im thankful to you :).
ReplyDeleteBut 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! :)
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.
DeleteHi 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!
DeleteCheck my blog: http://tweetopia.blogspot.com/
DeleteIt will load for 1 time, then it will get stock on loading. Im using the latest one :).
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.
DeletePS: your blog has a very interesting template.
Looking forward to see a new update. Thanks for your work :)! I love your script :).
ReplyDeleteHehehe, thanks. So hard to make a look-alike of twitter :)).
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!
DeleteSo, 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.
Haha! Yeah, *lot* of work.
DeleteBtw, your awesome! Working perfect! Thank you!!! :))).
Oh, thank you :) I am glad the script works now.
DeleteWow thank you so much!! This is great!
ReplyDeleteI'm glad you like it. Thanks for the comment.
Deletethank you! this is great!! :))
ReplyDeleteThank you. Good job.
ReplyDeleteI 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/
This comment has been removed by the author.
ReplyDeleteHello, 5202. Thanks for trying out the script :)
DeleteYour 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.)
Hi Muthu,
ReplyDeletethanks 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!
Glad it works now :)
DeleteI have been looking for a code like this for a while. Thank you so much!
ReplyDeletenot working for me :(
ReplyDeleteWhat can I do?
ReplyDeletemyblog: http://www.aabouzaid.com/
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.
Deleteya, 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 :-)
Deletenow it's working like a charm.
Thanks Muthu very much for this excellent script ^_^
Awesome! :)
DeleteLegend! Thanks so much Muthu!
ReplyDeleteI'm glad this is being useful :)
DeleteOk, small question ...
ReplyDeletethere is option to make it non-automated loading and add button "more post" or some thing like this? (http://i.imgur.com/X3tZA.jpg)
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.
DeleteVery good!
DeleteThank you very much :-)
Many thanks!! Great work! I just need to add a fade in effect. Thanks!
ReplyDeleteHi. 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/
ReplyDeleteYour 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.
DeleteHi, 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! (:
DeleteGlad it works now :)
DeleteBy "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!
Hey Muthu Kannan!
ReplyDeleteI'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
Hi XeBii, thanks for the comment. I am glad this is useful to you.
Deletehttp://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.
Thanks Alot :)
DeleteTHANK YOU!!! amazing!
ReplyDeleteHi, 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.
ReplyDeleteநல்ல ஸ்கிரிப்ட் தான். நானும் பயன்படுத்த தொடங்கி விட்டேன். நன்றி !
ReplyDeleteசூப்பர் :)
DeleteHi Muthu,
ReplyDeleteThis 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?
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.
DeleteFor 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]);
}
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.
DeleteThanks for asking this question. I could improve the script because of you.
இதையே Event பகுதியில் கண்காணிக்க _gaq.push(['_trackPageview', olderPostsLink]); இனை _gaq.push(['_trackEvent', 'Load more', 'loaded', '/index.html']); என்று மாற்றினால் சரியா?
ReplyDeleteCorrect. '/index.html' என்பதற்குப் பதிலாக olderPostsLink உபயோகித்தால் புதிதாக load ஆகும் URL-ஐயும் பதிவு செய்து கொள்ளலாம்.
Deleteநன்றி! மீள இணைத்து இருக்கிறேன். இயங்காவிட்டால் மறுபடியும் இங்கே வருகிறேன்.
ReplyDeleteYou're welcome :)
DeleteOlderPostsLink என்று கொடுத்தேன். ஆனாலும் எந்த மாற்றமும் இல்லை. OlderPostsLink தான் event பகுதியில் இறுதியாக தோன்றுகிறது. அதற்கு அப்பால் செல்ல முடியவில்லை.
ReplyDeleteOlderPostsLink என்பது தவறு. Small letter 'o'-கு பதிலாக capital letter 'O' உபயோகிப்பது பிழை.
Deleteஅதே போல், olderPostsLink-ஐச் சுற்றிலும் quotes இருக்கவும் கூடாது. _gaq.push(['_trackEvent', 'Load more', 'loaded', olderPostsLink]); என்பது சரி. _gaq.push(['_trackEvent', 'Load more', 'loaded', 'olderPostsLink']); என்பது தவறு.
Deleteநீங்கள் சொன்னதை தான் பயன்படுத்தினேன். இப்போது மீள இணைத்து உள்ளேன். நன்றி!
Deleteஇவ்வாறு மாற்றிய பின்னர் இது இயங்கவில்லை. நான் பயன்படுத்திய ஸ்கிரிப்ட்:
Delete_gaq.push(['_trackEvent', 'Load more', 'loaded', olderPostsLink]);
This comment has been removed by the author.
Deleteinfinite-scrolling முறையே இயங்கவில்லை. _gaq.push(['_trackEvent', 'Load more', 'loaded', "olderPostsLink"]); இப்படி இட்டால் (quotes உடன் ) infinite-scrolling இயங்குகிறது. Trackingகும் நடைபெறுகிறது. ஆனால் OlderPostsLink தான் event பகுதியில் இறுதியாக தோன்றுகிறது.
ReplyDeleteஇது குறித்து Google+-ல் உங்களுக்கு ஒரு தனிப்பட்ட தகவல் அனுப்பியிருக்கிறேன்.
Deleteநன்றி. நீங்கள் ஏன் உங்கள் வலைப்பூக்களில் இவற்றை தொடர் ஒன்றுமே வைப்பதில்லை? Feed burner அல்லது friend connect ஆவது வைக்கலாமே.
Deleteஇந்த வலைபதிவின் FeedBurner முகவரி http://feeds.feedburner.com/manki. இந்த வலைபதிவின் default feed இந்த முகவரிக்கு திருப்பி அனுப்புமாறு மாற்றியமைக்கப்பட்டுள்ளது. Google Reader-ல் (அல்லது வேறு ஏதேனும் feed reader-ல்) blog.manki.in என்று கொடுத்தால் அதுவே இந்த FeedBurner முகவரியைக் கண்டுபிடித்துவிடும்.
DeleteFriend Connect ரொம்ப மெதுவாக பதிவிறக்கம் ஆவதால் அதை நீக்கிவிட்டேன். பெரும்பாலான புதுப் பதிவுகளை நான் Google+-ல் அறிவிப்பேன். சில நண்பர்கள் அங்கிருந்து என் பதிவுக்கு வருவதும் உண்டு.
நான் இதை http://tatwitter.blogspot.com/ இல் இணைத்தபோது இயங்கியது. ஆனால் load ஆகும் tweetகளில் CSS வேலை செய்யாது அலங்கோலமாக உள்ளது.. பலவிதமாக CSS சேர்க்க முயற்சித்தும் பயனளிக்கவில்லை.
ReplyDeleteஇது ரொம்ப complex ஆன template. வேலை பார்க்க வைப்பது கொஞ்சம் சிரமம் தான் :(
Deleteகண்டுபிடித்து விட்டேன் :)
Deletewindow._gaq.push இருக்கிறதல்லவா? அதற்கு முன்பாக twttr.widgets.load(); என்று சேர்க்கவும்.
நன்றி! நன்றாக இயங்குகிறது.
Deleteஆனால் ஒன்று load முடிந்து மறு load நடந்தால் மட்டுமே முதல் load ஒழுங்கமைகிறது.
முதலில் சொன்னது தவறு. plusone.go(); என்பதற்கு அடுத்ததாக twttr.widgets.load(); என்று சேர்க்கவும்.
Deleteநன்றி! நன்றாக வேலை செய்கிறது!!
Delete:-)
Deleteநல்ல வலைபதிவு வைத்திருக்கிறீர்கள். முழுவதையும் வாசித்தேன்... நன்றாக இருக்கிறது.
எது? Twitter? சும்மா தான் உருவாக்கி பார்த்தேன்...
Deleteஆம், tatwitter.blogspot.com. எனக்குப் பிடித்திருக்கிறது.
Deleteஇப்போது தான் ஆரம்பம். எல்லாம் நானே பதிய வேண்டி இருக்கிறது. நாளடைவில் சரியாகலாம் என்று நினைக்கிறேன். எவ்வாறாயினும் உங்கள் infinite-scrolling தான் அதன் கட்டமைப்பில் அடி நாதமாக இருக்கிறது. உங்களுக்கு தான் நன்றிகள் !!
DeleteHello! 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)
ReplyDeleteI 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.
Hi there, Judikins.
DeleteLooks 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.
Hi again. I have added support for Disqus comments. Can you try adding the code again to your blog?
DeleteHi muthu,
ReplyDeletethis 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.
Hi there, Jo.
DeleteIf you change line 5 in the code to var postContainerSelector = 'ul.blog-posts'; the script will work on your site.
Hey, that's an awesome script. Keep it up! Thanks for that.
ReplyDeleteThank you for share this nice code.
ReplyDeleteone question, How to load the Facebook(using fb sdk) Like button dynamically ?
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.
DeleteHi 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 ;)
DeleteFor those who would add FB like button...
Deletewindow.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 ;)
Nice. Thanks for sharing the code snippet.
DeleteThanks to you, I have now added support for Facebook integration in the script itself. Local code modification won't be necessary anymore :)
DeleteThank you so much for a simple and useful method.
ReplyDeleteJust 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?
ReplyDeleteAlso, 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 ;)
Thanks Emilio. I am a jQuery n00b, and I didn't know about $.getScript. Will update the script to use that instead.
DeleteIf 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 :)
I've updating the script: you can see it here.
DeleteAfter 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
Sorry: *I've updated the script ;)
DeleteLooks a LOT better than my version. Many thanks Emilio for the improvements. Will update my script.
DeleteIt 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!
ReplyDeleteFrom a cursory look, it looks like it's possible.
DeletenewDom.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.
Hi, Gonzalo. Can you try adding the widget now? Automatic Thumbnail and Read More seems to work now. Thanks.
DeleteHi Muthu Kannan,
DeleteI'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.
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.)
DeleteHi Muthu Kannan
ReplyDeleteI 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 ?
Hello, flames. Welcome to Blogger!
DeleteHere'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. :)
Good day. First I would like to thank and congratulate you for this script, I had long looked for something like this.
ReplyDeleteI 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.
Hi Pedro,
DeleteThe "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.
Thank you Muthu.
DeleteI 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
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.
DeleteHello Muthu,
Deletethis 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
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.
DeleteIf 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.
இதில் ஒவ்வொரு தடவையும் விளம்பரங்களை (Adsense) தோன்ற வைக்க முடியுமா? எப்படி?
ReplyDeleteIt would have been possible with AdSense for AJAX, but that product is not available anymore. So the answer is No.
Deleteஅப்படியா! GFP இலும் அப்படிதானா?
DeleteGFP என்றால் என்ன?
DeleteGoogle Doubleclick for Publishers
Deleteநான் DoubleClick உபயோகித்ததில்லை. DoubleClick விளம்பரங்களை எப்படிக் காட்டுவது என்று எனக்குத் தெரியாது; மன்னிக்கவும்.
Deleteபரவாயில்லை! Mashable.com இல் Dynamic template மூலம் தொடர்ந்து scrolling இன் போது Adsense வருகின்றது. அதை தான் கேட்டேன். அவர்கள் Premium Ad Publisher என்று நினைக்கிறேன். Wordpress 3.5 இல் முன்பிருந்ததை விட infinite-scrolling நன்றாக இருக்கின்றது.
DeleteUnder
ReplyDelete"Edit content"
appear nothing.
What should I do?
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?
DeleteThanks for this amazing script Muthu! I'm a novice at jQuery so I was wondering if you can explain how this script works. Thanks.
ReplyDeleteHi, 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.
DeleteThis comment has been removed by the author.
ReplyDeleteHello 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">
ReplyDelete_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 ;)
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.
DeleteHi 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
ReplyDeleteHi. 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.
DeleteThe 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.
Hi ! Can you tell me if infinite scroll could do in my blog ?
ReplyDeleteawesome staff
http://feedmemoreplease.blogspot.fr
Hi, Clément. Your blog doesn't have "Older Posts" link now. That link is one of the requirements for the script to work.
DeleteThanks you very much for this faster reply !! :D
DeleteThankyou, thankyou, thankyou, i love it. :)
ReplyDeleteYou're very welcome :)
DeleteHello! 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?
ReplyDeletehttp://we-renderteam.blogspot.ro/
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!
DeleteHi!The script is pretty cool but i have a problem...My posts have this structure:
ReplyDeletescript 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/
Your template uses JavaScript for rendering posts. This script will not work on such templates. Sorry!
DeleteHOW CAN I ADD THIS CODE TO MY TEMPLATE IN BLOGGER? I USE CLASSIC TEMPLATE AND HTML CODES: http://gahv.blogspot.com
ReplyDeletePLEASE I WANT TO SHOW MY ENTRIES LIKE THAT.
THANKS!!
Hello. I am sorry to say that this script does not work on classic templates. It works only on Layouts templates.
DeleteNice tips. Thanks for Sharing Mr. Muthu Kannan (Manki). I think sharing ideas really encourages others to do something extra and innovative.
ReplyDeleteI'm glad you like this :)
Deletehi there
ReplyDeletecan 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
I don't know... it works just fine for me. Don't know what's going on.
DeleteHi Manki..
ReplyDeleteI 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
Hi. Can you check if createSummaryAndThumb uses document.write to alter the page? document.write is known to have compatibility problems with modern JavaScript.
DeleteIt mean not works with autoreadmore? If works, maybe you can give me example one
DeleteThank you
Thank you SOOOOO much <3
ReplyDeleteHi Muthu Kannan, did your infinite scroll support float left blogpost?
ReplyDeleteI 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.
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.
DeleteSo 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.
ReplyDeleteRemoving 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.
DeleteNice! It worked. I don't know why it wasn't working before as the code I had didn't include win.scroll.
ReplyDeleteIf I wanted to include the 'No More Posts' text in this, how would I do that?
Awesome. Change lines 24 and 39. Instead of loadMoreDiv.hide(), you need something like loadMoreDiv.html('No more posts'). Hope this helps.
DeleteThanks! 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!
ReplyDeleteI see. Thanks for reporting; I'll check that.
DeleteQuick additional question, is it possible to replace the 'load more posts' and the 'no more posts' with a custom picture?
ReplyDeleteOf 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.
DeleteThis comment has been removed by the author.
ReplyDeleteThe '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.
DeleteO wow thanks!
ReplyDeleteHow come it only appears once and after one click, it doesn't show anymore?
ReplyDeletehttp://applocity.blogspot.com/
The issue is this line: loadMoreDiv.find('img').hide();. Fixing this is a bit more involved. Try this:
Delete1. 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.
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?
ReplyDeletecollegechiconomics.blogspot.com is my blog, I see the code in my page source but not in my blogger template
DeleteHi, Salilo. It's an HTML/JavaScript widget. Just delete the widget with this code.
DeleteHi, My site isn't be. Can you help me?
ReplyDeleteMy site : http://www.teknofiber.net/
Hi, Mustafa. Sorry for the delayed response. Your template needs to changed a little bit for the script to work on your blog.
Delete1. 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.
If I have already included jquery 1.4.1 do I still need to include jquery 1.6.1 ?
ReplyDeletejQuery 1.4's jqXHR does not have .done() method, so 1.4 won't work. Use version 1.5 or above.
DeleteFirst 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.
ReplyDeleteYou 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
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.
DeleteYou guess my url right. So what do I do for my template?
DeleteOkay, so you need to change one line in the code (available here). Change line 94 like this (boldface text is the change):
DeleteolderPostsLink = $('.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.
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.
DeleteNow only if I could get the date-badge widget to work ;)
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
ReplyDeleteHello! Unfortunately, this script is not compatible with scripts that create post summary or thumbnails.
Deletethank you very much, but is there no only way.? if i will change the java extern?
ReplyDeleteThe 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.
DeleteThanks 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"
ReplyDeleteHi, Conrado. You can change the text "Load more posts" on line 99 of the script to "Carregar".
DeleteHi Muthu,
ReplyDeleteCan 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.
not work to my blog http://sdftyujklvbn.blogspot.com :'(
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteYou should add this code for AddThis users so that the toolbox loads with new posts:
ReplyDeletedocument.doAT('hentry');addthis.toolbox('.addthis_toolbox');addthis.counter('.addthis_counter');
I don't understand that,,, but it's cool.
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteThis is incredible awesome, thank you for creating this!
ReplyDeleteI 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
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 :)
DeleteYou 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.
DeleteDepending 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.)
Very helpful post.looking for it from a long time and just got it.thank you very much.
ReplyDeleteHey 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
ReplyDeleteHi Muthu,
ReplyDeleteThanks 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
Hello.
DeleteSorry 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.
thank you so much!!! this was so helpfull! lots of good vibes for you <3
ReplyDeleteThank you. I’m glad you liked this :)
DeleteHello, 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?
ReplyDeleteThis is just a great plugin and I see so many happy users. Thanks.
Hi, Ashish. You have two choices.
Deletea. 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.
I did what you said. Added the div class='blog-posts' immediately after div id='entry-list'.
DeleteThe 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?
The idea is to have all your posts inside the new div. It should look something like this:
Delete<div id='entry-list'>
<div class='blog-posts'>
<div ...>first post</div>
<div ...>second post</div>
<div ...>third post</div>
</div>
</div>
I think that is what I exactly did. I just checked and It is like that right now.
DeleteNew 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.
DeleteYour 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).
This comment has been removed by the author.
DeleteHi, 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
ReplyDeleteSuper helpful. Thanks.
ReplyDeleteI 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
Hi Muthu, one more thing. Does Disqus no longer work with the script? I don't see comment counts anymore when I load your script. It just shows 'View Comments'. Thanks,
ReplyDeleteMatt (distressedvolatility.com)
nice and fantastic info you have shared it keep posting this type of informative post and keep in touch with the people i like it very much..... http://www.technologyexplores.com
ReplyDelete