Hi All,

I hope you all are busy building the next awesome social network.

It has been a long time since I wrote my last post. I was busy setting up an office here in Mohali,Punjab. Everything is setup now, and I am almost back to regular work.

Today, we will see how to exclude some members from  the members directory of BuddyPress. I have seen this question numerous times  and finally I thought to put a small tutorial. It is quick and easy tutorial, so Let us begin.

We will need to hook to 'bp_ajax_querystring' filter.


The following code will allow to exclude the users from the members directory. They will be still listed in the friends list of other users with whom they are friends with.

add_action('bp_ajax_querystring','bpdev_exclude_users',20,2);
function bpdev_exclude_users($qs=false,$object=false){
 //list of users to exclude

 $excluded_user='1,2,3';//comma separated ids of users whom you want to exclude

 if($object!='members')//hide for members only
 return $qs;

 $args=wp_parse_args($qs);

 //check if we are listing friends?, do not exclude in this case
 if(!empty($args['user_id']))
 return $qs;

 if(!empty($args['exclude']))
 $args['exclude']=$args['exclude'].','.$excluded_user;
 else
 $args['exclude']=$excluded_user;

 $qs=build_query($args);

 return $qs;

}

You can put the above code in functions.php of your theme or in bp-custom.php.

Everything is fine and the users will be gone from the list. Now, comes a decision point. do you want them to be searchable ? The above code will hide them from the search too.

So, let us improve on our code .

add_action('bp_ajax_querystring','bpdev_exclude_users',20,2);
function bpdev_exclude_users($qs=false,$object=false){
 //list of users to exclude

 $excluded_user='1,2,3';//comma separated ids of users whom you want to exclude

 if($object!='members')//hide for members only
 return $qs;

 $args=wp_parse_args($qs);

 //check if we are searching  or we are listing friends?, do not exclude in this case
 if(!empty($args['user_id'])||!empty($args['search_terms']))
 return $qs;

 if(!empty($args['exclude']))
 $args['exclude']=$args['exclude'].','.$excluded_user;
 else
 $args['exclude']=$excluded_user;

 $qs=build_query($args);

 return $qs;

}

That’s it. All we are doing is checking if the query string is for listing members and we modify it to exclude the users.

I hope the code will help a couple of you.

Looking forward to hear your feedbacks

Related posts:

1. Introducing Facebook Like User Activity Stream(Home activity feed) for BuddyPress Based Social Network
2. BuddyPress Friends suggestions Widget:- Help your Users to Build Their Network faster
3. Allow Users to select a blog theme while signing up/creating a blog on your buddypress powered social network

It’s a delayed post and I will like to express my sincere apologies to everyone whom I could not reply individually about the Unified Search. Here I am going to put everything you ever asked about unified search in this post.
For those of you who haven’t seen my last post please check the original post here. This post is all about making unifiead search work with BuddyPress 1.5+. It is a long post, so please  have a cup of coffee and let us get started.

List of things we will cover below:-

• Installing Global Unified search Plugin
• Basic setup for the theme
• Showing search results for:-
  • Members search
  • Groups search
  • Activity search
  • Blog Posts search
  • Blog search
  • Group Forum search(BBPress 1.0 which you use for group forums)
  • BBPress 2.0 based forums topic search

Lets get started now.

Step1:- Installing the BP Global Unified search plugin

Install BP Global Unified search plugin.

Download:-BP Global Unified search

Once you Install and activate this plugin, BuddyPress will give you a notice that you need to create a page and associate it with Search Page.
Here is a screenshot showing the notice

Please create a WordPress page and associate the page with search page component in BuddyPress->Pages screen.
If you are done with this, let us proceed to the coding part now.

Please note that all the code below should go to your active theme/functions.php until and unless mentioned.

Step2:- Basic setup for theme

Remove the BuddyPress dropwn filters for members/groups/posts etc

//Remove Buddypress search drowpdown for selecting members etc
add_filter('bp_search_form_type_select', 'bpmag_remove_search_dropdown'  );
function bpmag_remove_search_dropdown($select_html){
    return '';
}

Step 3: Fixing the redirect/page not found for search page

Stop BuddyPress from redirecting to members/other component(by default on search, you are redirected to members directory). Let us stop that behavior.

//force buddypress to not process the search/redirect
remove_action( 'bp_init', 'bp_core_action_search_site', 7 );

Step4: Now, let us handle the search page ourself

//let us handle the unified page ourself
add_action( 'init', 'bp_buddydev_search', 10 );// custom handler for the search
function bp_buddydev_search(){
global $bp;
	if ( bp_is_current_component(BP_SEARCH_SLUG) )//if thids is search page
		bp_core_load_template( apply_filters( 'bp_core_template_search_template', 'search-single' ) );//load the single searh template
}

Step5: Tweaking the Query string for search

We will append the search term to BuddyPress query string.

add_action('advance-search','bpmag_show_search_results',1);//highest priority
/* we just need to filter the query and change search_term=The search text*/
function bpmag_show_search_results(){
    //filter the ajaxquerystring
     add_filter('bp_ajax_querystring','bpmag_global_search_qs',100,2);
}

 //modify the query string with the search term
function bpmag_global_search_qs(){
	return 'search_terms='.$_REQUEST['search-terms'];
}

//a utility function
function bpmag_is_advance_search(){
global $bp;
if(bp_is_current_component( BP_SEARCH_SLUG))
	return true;
return false;
}

Now we are done with the basic setup. It is time to show the search reults.

Step 6: Create a search-single.php in your theme

In the content area(if you are using default theme, then inside the div “padder”) put the following line

<?php do_action("advance-search");?>

Step7: showing the results

It is time to show the results. Please note, you can change which component’s search is shown first by changing the priority in the add_action below. Basically, we will check for the active component and just add their search result using the add_action, let us start with members.

Members search

//show the search results for member*/
function bpmag_show_member_search(){
    ?>
   <div class="members-search-result search-result">
   <h2 class="content-title"><?php _e('Members Results',"bpmag");?></h2>
  <?php locate_template( array( 'members/members-loop.php' ), true ) ;  ?>
  <?php global $members_template;
	if($members_template->total_member_count>1):?>
   <a href="<?php echo bp_get_root_domain().'/'.  bp_get_members_slug().'/?s='.$_REQUEST['search-terms']?>" ><?php _e(sprintf('View all %d matched Members',$members_template->total_member_count),"bpmag");?></a>
	<?php 	endif; ?>
    </div>
<?php
 }
//Hook Member results to search page
add_action('advance-search','bpmag_show_member_search',10); //the priority defines where in page this result will show up(the order of member search in other searchs)

Similarly, we will add the support for other components.

Adding Group Search

//Group search
function bpmag_show_groups_search(){
    ?>
<div class="groups-search-result search-result">
 	<h2 class="content-title"><?php _e('Group Search','bpmag');?></h2>
	<?php locate_template( array('groups/groups-loop.php' ), true ) ;  ?>

        <a href="<?php echo bp_get_root_domain().'/'.  bp_get_groups_slug().'/?s='.$_REQUEST['search-terms']?>" ><?php _e("View All matched Groups","bpmag");?></a>
</div>
	<?php
 //endif;
  }

//Hook Groups results to search page
 if(bp_is_active( 'groups' ))
    add_action('advance-search','bpmag_show_groups_search',15);

Searching Activity Updates

 /**activity update search*/
 //Activity search
function bpmag_show_activity_search(){
    ?>
<div class="activity-search-result search-result">
 	<h2 class="content-title"><?php _e('Activity Updates','bpmag');?></h2>
	<?php locate_template( array('activity/activity-loop.php' ), true ) ;  ?>

        <a href="<?php echo bp_get_root_domain().'/'.  bp_get_activity_slug().'/?s='.$_REQUEST['search-terms']?>" ><?php _e("View all matched updates","bpmag");?></a>
</div>
	<?php
 //endif;
  }

//Hook Activity results to search page
 if(bp_is_active( 'activity' ))
    add_action('advance-search','bpmag_show_activity_search',20);

Showing Blog post search

/**
 *
 * Show blog posts in search
 */
function bpmag_show_site_blog_search(){
    ?>
 <div class="blog-search-result search-result">

  <h2 class="content-title"><?php _e('Blog Search','bpmag');?></h2>

   <?php locate_template( array( 'search-loop.php' ), true ) ;  ?>
   <a href="<?php echo bp_get_root_domain().'/?s='.$_REQUEST['search-terms']?>" ><?php _e("View All matched Posts","bpmag");?></a>
</div>
   <?php
  }

//Hook Blog Post results to search page
 add_action('advance-search',"bpmag_show_site_blog_search",25);

Showing Blogs search(for Multisite)

//show blogs search result

function bpmag_show_blogs_search(){

    ?>
  <div class="blogs-search-result search-result">
  <h2 class="content-title"><?php _e('Blogs Search',"bpmag");?></h2>
  <?php locate_template( array( 'blogs/blogs-loop.php' ), true ) ;  ?>
  <a href="<?php echo bp_get_root_domain().'/'. bp_get_blogs_slug().'/?s='.$_REQUEST['search-terms']?>" ><?php _e("View All matched Blogs","bpmag");?></a>
 </div>
  <?php
  }

//Hook Blogs results to search page if blogs comonent is active
 if(bp_is_active( 'blogs' ))
    add_action('advance-search','bpmag_show_blogs_search',30);

Showing Forum(the Groups forum) topics in the search

//show forums search
function bpmag_show_forums_search(){
    ?>
 <div class="forums-search-result search-result">
   <h2 class="content-title"><?php _e("Forums Search","bpmag");?></h2>
  <?php locate_template( array( 'forums/forums-loop.php' ), true ) ;  ?>
   <a href="<?php echo bp_get_root_domain().'/'.  bp_get_forums_slug().'/?s='.$_REQUEST['search-terms']?>" ><?php _e("View All matched forum posts","bpmag");?></a>
</div>
  <?php
  }

//Hook Forums results to search page
if ( bp_is_active( 'forums' ) && bp_forums_is_installed_correctly() && bp_forums_has_directory() )
 add_action('advance-search',"bpmag_show_forums_search",35);

Extra bonus for following this tutorial till now:-
Showing Results for BBPress 2.0 plugin

function bpmag_show_bbpress_topic_search(){
     $_REQUEST['ts']=$_REQUEST['search-terms'];//put it for bbpress topic search
    ?>
  <div class="bbp-topic-search-result search-result">
  <h2 class="content-title"><?php _e('Global Topic Search',"bpmag");?></h2>
  <?php bbp_get_template_part('bbpress/content','archive-topic') ;  ?>
  <?php
  global $bbp;
    $page = bbp_get_page_by_path( $bbp->root_slug );

  ?>
  <a href="<?php echo get_permalink($page).'?ts='.$_REQUEST['search-terms']?>" ><?php _e("View All matched topics","bpmag");?></a>
 </div>
  <?php
  }

//Hook Blogs results to search page if blogs comonent is active
 if(function_exists( 'bbp_has_topics' ))
    add_action('advance-search','bpmag_show_bbpress_topic_search',40);

btw, if you find this tutorial a long one, you can simply copy the template/functions.php from bp-global-unified-search and paste it in your theme’s functions.php. Also, I have put a sample search-loop.php in the bp-global-unified-search/template directory. So, you can use it directly or adapt to your theme.

I hope you will like it. Looking forward to hear your suggestions and feedback for further improvement.

Related posts:

1. Creating The sitewide global/unified search Page for your Buddypress Theme
2. Introducing Global sitewide forums plugin for Buddypress
3. Supporting Cubepoints for Global forums

BuddyPress Simple Front End post plugin allows developer to create unlimited post forms for the front end posting. The current release includes support for custom posts type and categories but not the custom taxonomies. I will include custom taxonomy support in future.

I created this plugin to use with Blog categories with groups plugin as I could not find a nice solution for the purpose. Currently this plugin is aimed as developers. It has a simple api to create forms and to use them in theme. All the nasty works are handled by the plugin, so a developer does not need to dive into the code. Instead just use two lines of code to create a custom post form for any purpose they like.

Here is a screenshot of it being used with Blog Categories for groups plugin

Features:-

• Allows to create  any number of customized post forms
• supports custom post type
• supports including a list of categories
• has a very simple to use API for developers(I will show an example below)
• It is very very Light weight

How to Use It:-

The basic philosophy is to allow developers to create an Instance of  ’BPSimpleBlogPostEditForm’ class for each of their form. This class handles the view and behavior both. Once you create an instance, you will need to register it to the ‘BPSimpleBlogPostEditor’ class(which is implemented as singleton pattern). Ok, so that seems nasty, right? No worries, you don’t need to delve into that. There are two api functions which will do it for you. You just need to pass the form name(which should be a unique name, it can contain spaces etc) and the basic sdettings of the form(like post type, allowed categories, who can write, who will be attributed as the author of the post and the post status).

Registering a Form Instance:-

To create and register a post form(with settings), you will need to use the following code

$form=bp_new_simple_blog_post_form($form_name,$settings);

The above code creates an instanace of ‘BPSimpleBlogPostEditForm’ class and registers it to the editor. You can create any number of forms you want. The above code must be called on/before bp_init action priority 10.

Here is a working example with the details of allowed parameters.

add_action('bp_init','my_post_form',4);//register a form
//it will register a fomr
function my_post_form(){
$settings=array('post_type'=>'post',//which post type
'post_author'=>  bp_loggedin_user_id(),//who will be the author of the submitted post
'post_status'=>'draft',//how the post should be saved, change it to 'publish' if you want to make the post published automatically
'current_user_can_post'=>  is_user_logged_in(),//who can post
'show_categories'=>true,//whether to show categories list or not, make sure to keep it true
'allowed_categories'=>array(1,2,3,4)//array of allowed categories which should be shown, use  get_all_category_ids() if you want to allow all categories
);

$form=bp_new_simple_blog_post_form('my form',$settings);//create a Form Instance and register it

}

You can modify any  parameter as you like. Even you can set it to allow non logged in users to submit post and save it to another user account.

The above code will register a new form with name ‘my form’ and you can retrieve it later at any point and show the form anywhere using the following code. We need to register the form on/before bp_init priority 10 to allow the controller to have access to this form. If you register the form after bp_init action, the controller will be unaware of the form’s existance and can not handle the save action.

Once a form is registered, you can show it anywhere you like using the following function.

//now let us  find the form and render it

$form=bp_get_simple_blog_post_form('my form');

if($form) //if this is a valid form
  $form->show();//it will show the form

You can use above code anywhere in your template to render the form.

Though registering the form on/before bp_init action may seem like a bad choice to some of you, It allows for server side validation of the credentials/authentication and thus helps from any misuse of the form.

It is a free plugin, please feel free to download it and use it on your custom projects. The Blog Categoris for groups plugin version 1.0.4 supports this plugin. You will simply need to activate this plugin and the plugin will work as the form handler for Bp Blog Categories.

Download Link:http://buddydev.com/plugins/bp-simple-front-end-post/

Code Repository: https://github.com/sbrajesh/bp-simple-front-end-post

Looking forward to hear your suggestions for the improvement of this plugin

Related posts:

1. Introducing BuddyPress Simple Google Map Plugin
2. Blog Categories for Groups Plugin
3. BuddyPress Ajax Registration Plugin: Allow users to quickly register on any page of your website and increase participation

BP Testimonials is a plugin which allows your users to leave recommendations/testiomonial for other  users on your BuddyPress based social network.

Purpose:-

• Allow users recommending other users
• Can be used as in Linked In recommendation feature or orkut testimonial feature(Or may be as review)

This plugin uses custom post types in optimized way and will be easy on databases.

Screenshots:-

User Testimonials

Writing Testimonial

After writing Testimonial

Pending Testimonial

Local Notification:

and the mail notification settings for testimonials

I hope the screenshots are enough to convey the working and the features.

Please note this is a premium plugin so you will need to have BuddyDev premium membership to download it.

Download Link:

http://buddydev.com/plugins/bp-user-testimonials/

Looking forward to hear your thoughts on it.

Related posts:

1. Introducing BuddyPress Message Privacy Plugin
2. Introducing the first stable version of Global Forums Plugin
3. Introducing BuddyPress Live Notification Plugin: A facebook like notification plugin for BuddyPress

BuddyPress Ajax registration plugin allows your users to register quickly on your website. User can register from any page of your website. The plugin not only registers them but also logs them to the website automatically.

Features:

• Easy Registration using Ajax
• Users can register from any page of the site
• Automatically logs the new user to website
• Will increase the participation of users(As they can register and login on a specific page without any redirects)
• Allows you to control which xprofile fields/groups are shown(programatically)
• Developers/Designers have full control over layout(Yes, you can theme the popup as  you want and also control the template if you want)
• Compatible with BuddyPress on WordPress(standard) as well as WordPress Multisite(Including blog registration)

I will like to thank @Greg for the Idea. He mentioned it a couple of time for our global forum plugin and increasing participation in the forum topics a few months ago. I got some time recently and created the plugin.

Credit: This plugin uses the jQuery modal plugin by Richard Scarrott

It is a flexible and will allow you to control the layout/look and feel.

Screenshots:

Let us see some screenshots first

Here is the registration screen

If there is an error, the user will be notified immidiately as shown below

And if the registration is successfull, user sees the welcome message and is then logged in to the current page

The message will appear for 1 second(You can control it from the javascript file) and then the page will be refreshed to make the user login.

The plugin automatically filters BuddyPress standard signup links(In the admin bar, sidebar) and activates the modal . So, once you have installed it, you are ready to go.

If you want to show the registration popup box on any other link, just give it a class ‘bp-ajaxr‘ and the the modal box will automatically work for that.

Customizing the Layout template:-

I have included a registration page(register.php) in the plugin. If you want to use your own registration page, you can create a register.php in your theme and It will load automatically.

Controling which Xprofile fields/groups are shown:-

Use the filter ‘bpajaxr_xprofile_args’ to filter on Xprofile loop arguements. Let us say if you want to show all the fields from xprofile field group 2, you can use it in your functions.php /bp-custom.php as below

add_filter('bpajaxr_xprofile_args','my_custom_registration_fields');

function my_custom_registration_fields($args=''){

return 'profile_group_id=2&hide_empty_fields=0&hide_empty_groups=0';

}

Download: http://buddydev.com/plugins/bp-ajax-registration/

I hope this plugin will help you all. Looking forward to hear your feedback from you

Note: this is a premium plugin. Also, if you are using  BP Autoactivate Autologin plugin, please download the version 1.2.6 which is compatible with it.

Related posts:

1. Introducing BuddyPress Facebook Connect+: Advance Facebook login/registration Plugin for your BuddyPress based Social Network
2. Enhancing The new User registration Message On WordPress Multisite and BuddyPress to make it more informative for Site Admins
3. Allow your users to change their Profile page background using BP Custom Background For User Profile Plugin

How many of you use facebook for connecting with Friends and family, I believe almost all Today, I am going to show how to make the BuddyPress Activity Stream activity commenting look/work like facebook activity commenting. I will be doing it by using bp-default theme as an example. you can easily modify it for other themes.

In addition to writing css/js, we will need one jquery plugin to autogrow the text area as a user types.

Github Repo: https://github.com/sbrajesh/fb-style-activity-commenting

Goals:-

• Make activity comment section look like facebook
• make activity posting like facebook

External script required:-

jQuery AutoGrow textArea:- We will use it for autogrowing comment text box. The script is a part of jQuery grab bag by Jason Frame

Lets get started. But before that, lets have a look at the final screenshot.

Step 1: No multilevel commenting

I know it is a bad decision, but this is what facebook does. I am just following the lead.

You can put the following code in functions.php to stop mulitlevel commenting

add_filter('bp_activity_can_comment_reply','__return_false');

Since I don’t want to temper with core files of bp-default(read it whatever theme you use), We will be including the code to load out comment.js and the autogrow textarea plugin. You should create comment.js in the_inc folder of your theme and also put the autogrow plugin there.

Here is the code you need to put in functions.php

//include the javascript, change it as you want
add_action("wp_print_scripts","bp_fbstyle_comment_js");
function bp_fbstyle_comment_js(){
    if(!is_user_logged_in())
        return ;//we do not want to include the js
    wp_enqueue_script("bpfb-comment-js", get_stylesheet_directory_uri()."/_inc/comment.js",array('jquery','dtheme-ajax-js'));
    wp_enqueue_script("bpfb-comment-autogrow-js", get_stylesheet_directory_uri()."/_inc/jquery.autogrow-textarea.js",array('jquery'));
}

I am including these from my child theme, you can change the above line to make sure you are loading it correctly from your theme.

That’s all we need to do in php. Now, we will write some javascript and css to make it work like facebook activity commenting.

Step2:  The CSS

Let us make the activity comment form visible. Onething to note here, facebook puts a visible comment form only for those activities which already have atleast one comment. I am following the same. You can change that behaviour and make it visible for all activities(I will be mentioning how to do that)

I have adjusted the margin of the form appropriately for our page formatting.

li.has-comments div.activity-comments form.ac-form {
    display:block;
    margin:0 0 5px 0;
}
/*if you want to make it visible for all activity, change the above css selector from 'li.has-comments div.activity-comments form.ac-form' to 'div.activity-comments form.ac-form'. Note, we removed the li.has-comments from the selector*/

Now, as the form is visible, we will need to hide the commenter avatar(the logged in user avatar and remove the unnecessary margin/padding)

.ac-form .ac-reply-avatar{
    display:none;
}

div.activity-comments form div.ac-reply-content{
    margin-left: 0;
    padding-left: 0;
    margin-bottom: 5px;
    height:35px;/* you may need to adjust height according to the one you choose for your textarea*/
}

That’s nice. Now, we will need to fix the height of the textarea to fit one line of text and hide the submit button. After all, we assume pressing enter will post the comment.

div.activity-comments form textarea {
    height: 13px;
}
div.activity-comments form input[type='submit']{
    display:none;
}

So, that’s the basic css. It will make the comment form visible for the appropriate activity entries.

Now, When a particular text area gains focus, we will add class ‘active’ to its parent form. So, we will need to update our active form css when a comment textarea gains focus.
Here is the css for that

/*on active/focus*/
form.active .ac-reply-avatar{
    float:left;
    display: block;
}
form.active .ac-reply-avatar img.avatar {
    float: left;
    margin: 0 3px 0 0;
     height: 25px;

    width: 25px;
}
/*reset the height of comment box wrapper to make the comment box grow later*/
div.activity-comments form.active div.ac-reply-content{
    height:auto;
}
form.active .ac-textarea{
    margin-bottom: 10px;
    padding: 0px 8px 8px 8px;
    }
    div.activity-comments form.active div.ac-reply-content{
    margin-left: 30px;
    padding-left: 2px;

}

So, that is the complete css we will need.

Let us write some javascript code to emulate the fb effect. All these code goes to comment.js

Step 3: The javascript

So, as jQuery says, let us do everything when the dom is ready. All the code blow this section is wrapped inside this block

jQuery(document).ready(function(){

//the actual code

});

Now, the initial setup. The BP default theme hides all the activity form using javascript. We will need to make them visible again.

var jq=jQuery;//we do no want to keep the value to mess our layout, and we do not want to do the complex calculations too
 jq("form.ac-form textarea").val('');

 jq(".has-comments form.ac-form").show();//make all the activity comment form visible whose parent have at least 1 previous comment.
 //if you want to show the activity comment form for all the activities , irrespective of whether there are already comments or not, comment the above line and uncomment the below line
 //jq("form.ac-form").show();
 jq("form.ac-form").show();//make all the activity comment form visible

Please note what I mentioned in the last 2 lines of above code. If you have made your css to show the comment form for all the activity entries, then comment and uncomment the above code as instructed.

Now, let us bind the auto grow plugin to all the activity comment text area

jq('.ac-textarea textarea').autogrow();

Add class “active” to the parent of the text area which has gained focus and remove the class ‘active from all other forms.

//on focus, add remove active class
 jq('.ac-textarea textarea').live('focus', function(){
     var ac_form=jq(this).parent().parent().parent();//parent form
         ac_form.addClass('active');

         jq('.ac-textarea').parents('form.ac-form').not(ac_form).removeClass('active');

  });

The above step could have been done in easier step by first removing the class from all forms and then adding it to current textarea’s parent.I just wanted better usability by first activating this form.

Let us handle the Pressing of ESC button and the Enter. We are resetting the form on escape key pressing and posting the comment when the enter key is pressed.

 /* Handle the ESC/ENTER key with more specific element and cancel even bubbling for these actions to void bp-default's way of handling this */
jq('.ac-textarea textarea').keydown( function(e) {
	 element = e.target;

	//if meta keys, don't do anything
          if( e.ctrlKey == true || e.altKey == true || e.metaKey == true )
		return;

            var keyCode = (e.keyCode) ? e.keyCode : e.which;

                    //if ESC key was pressed
           if ( keyCode == 27 ) {
                   jq(element).animate({'height':'13px'});//reset back to its original height

                   return false;

                }
            else if(keyCode==13){//if enter pressed
                //jq(element).parent().next().click();//since we have not removed the submit button
                  ac_post_comment(element);
                return false;

            }

});//end of ESC/enter handling code

As you can see in the above code, I have mentioned that writing the ac_post_comment function could be avoided by uncommenting the previous line(submit button clicking). The problem is the javascript in bp-default hides the reply box below the posted comment but we don’t want that. So, you can either uncomment a line in global.js or use the code below.

  /**post activity comment*/
  //just a copy of bp-default activity comment posting code with  slight modification to avoid hiding the forms
  function ac_post_comment(target){
    target=jq(target);

    	/* Activity comment posting */
		if ( target.hasClass('ac-input') ) {
			var form = target.parent().parent().parent();
			var form_parent = form.parent();
			var form_id = form.attr('id').split('-');

			if ( !form_parent.hasClass('activity-comments') ) {
				var tmp_id = form_parent.attr('id').split('-');
				var comment_id = tmp_id[1];
			} else {
				var comment_id = form_id[2];
			}

			/* Hide any error messages */
			jq( 'form#' + form + ' div.error').hide();
			target.next('.loader').addClass('loading').end().prop('disabled', true);

			jq.post( ajaxurl, {
				action: 'new_activity_comment',
				'cookie': encodeURIComponent(document.cookie),
				'_wpnonce_new_activity_comment': jq("input#_wpnonce_new_activity_comment").val(),
				'comment_id': comment_id,
				'form_id': form_id[2],
				'content': jq('form#' + form.attr('id') + ' textarea').val()
			},
			function(response)
			{
				target.next('.loader').removeClass('loading');

				/* Check for errors and append if found. */
				if ( response[0] + response[1] == '-1' ) {
					form.append( response.substr( 2, response.length ) ).hide().fadeIn( 200 );
				} else {
					form.fadeOut( 200,
						function() {
							if ( 0 == form.parent().children('ul').length ) {
								if ( form.parent().hasClass('activity-comments') )
									form.parent().prepend('<ul></ul>');
								else
									form.parent().append('<ul></ul>');
							}

							form.parent().children('ul').append(response).hide().fadeIn( 200 );
							form.children('textarea').val('');
							form.parent().parent().addClass('has-comments');
						}
					);//form hiding
					jq( 'form#' + form + ' textarea').val('');
                                        target.height(20);
                                      //  form.removeClass('active');
                                        form.fadeIn(200);

					/* Increase the "Reply (X)" button count */
					jq('li#activity-' + form_id[2] + ' a.acomment-reply span').html( Number( jq('li#activity-' + form_id[2] + ' a.acomment-reply span').html() ) + 1 );
				}

				jq(target).prop("disabled", false);
			});

			return false;
		}
}

Now, we have done everything and the code will work. The last thing we need to fix is clicking on the comment(x) link below the activity entry. By default, bp-default theme show the comment form for that activity and hides all other comment form. we need to stop it hiding other comment form. You can uncomment a line in global.js or just use the code below.

/* You can avoid the code blow if you want to change a line in global.js, if you don't, then this code does it for you*/
//the code below is taken from bp-default activity comment link clicking code, I have attached the evnt to more specific element and also remoded the form hiding code
jq('div.activity .acomment-reply').click( function(event) {
		var target = jq(event.target);

                var id = target.attr('id');
                ids = id.split('-');

                var a_id = ids[2]
                var c_id = target.attr('href').substr( 10, target.attr('href').length );
                var form = jq( '#ac-form-' + a_id );

                form.css( 'display', 'none' );
                form.removeClass('root');
                //jq('.ac-form').hide();//you can just comment out this line in the global.js of bp-default and avoid this whole block of code

                /* Hide any error messages */
                form.children('div').each( function() {
                        if ( jq(this).hasClass( 'error' ) )
                                jq(this).hide();
                });

                if ( ids[1] != 'comment' ) {
                        jq('div.activity-comments li#acomment-' + c_id).append( form );
                } else {
                        jq('li#activity-' + a_id + ' div.activity-comments').append( form );
                }

                if ( form.parent().hasClass( 'activity-comments' ) )
                        form.addClass('root');

                form.slideDown( 200 );
                jq.scrollTo( form, 500, { offset:-100, easing:'easeOutQuad' } );
                jq('#ac-form-' + ids[2] + ' textarea').focus();

                return false;

});

That’s it. You are ready to see your supercool facebook like activity commenting.

I have put the above code as a child theme of bp-default on github. If you want to take a look and see it in action, download it from here and active.

Github Repo:https://github.com/sbrajesh/fb-style-activity-commenting

My tutorial uses the reference of bp-default theme for BuddyPress 1.5 but you can modify it for any of the existing theme with some minor css/js changes if any.

Hope it helps some of you. Looking forward to hear your thoughts and feedback

Related posts:

1. Disable Blog Posts and new Blog Comments recording/tracking In the activity by BuddyPress
2. BuddyPress Activity Comment Notifier Plugin Update
3. BuddyPress Sitewide Activity widget Updated

We all love BuddyPress. It’s an awesome plugin which brought a new era in social network development(partially because of the popularity of the WordPress platform and mostly because of the awesome core developres/community). Since the philosophy of BuddyPress is centred around openness, It does not limit the activity to your personal preferences(like showing all the relevant activity on a single page(friends/ user’s /user’s groups activity). It does show them, but they do not give a feel of stream you see on most of the social networks(like Facebook home page, or your orkut home page etc).

In past, many of the members here(as well as I got some mail with suggestions) to streamline all the relevant activity content for a user on a single page.

Today, I am introducing the plugin Facebook Like User Activity Stream for BuddyPress. It is a step towards the right direction. You can use it with a few other plugins to make a social network just like the famous ones. It simply aggregates all the relevant activity for the users on a single page. Right, you can see your updates/your friends update/Your groups update on the same page(as is the case of facebook feed for user).

Features:-

• Aggregating and Providing a familiar page to users where all the relevant activity are aggregated
• Clicking on Username automatically redirects to His/Her stream
• And yes, It limits the view to logged in user for their own network, just like the other social networks do

Here are a couple of screenshots to demonstrate its use:-

Visiting Own Profile:-

You can see the stream link as well as the activity of a private group being shown on his/her profile

Here is what you see if you visit other user’s profile(This is just normal, I am trying to show the difference of the visibility of private activity)

and another screenshot where the updates from groups are shown on the same page even if the users(whose updates are visible) are not friends of the logged in user.

It is most useful if your users are coming from one of the existing social network. they will find it much more intuitive.

My screen shots may not give you the feel of actual potential of this plugin, Installing and using it yourself will give a much better idea of what it can do.

Download &Installation

http://buddydev.com/plugins/facebook-like-user-activity-stream-for-buddypress/

Looking forward to hear your feedback and help you further.

P.S.: Currently this plugin is available to the BuddyDev premium members  only. Thank you all for your generous support.

Related posts:

1. Introducing BuddyPress Facebook Connect+: Advance Facebook login/registration Plugin for your BuddyPress based Social Network
2. Show BuddyPress community(sitewide) activity on User Profile
3. Introducing Cosmic Buddy Pro Theme for BuddyPress Based Social Networks

BuddyPress Group suggest widget is a small plugin which helps your users by suggesting them the groups of their friends. It works on the simple logic of finding the groups of friends of a user and then suggesting it. In the current release, I have limited the suggestion to the public groups of the friends only. My special thanks goes to @Gwu for nudging me constantly for the plugin

Like BuddyPress Friends suggest widget, this plugin allows users to hide the suggestions they don’t want to see in future.

Features:-

• Suggest new groups to User based on their friend’s groups
• Users can hide the suggested groups

Screenshots:-

Widget in the Available Widget section:-

Widget Settings:-

Download &Installation:-

http://buddydev.com/plugins/bp-group-suggest

Git Repo:

https://github.com/sbrajesh/bp-group-suggest

Please do let me know your thoughts and suggestions for the improvement. Looking forward to hear your comments.

Related posts:

1. BuddyPress Friends suggestions Widget:- Help your Users to Build Their Network faster
2. BuddyPress User Notifications Widget plugin
3. Exclude Users from Members directory on a BuddyPress based social network

Thanks to @Daniel for the suggesting this plugin. BuddyPress Simple Google Map plugin uses static google map api  to add the Maps to groups. It is tested to work with BuddyPress 1.2.9 as well as BuddyPress 1.3(bleeding).

In the current version, I have only added support for group and I am looking forward to your suggestion whether you will like to have the static map for User profiles too.

Features:-

• Adds Google Map to Groups
• Comes with Widget to showcase the map in sidebar
• Simple to Use
• Uses Google static Map, so no need for loading any extra javascript
• Allows to enable/disable per group
• You can set the basic settings in the admin panel.

Screenshots:-

Here is a screenshot of the map in action:-

Group Map tab

Admin Options:-

You can set the height, width, zoom level and the map type from BuddyPress->BP Simple Map admin options. Here are the two options to show it

Map Type:-

You can select from any of the four map types :- Roadmap, Terrain, Setellite, and Hybrid.

Zoom Level

You can select zoom level upto 21(highest) as shown below

Here is the widget settings screen

The widget will be visible on groups page only if the location is set and the map is not disabled.

The Location can be set from Groups->Group Name->Admin->Map as shown below

You can even disable the map for a particular group from admin->settings page

Ok, no more screenshots, now the time for action.

You can grab the plugin from below.

Download &Installation

http://buddydev.com/plugins/bp-simple-google-map/

Git Repo:-

https://github.com/sbrajesh/bp-simple-google-map

I am looking forward to hear your thought about adding support for user profile.

Related posts:

1. Introducing BuddyPress Message Privacy Plugin
2. Limit Groups Per User Plugin For Buddypress
3. BuddyPress Group Suggest Widget: Help your members to find new groups

Hi All,

I am sure most of you are busy building the social networks on BuddyPress. Well, here I am presenting another addon to help you a little more.

The BuddyPress notifications widget was suggested by @Reboot in the forum. There is one existing notification widget for BuddyPress but that does not allow multi instance or some other customizations. Reboot suggested to update that widget but when I checked the code, writing a brand new version seemed much better choice & that’s why I am presenting it here today

Some features:-

• Multinstance, means you can have as many instance as you want.
• Allows you to show/hide the notification count in widget title
• Allows   you to show/hide the message showing notification count (please see screenshots)
• Allows you to show/hide the notification list(well, I am not sure if you would like to use that anyway)
• Completely localizable, please use poedit/any other tool to translate

Let us see some screenshots

Ana an example of output(2 widget instances)

I hope some of you will find it helpful.

Download & Installation:-

http://buddydev.com/plugins/buddypress-notifications-widget/
Git Repo:- https://github.com/sbrajesh/buddypress-notifications-widget

Please do let me know your suggestions or any thing you want in the comments.

PS: Last weekend, I promidsed to write some of the tutorial tips/tricks for BuddyPress. So, I am going to put eaither one plugin each day this week or atleast one tutorial. Please do keep checking

Related posts:

1. BuddyPress Group Suggest Widget: Help your members to find new groups
2. Introducing BuddyPress Live Notification Plugin: A facebook like notification plugin for BuddyPress
3. BuddyPress Sitewide Activity Widget updates