Making BuddyPress Activity Autoloading like Facebook
You see the Facebook activity stream and you like it. You like the way it automatically loads old activities when you scroll to the bottom of the page.
Do you want to include the activity auto loading on your BuddyPress based social network?
Ok, let me help you do that. Today, we will see how to load activity automatically when a user scrolls to the bottom of the page.
Strategy:-
- Detect when we have reached at the end of activity stream
- Make an ajax call to load more activities and append it to the page
That sounds easy, doesn't? And yes, It does not need much of the php code, just some javascript.
Let us start coding, we will attach handler to the window scroll event to check if we have reached at the end of the activity. Let us create a file activity-loader.js and put the following lines.
[sourcecode language="javascript"]
jQuery(document).ready(function(
var jq=jQuery;
//attach to the widnow scroll event
));//end of dom ready
[/sourcecode]
Now, we will write the code to attach handler to scroll event
[sourcecode language="javascript"]
jQuery(document).ready(function(
var jq=jQuery;
//let us check on window scroll event
jq(window).scroll(function() {
//find the visible load more button
//since bp does not move load more, we need to find the last one which is visible
//find the position of the button
//check if we have scrolled there
//if yes, let us load more activity
});
));//end of dom ready
[/sourcecode]
So, all we are doing is finding the load more button's position and checking if we have scrolled to there, If yes, we just load more activity
Here is the complete javascript.
Final Javascript Code:-
[sourcecode language="javascript"]
jQuery(document).ready( function() {
var jq=jQuery;
var is_activity_loading=false;//we use it to make sure that we don not try to send the request again and again
//let us check on window scroll event
jq(window).scroll(function() {
//find the visible load more button
//since bp does not move load more, we need to find the last one which is visible
var load_more_btn=jq(".load-more:visible");
//if there is no visible button, there are no mor activities, let us retrn
if(!load_more_btn.get(0))
return;
//find the offset of the button
var pos=load_more_btn.offset();
//if the window height+scrollTop is greater than the offset top, we have reached the button, let us load more activity
if(jq(window).scrollTop() + jq(window).height() > pos.top ) {
load_more_activity();
}
});
/**
* The routine loads more activity
* We call it whenever we reach at the bottom of the activity listing
*
*/
function load_more_activity(){
//check if activity is loading, means is there already a request doing this
//if yes, just return and let the other request handle it
if(is_activity_loading)
return false;
//so, it is a new request, let us set the var to true
is_activity_loading=true;
//add loading class to load more
//theme authors may need to change the selector if there theme has a different id
//I am doing it for bp-default/derivative themes
//change #content to whatever you have named it in your theme
jq("#content li.load-more").addClass('loading');
if ( null == jq.cookie('bp-activity-oldestpage') )
jq.cookie('bp-activity-oldestpage', 1, {
path: '/'
} );
var oldest_page = ( jq.cookie('bp-activity-oldestpage') * 1 ) + 1;
//send the ajax request
jq.post( ajaxurl, {
action: 'activity_get_older_updates',
'cookie': encodeURIComponent(document.cookie),
'page': oldest_page
},
function(response)
{
jq(".load-more").hide();//hide any load more button
jq("#content li.load-more").removeClass('loading');//theme authors, you may need to change it
//update cookie
jq.cookie( 'bp-activity-oldestpage', oldest_page, {
path: '/'
} );
//and append the response
jq("#content ul.activity-list").append(response.contents);
//since we are done, let us set the state that activity has loaded
is_activity_loading=false;
}, 'json' );
return false;
}
});//end of dom ready
[/sourcecode]
We just need to include this javascript file and we are done.
Assuming that you have put activity-loader.js in your theme's _inc dir.
here is the code that you can put in your theme's functions.php
[sourcecode language="php"]
function bp_activity_autoloader_inc_js(){
//you can change get_stylesheet_directory_uri() to get_tmplate_directory_uri() if you are author of a parent theme and want to include it in parent theme and not in the child theme.
wp_enqueue_script('activity-auto-loader', get_stylesheet_directory_uri().'/_inc/activity-loader.js',array('jquery'));//should we make it dependent on 'dtheme-ajax-js'?
}
add_action('bp_enqueue_scripts','bp_activity_autoloader_inc_js',30);
[/sourcecode]
If you are running a theme based on bp-default, you don't even need to go through all thees steps. I have packed it as a plugin, just drop it and boom! Your network becomes even more awesome
If you are using a custom theme, not a derivative of bp-default, you may have to change the ids I have used(e.g #content to something which you theme uses for layout, please see the comments in the js code). I have tested it with BuddyPress 1.6.4 and BuddyPress 1.7 beta/trunk(with bp-default/theme compat) and It works.
So, what do you think about it? I hope that you will like this. I will appreciate your feedback if you are using it or plan to use it .
If you need it as a plugin, here is the link.
Plugin Download & Installation:-
Link:- https://buddydev.com/plugins/bp-activity-autoloader/
Please note, this code depends on jQuery cookie plugin, make sure you have it included in your theme(bp-default does have it).
Work directly and perfelty big thanks!!
Thank you Ben Appreciate your comment.
Hi @Sbrajesh,
just wanna say thank you. I just test it on one of my site and it works great.
regards
Hi Abbey,
Thank you for the testing and comment. I appreciate it
Working like a charm. Thanks Brajesh!
Thank you Hans
Awesome! Another terrific plugin! Thank you for all your hard work!
Thank you Ben
I just loaded your BP Activity Autoloader plugin on my site and it works perfectly! I'm running WordPress 3.5.1, BuddyPress 1.6.4, with the BuddyBoss theme.
I would like to thank you for your good work!
Hi Kevin,
Thank you for the comment. I am happy to hear that it is working with custom theme like BuddyBoss
It's really nice…thanks a lot…
Thank you Debabrata,
appreciate your comment
Hi guys…i have had this plugin from day 1 and it has worked fine until now….what have i done lately? well…i have updated my wp/bp & most importantly my custom community theme.
What Exactly is the problem??? Well!!!:
When my member post a comment from the "MY STREAM" tab it works fine but, when another member or the same member want to reply to his or her posts is simply does not post….it show a "1 comment" but there is not an actual post attached to the comment….i am getting ripped into pieces on my social network ppllleaaaseeeee someone help me figure out what is going wrong with this plugin.
BTW THE THE BP AUTO-LOADER IS THE BOMB!!!! WORKS BEAUTIFULY.
I guess, It was intended for the other post. Replying there and thanks for the compliment on the activity autoloader
Hi, works except all new feed that loads comes with the comments (post) box opened (expanded), you have to hit escape key to collapse the comments boxes, running Genesis BP theme, WP, BP latest. thanks…
Hi Dave,
seems like a problem/conflict with Genesis BP theme. I am sorry but I don't have access to that theme, so may not be able to help. Please ask in their forums, hopefully, they should be in better position to help.
Regards
Brajesh
Hello Brajesh, I tried your plugin with bp 1.6 and running perfectly …
Instead I tried with 1.2.9 and bp is wrong, what I could do to make it go?
Brajesh
i must say.. you do good with this codes of yours, your codes actually made me sign up to your site… i keep looking at the codes.. and i think … how and when would i start writing my own plugins…
good work men !!!
Hi Boiy,
Thank you for the comment. Appreciate it
Practice makes us all better, so just get started and you will be able to write better code
It works perfectly.
WP 3.5.1, BP 1.7.1, custom theme.
Thank you for all your hard work!
Thank you Andrey,
appreciate the comment
Hi,
Fantastic Post, but I had a few problems with that and I'm gonna tell how I fixed them. I hope that help someone else with this.
1.- In a custom theme we have to be remember about #content div wrapping the activity stream, otherwise when we go to reload the activities the ajax call works but the old activities didin't appear. (we also can change the #content Id on the jquery)
2.- When I load more old activities I had problems with the comment boxes that all of them appear opened. I add this line to the Jquery activity-loader.js
Just after the content append.
jq("#content ul.activity-list").append(response.contents);
I write the following line to hide the comment boxes.
jq("#content form.ac-form").hide();
I hope would be helpfull.
Congratulations again!
Hi Brajesh and thanks for this awesome plugin
I just update bp to 1.7 and since that when I reach the end of page the load more button disspaears like trying to load the other activities but the activities doesn't appear at all and neither the load more button. Any idea?
Thanks for your time!
Hi Brajesh,
Thanks a lot for your continuous and useful contributions & help … This works perfectly on my site but I have a relevant question if you can help me with it depending on your buddypress experience:
I set in the _inc -> global.js file in my theme to only show the last comment in the comments' list for an activity on the activity stream and hide the rest till "show all .. comments" link is clicked. (i.e. expanding & collapsing the comments list). This is very necessary specially with the long list of comments.
The problem is that collapsing the comments doesn't work after loading more the activity! Either the loading was manual or auto, the same issue occur! Long list of comments doesn't look lovely here :S
Do you know how this could be solved? I think everybody has this issue if they haven't applied any modifications!
Any help will be very appreciated.. many thanks
Hope
Anybody knows what the problem is and how to solve it?
Thanks
Anybody had this issue before and could find a solution?
Regards
Hi Hope,
I am sorry for the delayed reply on your previous comment.
Is it happening only with the activity auto loader plugin enabled or even when the auot loader is disabled? Can you post the content of your global.js on pastebin and link me? I will be happy to help you quickly now
Thanks Brajesh , without your support, I wouldn’t have been able to do
Thank you for the kind words. Glad that I was able to help
I've ran into a problem with the activity auto load feature. When on a mobile device my right sidebar moves under the Activity section and now when you scroll to down to see the Sidebar contents the Auto load keeps loading more Activity Content and pushing the Sidebar stuff down and down and down again and I can never view it. So is there a way to Disable this Autoload feature on Mobile?
Hi Aaron,
I am sorry for the inconvenience. It was bound to happen some day. Please allow me a few hours and I will add a filter to disable it on mobile devices if required.
Thank you
Brajesh
Hi Aaron,
Version 1.0.2 is now available from WordPress plugin repo. Please see the plugin page
https://buddydev.com/plugins/bp-activity-autoloader/
For the code snippet to disable it on mobile browsers.
Hope that helps.
Perfect!! that did the job. Thanks for the FAST reply!
you are welcome
Hi Brajesh Singh!
Is this plugin compatible with the Buddypress Activity Shortcode Plugin? I'd like to remove the pagination buttons for an auto load or load more button. Thank you!
P.s.
Very awesome plugins you got here
Hi Jasson,
Thank you.
The auto loader should work with the shortcode plugin. There are glitches though.
1. It won't work as expected if the page has multiple activity loop
2. if you are embedding default activity, It will work fine, if your activity shortcode is filtering activity using options., It won't.
Regards
Brajesh