How to implement Facebook style Notifications for Organic Group posts? [closed]

Question

I am using Organic Groups, Drupal Commons. If someone posts in group, then all the members should be notified like in Facebook with the number of notifications. Similar to this screenprint:

How can I achieve that ?

Notes:

• By Posts I mean a creating new node of Post content type (default) in Organic Group (and commenting part is not required now).
• I have not implemented any rule for this, can you explain how can I achieve this using rules ?

Answer 1

Below is a blueprint of how you can make this work. To avoid writing a manual as an answer, and to avoid repeating myself, I use some links to other answers (not all of them are mine ...).

Step 1: Get Rules involved

Use the Rules module to capture events about new nodes being created, which belong to some Organic Group. Have a look to either of the answers to "Get organic group name in a rule?", for 2 possible alternatives to "send an eMail" to each member of the group.

With that, all that's left is to replace the Rules Action to "send an eMail" with something that shows the number of notifications (as in your question), as further explained below.

Step 2: Use Messages to create notification entities

Install/enable the Message module also. So that you replace the Rules Action from the previous step to "send an eMail" by a Rules Action to create message "entities" (which is what you get if you use the Message module). And then just use the power of Views to display those messages later on (hang on: in a format like your shiny notification button ...).

Here is a summary of what you'd need:

1. Define an appropriate Message type, using the Message module. Think of Message types as similar to "Content types", which will be used to create Messages, similar to Nodes.

2. Enhance your rule with a Rules Action "Create entity" (of type "Message"). Refer to the answer in Which user related token(s) can be used to create a Rule for setting up a message type? for some examples.

3. Possibly you may also want to add a Rules Action to pass any relevant tokens, via Rules, as Replacement tokens that you can use in your Message type you created with the Message module. Refer to What's the purpose of "Replacement tokens" of a Message type? for more details on this.

4. Use Views to display the created messages in the format you prefer.

Step 3: Transform the view in a notification icon

The Menu Badges module can be used to add such notifications to any menu item and/or menu tab of your choice. Here are some details about it (from its project page):

Provides a method for adding iOS-style badges to menu items. (see screenshot)

Adding Badges to Menus

Once enabled, go to Administration > Structure > Menus, and click "list links" next to the menu containing the target item. Click "edit" next to the item and select the badge to display with the Display Menu Badge select box.

Adding Badges to Tabs

For adding badges to menu tabs, there is a tab under Administration > Structure > Menus called "Tab Menu Badges". Search for the menu router path of the tab you want to alter, then select a badge from the corresponding select box.

Badge Types

The module includes five example badges, and new badges can be created easily with Views. Modules can also supply their own badges with a hook implementation. See the README.txt file for details.

Because of how it integrates with the Views module, you basically reduce the solution for any type of notification to something like this:

1. Just create an appropriate view of it, create a menu item or menu tab for that view. Obviously, the view created in Step 2 is the view you want to use.
2. Do a 15 seconds Menu Badges configuration to tell it which menu item/tab you used for it in your view.

Video tutorials:

• Defining Menu Badges with Views in Drupal (from the module maintainer).
• Drupal 7 Menu Badges Module.

Step 4: Updating the notification icon

After you completed the above steps, you'll have such shiny notification icon corresponding to the relevant messages. What's left is to implement something to get the icon (ie the counter shown in it) updated, as further explained below.

Option 1 - Make the Messages manage-able

This option allows a user to indicate which messages have been read already, and which ones are new (= unread). For that, just perform the steps explained in "How to allow users to manage their own Message Stack messages?", which can be summarized like so:

1. Create a flag (using the Flag module).
2. Create a view 'Messages by user' (= improved version of the view specifications described above).
3. Use Rules to flag/unflag messages.
4. Trigger the Rules Component to mark messages (using the VBO module).
5. Create notifications about Unread Messages (using the "Menu Badges" module). So that whenever a new message gets created, the user gets a notification in the format of an iOS-like (red) badge with the number of unread messages.

Option 2 - Remove the notification icon after visiting some path

This option will remove the notification icon entirely, after the user visited the dedicated path to display all messages. Refer to the answer to "How to make menu badges count disappear after the page is viewed?" for details about how to do so.

Answer 2

FAB, this answer won't be finished for a while but it should let you get closer to FB functionality when it's done when added to Pierre's answer.

Pierre, I'll assume you're comfortable with Rules Link.

It outputs a JS toggle like below which we can hide with CSS.

<div class="rules-link-wrapper rules-link-messages_seen">
  <a href="/seen/1234/_Rr4IZddvsd5kl8VtuNUqFyHPUHQ3LAepC-I1WzujWg" class="rules-link rules-link-js rules-link jquery-once-1-processed" rel="nofollow" title="Seen">Seen</a>
<span class="rules-link-message" style="display: none;">Link executed</span></div>

If our menu item has the class .menu_unread and the badge is .badge_unread, we can do the following to fire our VBO rule.

  $('.menu_unread').click( function () {
              // Get the url from the JS link
              var rules_link_url = $('.rules-link-messages_seen a').attr('href');
              $.ajax({
              type: 'POST',
              url: rules_link_url,
              dataType: 'json',
              success: function () { 
              // Hide Badge.. Or you could fake set it to zero
                    $('.badge_unread').hide();
                    //So the rule fires once only
                    $(' menu Identifier ').removeClass('menu_unread');
                }
              });
        });

This should also work with flag toggles but won't let us unflag immediately like the default behavior.

Why do this? Fire rules from clicks on any element.