How to create a facebook style activity notification plugin using jQuery and PHP – facebook beeper

Facebook’s new beeper alert notification system looks so handy.

I believe that this is the most effective way of notifying anything live like a friends update or a friends request or when someone comes online.

But the technology behind is just so simple. It contains only a bit of javascript code using jQuery and some simple CSS.

In this tutorial we are going to learn how to create such a update notification plugin, which facebook developers call it as a beeper.

The Basic Setup

1. Include the jQuery and notification javascript libraries into your document

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="facebookNotification.js" type="text/javascript"></script>

2. Include the notification CSS into your document

<link rel="stylesheet" type="text/css" href="style.css" />

3. Create a div to display the notification message and name it “tips”

<div id="tips"></div>

Features

• In Facebook Whenever there is a update entry in the updates table, it triggers the alert notification plugin using jQuery. In our case we will trigger it manually.
• Automatically hides the facebook beeper after five seconds.
• Onmouseover, the script prevents the hiding of facebook beeper.
• Again after 5 seconds of mouseout, the facebook beeper hides automatically.
• There is a close button at the top-right corner to close a particular facebook beeper.
• It almost simulates the facebook beeper (Update notification system).