Facebook Like Button

Facebook Like Button

Web Stuff 19.10.2015 5082

I'm sure you have seen the new facebook like button?! Like it?

We do, actually that is one thing that has been asked for ages and finally they build it into the system. In this article we build a facebook like button with Vanilla Javascript, CSS3, PHP and MySQL, plus you can use it multiple times on the same page thanks to Javascript functions, fully optimised and mobile ready of course.

As always you can download the tutorial with all files here or checkout the demo in your browser.

Download Demo (scroll down)

The download contains all necessary files, including the database tables, stylesheet, javascript, php config files and a html index file for the demo.

The folder structure when you download the like plugin. Note: do not just upload it to your web root for testing you might overwrite the index.html file. Rather create a sub folder and upload it into there.

First you should insert the database tables into your current database, you can use database prefixes if you like, but the tables have been named to not bring you any conflicts. The tables can be found in the install directory. Open the file db_innodb.sql or db_myisam.sql and copy the content. Go to your PHPMyAdmin or any similar tool paste the sql into the textarea and install the tables or you can click import and choose one of the files mentioned before. The install directory should not be on your server when using the like box.

We won't go into each file but we will go into the config/db.php file where your database connection information has to go:

// Database connection and setup
define('DB_HOST', 'localhost'); // Database host ## Datenbank Server
define('DB_PORT', 3306); // Enter the database port for your mysql server
define('DB_USER', ''); // Database user ## Datenbank Benutzername
define('DB_PASS', ''); // Database password ## Datenbank Passwort
define('DB_NAME', ''); // Database name ## Datenbank Name
define('DB_PREFIX', ''); // Database prefix use (a-z) and (_)

It should be clear which information to put in.

To display the like button on your page you have to use following code snippet.

<div class="jak-like" id="likebutton1" data-userid="1" data-username="jerome" data-email="my@email.com">
 <div class="jak-like-results"></div>
 <div class="jak-like-btn animated">
 <span class="icon1"><a href="javascript:void(0)" onclick="updateCounter(1,1);"><img src="img/like_btn.png" alt="like-button" /></a></span>
 <span class="icon2"><a href="javascript:void(0)" onclick="updateCounter(1,2);"><img src="img/love_btn.png" alt="love-button" /></a></span>
 <span class="icon3"><a href="javascript:void(0)" onclick="updateCounter(1,3);"><img src="img/funny_btn.png" alt="funny-button" /></a></span>
 <span class="icon4"><a href="javascript:void(0)" onclick="updateCounter(1,4);"><img src="img/smile_btn.png" alt="smile-button" /></a></span>
 <span class="icon5"><a href="javascript:void(0)" onclick="updateCounter(1,5);"><img src="img/what_btn.png" alt="what-button" /></a></span>
 <span class="icon6"><a href="javascript:void(0)" onclick="updateCounter(1,6);"><img src="img/cry_btn.png" alt="cry-button" /></a></span>
 <span class="icon7"><a href="javascript:void(0)" onclick="updateCounter(1,7);"><img src="img/angry_btn.png" alt="angry-button" /></a></span>
 </div>
 <p><a href="javascript:void(0)" class="jak-like-link"><img src="img/lb_small.png" alt="like button" /> Like</a></p>
 </div>

Let's go through step by step.

<div class="jak-like" id="likebutton1" data-userid="1" data-username="jerome" data-email="my@email.com">

Important here is the id of the like box "likebutton1", let's say your article has ID 5 it should be "likebutton5". Of course you can do that dynamically with PHP, for example:

<div class="jak-like" id="likebutton<?php echo $my_article_id;?>" data-userid="1" data-username="jerome" data-email="my@email.ch">

The data fields are not mandatory, however you can use them if you like to store userid, username and email address of the voter.

Also important is the updateCounter function:

onclick="updateCounter(1,1);"

The first number is again your article id, the second one is the button id. Again that can be made dynamically with PHP:

onclick="updateCounter(<?php echo $my_article_id;?>,1);"
onclick="updateCounter(<?php echo $my_article_id;?>,2);"

and so on...

Finally you need to include the Stylesheet between the head tags:

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

Plus the Vanilla Javascript file which does not depend on any libraries like jQuery.

<script src="js/script.js"></script>

The final example can be found in the index.html file.

Like to try? Click on the Like button below and see it in action. Need a new Website? Try our content management system with the build in like button. You can also download the complete script with all the files with the button above. You need to sign up, it will only take a couple of seconds and you will have access to a lot of goodies and we won't send you emails or share your details.

Please leave a comment or share your thoughts.