Facebook Like Push Notification Function for Website

Introduction:

Facebook is one of the greater social media ever. To attract more visitors and for keeping the existing members, the developers of the Facebook were adding different amazing functions. Facebook Push Notification is one of the functions like that. This function will allow the users to get alerted their latest notification from Facebook on the browser screen while they are browsing different site even if they close the Facebook Dashboard. This function was developed using Javascript scripting language, and it will run smoothly on Chrome and Mozilla browser. We can also implement the same function on our website to alert our website visitors about latest updates. Through this article, we are going to learn Implementation of Facebook Push Notification System on our website.

Download and Demo:

Click here to see the demo: Click here
Click here to download: Click here

Advantages of Facebook Push Notification System:

Facebook Push Notification System will help you to increase your website traffic and make your visitor always alert about your latest website updations and return them to your website. Some of the subscription methods such as Email Subscription method and Facebook Social Media Like method only alert your subscribed users about the update but Facebook Push Notification method will alert your non-subscribed visitors also about your website updates.

Implement Facebook Push Notification System on Your Website:

It is very easy to Implement Facebook Push Notification System on your Website. All you want to do that just download the script and paste the Javascript in between the <head> and </head> Html Tag.
<script type="text/javascript">

var articles = [
["Blogger Template Designing Tutorial Part 2.","http://www.howi.in/2015/12/blogger-template-designing-tutorial-part-2.html"],
["Learn to Start Your Own Webhosting Company Today.","http://www.howi.in/2015/12/start-own-webhosting-and-domain-company.html"],
["Create Own Android App for Your Blogger Blog.","http://www.howi.in/2015/12/create-android-app-for-blogger-blog.html"]
];


setTimeout(function(){ 
var x = Math.floor((Math.random() * 10) + 1);
var title=articles[x][0];
var desc='Most popular article.';
var url=articles[x][1];
notifyBrowser(title,desc,url);
}, 200000);



document.addEventListener('DOMContentLoaded', function () 
{
    
if (Notification.permission !== "granted")
{
Notification.requestPermission();
}

document.querySelector("#notificationButton").addEventListener("click", function(e)
{
var x = Math.floor((Math.random() * 10) + 1);
var title=articles[x][0];
var desc='Most popular article.';
var url=articles[x][1];
notifyBrowser(title,desc,url);
e.preventDefault();
});

});

function notifyBrowser(title,desc,url) 
{
if (!Notification) {
console.log('Desktop notifications not available in your browser..'); 
return;
}
if (Notification.permission !== "granted")
{
Notification.requestPermission();
}
else {
var notification = new Notification(title, {
icon:'logo.png',
body: desc,
});
// Remove the notification from Notification Center when clicked.
notification.onclick = function () {
window.open(url);      
};

// Callback function when the notification is closed.
notification.onclose = function () {
console.log('Notification closed');
};

}
}
</script>
  • Modify the below code from the above Javascript code to show your website Notification.
var articles = [
["Blogger Template Designing Tutorial Part 2.","http://www.howi.in/2015/12/blogger-template-designing-tutorial-part-2.html"],
["Learn to Start Your Own Webhosting Company Today.","http://www.howi.in/2015/12/start-own-webhosting-and-domain-company.html"],
["Create Own Android App for Your Blogger Blog.","http://www.howi.in/2015/12/create-android-app-for-blogger-blog.html"]
];
  • Make changes on URL with your Website URL's and Titles.
  • You can also set the time delay for showing subsequent notification.
setTimeout(function(){ 
var x = Math.floor((Math.random() * 10) + 1);
var title=articles[x][0];
var desc='Most popular article.';
var url=articles[x][1];
notifyBrowser(title,desc,url);
}, 200000);
  • Change the Logo of Notification Pop by modifying the below code.
icon:'logo.png',
By customizing the script, you can make unique alerting system's like Facebook and Vanilla Forum do. You can also Implement this Notification System on your Discussion Forum and Blogs to alert your visitors and make them always engage on your website.

Suggested Article for Web-Developers:

I hope you well enjoyed this article. If you have any kind of doubts or suggestions related to this article. Please let me know by using the comment box that given below. Thanks

2 comments:

  1. How It Works??? If I Post New Articles In My blog users will get autometicly??????

    ReplyDelete
    Replies
    1. Yes... After adding the Javascript to your blog, Just update the variables of URL and Title . Then your visitor automatically gets the new updates that you updated.

      Delete

Wapmaster or Webmaster can Comment Us with the following Comment Box . Don't add Links to your site for Spamming our Blog .. Once you add Comment with Link . It will be deleted immediatly by our Admins .

 
Top