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

    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

      did you figure out how to read the table updates?

  2. November 8, 2012 at 1:26 AM

    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

    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!

  4. April 7, 2014 at 12:17 PM

    Hello, i believe that i noticed you visited my site thus i got here
    to go back the prefer?.I am attempting to to find issues to
    enhance my web site!I suppose its ok to make
    use of some of your concepts!!

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

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 90 other followers

%d bloggers like this: