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

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).
  1. August 15, 2012 at 11:16 PM | #1

    how do i make it my read my updates table automatically or send it a request to show

    • ruby
      October 17, 2013 at 6:44 AM | #2

      did you figure out how to read the table updates?

  2. November 8, 2012 at 1:26 AM | #3

    I constantly emailed this blog post page to all my contacts, since if
    like to read it after that my friends will too.

  3. March 26, 2013 at 7:55 AM | #4

    I’m truly enjoying the design and layout of your blog. It’s
    a very easy on the eyes which makes it much more pleasant for me to come
    here and visit more often. Did you hire out a developer
    to create your theme? Fantastic work!

  1. May 20, 2012 at 9:42 PM | #1
  2. May 23, 2012 at 5:47 PM | #2
  3. May 23, 2012 at 8:11 PM | #3
  4. June 24, 2012 at 4:15 PM | #4

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 59 other followers

%d bloggers like this: