BuddyDev

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.


jQuery(document).ready(function(

var jq=jQuery;

//attach to the widnow scroll event

));//end of dom ready

Now, we will write the code to attach handler to scroll event


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

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:-


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

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


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);

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).

 

36 Responses to Making BuddyPress Activity Autoloading like Facebook

  • Work directly and perfelty big thanks!!

  • 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!

  • Awesome! Another terrific plugin! Thank you for all your hard work! 🙂

  • 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…

  • 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!

  • 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.

  • 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

Subscribe