HOWTO: Guestbook/comment-system in AJAX e PHP with a little bit of… Twitter
**ENGLISH VERSION CLICK HERE**
A few months ago I finally updated My Guestbook (See it in action), which was almost ten years old (2003!).
It was in HTML, you could not change anything but the font color, and it had a rather “old-fashioned style”.
What better idea than creating a new version, using the latest technologies?
Inspired by two great guides (Tutorialzine and 9Lessons), and adding new features, I created a new Guestbook that is gorgeous to see, thanks to shadings and rounded corners via CSS, and it allows to show a limited number of comments per time (9, in my case), so that the page won't be too heavy to load.
To load other results (in this case, the older signatures in the Guestbook), you can click on a button which is similar to the one that allows you to update your Twitter timeline, and the older results appear dynamically in the page, with a very pleasant pop-up effect.
Here are the features:
– Support Gravatar avatars (as long as you enter a valid email address)
– and’ is possible to automatically fill in the form (name, website, Email, location) by logging in via Facebook
– CAPTCHA anti-spam system, which consists of a random number code to be entered in the text box
– location (city and country) of the user, together with a flag of the country of origin added next to each comment
– List of 3 countries from which you have received more signatures / comments
– Validation of fields (to check that the email address or website supplied are valid)
– When a new comment is added, the owner of Guestbook will receive an automatic e-mail, with the name and the user's message. The latter, will receive a thankful email, too
– Each email you receive after each comment, will contain a link to cancel, with just one click, any comments containing spam (Update 26-8-2014)
– The total number of signatures / comments will be shown in the main page of the Guestbook
– 100% W3C validation 100%
Let's see the main page of the guestbook:
<?php // **THIS NOTE MUST STAY INTACT FOR LEGAL USE** // Work by flapane.com (last update 26/aug/2014) // More details at https://www.flapane.com/blog/2012/09/howto-guestbookcomment-system-in-ajax-e-php-con-un-pizzico-di-twitter/ // AJAX commenting system/guestbook with a Twitter-like timeline which allows to show just a few comments per time. Captcha code for anti spam purposes included. All credits for the original code go to http://tutorialzine.com/2010/06/simple-ajax-commenting-system/ and http://www.9lessons.info/2009/12/twitter-style-load-more-results-with.html // I mixed up both ideas, fixed some glitches, and added a Facebook widget, icons with the flag of the countries, automatic location system, captcha code, text validation, possibility to delete SPAM with a click, automated email system for guestbook owner and user who signed it. // You need to create a Deveoper Account on Facebook, and a Developer Account on ipinfodb.com for the API keys // Also, don't forget to setup your parameters on connect.php, and your email and website address at the top of submit.php for automated emails // copypaste.js fools spambots by disabling copy/paste function for the confirmation code textfield, so that you MUST manually digit the confirmation code session_start(); //facebook login ob_start(); //started buffering - avoid facebook "headers alredy sent" Error // Error reporting: error_reporting(E_ALL^E_NOTICE); include "inc/connect.php"; include "inc/locate_ip.php"; include "inc/comment.class.php"; $result = mysqli_query($link, "SELECT * FROM gbook_comments ORDER BY dt ASC"); //total number of comments $num_rows = mysqli_num_rows($result); //total number of comments $top_countries = mysqli_query($link, "SELECT country_code,COUNT(*) as count FROM gbook_comments GROUP BY country_code ORDER BY count DESC LIMIT 3"); //top commenters ?> <!DOCTYPE html PUBLIC "-//W3C / / DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns ="http://www.w3.org/1999/xhtml" xml:lang ="in"> <head> <title>AJAX guestbook with Twitter-like timeline</title> <link rel="stylesheet" type="text/css" href="styles.css" /> </head> <body> <div> <div> <h1>AJAX Guestbook! .:. <? echo "$num_rows people signed it"; ?></h1> </div> <div class="box"> <?php echo "<div id='top_countries'><b>Top countries:</b><br />"; //top commenters while ($row = mysqli_fetch_array($top_countries)) { $image = strtolower($row[0]) . ".png"; echo "<img src='/guestbook/inc/img/flags/$image' alt='$image user flag' /> <I>".$row[1]." companies</I><br />"; } echo "</div>"; mysqli_free_result($top_countries); include "inc/loadmore.php"; //Output the comments ?> <div id="addCommentContainer"> <P><b>Sign the Guestbook! / Sign the Guestbook!</b></P> <? include "inc/fb.php"; ?> <br /><br /> <form id="addCommentForm" method="post" action=""> <div> <label for="name">name / Your Name</label> <input type="text" name="name" id="name" value="<? echo $fbname; ?>" /> <label for="Email">Email / Your Email (hidden / won't be shown)</label> <input type="text" name="Email" id="Email" value="<? echo $fbmail; ?>" /> <label for="url">Site / Website (not required)</label> <input type="text" name="url" id="url" value="<? echo $fblink; ?>" /> <label for="Location">Cityà / Your Location</label> <input type="text" name="Location" id="Location" value="<? echo $guest_ip; ?>" /> <input type="hidden" name="country_code" id="country_code" value="<? echo $ guest_ccode; ?>" /> <label for="body">text / Comment Body</label> <textarea name="body" id="body" cols ="20" rows="5"></textarea> <label for="security_code">Enter this code / Enter this code: <b><? echo $random_code; ?></b></label> <input type="text" name="security_code" id="security_code" /> <input name="randomness" type="hidden" id="randomness" value="<?php echo $random_code; ?>" /> <input type="submit" id="submit" value="submit" /> </div> </form> </div> </div> </div> <script type="text/javascript" src="inc/jquery.min.js"></script> <script type="text/javascript" src="inc/script.js"></script> <script type="text/javascript" src="inc/ajax_more.js"></script> <script type="text/javascript" src="inc/copypaste.js"></script> </body> </html>
As indicated in the notes at the beginning of file (.. DO NOT remove them), we must first get an API key on ipinfodb (to enable the automatic recognition of the city and the country of the user), and register on Facebook for Developers, to get the API key and secret key. For details on the operation and configuration of Facebook for Developers, please refer to this old post Blog.
The file guestbook.php shows the entry form (name, city, text, CAPTCHA code, etc. etc.), and calls the secondary files (connect.php to connect to the sql database, locate_ip.php for geolocation, fb.php to login via Facebook, loadmore.php to load previous comments)
You need to create a new SQL database, called gbook_comments, using the command line included in the file table.sql available for Download at the end of this post.
The file connect.php will be changed according to your connection parameters, in other words the address of your sql server, and your username and password.
The file fb.php will be modified, by substituting every occurrence of YOURAPPID and YOURSECRETKEY, with data obtained by registering to Facebook for Developers.
The file locate_ip.php will be modified, by replacing YOURIPINFODBAPIKEY with your API key obtained by registering to ipinfodb.
The file submit.php will be modified on the lines 9, 10, 60, 70, by adding your email address (to be notified to via email, when a new comment is added to the Guestbook), your web address, and custom text to send to users, once they've signed the Guestbook.
The styles.css file contains the css sheet of the Guestbook, and can be changed anytime.
After following these steps, the file guestbook.php should appear just as in the Guestbook in this website, and should be fully functional!
All the material is available for download at THIS LINK.
If you're using a web host like Altervista, which disables the function file_get_contents, use this version of the file locate_ip.php.
Any comments, addition and links that show your working guestbook, are welcomed!