Html code for adding comments by users. Comments in HTML, CSS, PHP. Removing third-party markup
Now it has become fashionable to replace the usual WordPress commenting system with comments from one of the most popular social facebook networks... We have already published earlier, but a lot of time has passed since then, and now this procedure has been noticeably simplified thanks to the ready-made WordPress plugin... So this time it will be much easier.
We will tell you a little later how to embed Facebook comments on your site, but first we will try to determine all the pros and cons of such a replacement.
Facebook Comments: Pros and Cons
In addition, the factor of the so-called anonymity... It is unlikely that spam comments will be added from Facebook, since they are all tied to real user accounts.
But at the same time, you can find the disadvantages of such a system. Many users prefer anonymity and not at all because they want to write something bad or leave spam. No. The point is solely in the psychological moment and in the feeling of discomfort and embarrassment that they experience when speaking out in public. This factor can reduce user activity.
Unlike other commenting systems such as Disqus, Facebook comments are not synced with native WordPress comments. They completely replace them. If old records already have wordPress commentsthen they will be displayed before or after new comments added via the Facebook form.
These are probably all the pros and cons of Facebook comments.
If you haven't changed your mind about installing them on your WordPress site yet, read below how to do it.
Facebook Comments Plugin for WordPress
First, install and activate the plugin Facebook Comments and configure it in the menu that appears under Settings → Facebook Comments.
To start using comments on your site, you first need to create a Facebook application.
If you have previously created an application, you can use its ID data right now. Otherwise you will have to create a new one on the page Facebook Apps:
The control panel of the newly created application will display its ID, which must be copied and pasted into the plugin settings. But before that, configure the application on your site in the "Settings" using the "Add Platform" button.
A new window will appear in which you need to click on web site and choose it as your platform.
This will show on the application settings page new section "Website" where you can enter the address of your site.
Save changes, copy the application ID and place it in the plugin settings of your site.
If you haven't figured out how to set up the Facebook app, here's another one short instruction in English with an example for our site:
This Facebook comment plugin has a lot of options for customization. Standard settings should work with most sites. However, you can change them at your own discretion and save the changes.
Now you can test if it works correctly new system comments on your site.
Moderation of comments
Since you have admin rights, you will be notified of new comments. You can manage them and decide whether to publish them or not.
You can also add a new moderator in the settings:
Hopefully this tutorial has clarified and helped you set up Facebook comments yourself for your non-WordPres site.
Nowadays, many popular sites are not only a source of information, but also a place where this information can be discussed with other users, sites often turn into centers around which a community is formed.
Comments help build a community
Now users come to you not just to read some news or article, but also to discuss it.
What is characteristic - the reader could find out the news itself in another place, but it is the community of interesting people, the opportunity to speak out and hear their opinions - that is what will lead to the fact that he visits your site and goes to the page with the news that he already knows.
Even ten years ago, forums were the centers around which all life was in full swing. However, in our time it is no longer so convenient and popular, now most popular sites work in the blog format, and users communicate in the comments.
Thus, it is comments that are the factor that distinguishes ordinary sites from sites that are truly successful in their field. This applies to news sites, blogs, communities of interest, sometimes even online stores and various specialized sites.
Comments are feedback and motivation
It is also important to remember that comments are a source of feedback from readers, which allows them to find out exactly what they like and what readers are reacting to. And the better and more interesting your site is for visitors, the more often they come back to you and recommend it.
Also feedback - this is always a good motivation for the authors and administrators themselves, which almost instantly makes them feel that people are interested in what you are doing and your site. You cannot achieve this with a simple visitor counter.
What do we need from a commenting system?
So what should be the “correct” comments on a modern website?
- Simple and straightforward for readers.
- Convenient and functional for administrators.
What options does the webmaster have at the moment?
Social media widgets
Plus, only one - it is quite likely that the user is already logged into the social network and therefore does not have to register.
Many cons
Russian-language services
Russian-speaking counterparts are often completely paid and cannot boast of an attractive design.
SV Kament
The only exception here is the SV Kament system (svkament.ru), which is completely free and brings together the functionality of various Western commenting systems, but at the same time is focused on the Russian-speaking segment.
Let's take a quick look at what we would like to see in our commenting system.
Tree comments with the ability to collapse individual discussion threads. It helps to navigate the discussion when there are a lot of comments.
Social login - greatly simplifies registration and, as a result, increases the number of comments. Western research shows that using a social login can sometimes increase conversions by over 60%.
Rating comments- firstly, it helps to highlight the most interesting and worthwhile comments, which is extremely convenient for readers, and secondly, it encourages users to write interesting messages.
Real time work - the more convenient and faster the system works, the more people use it and write comments more often.
Email notifications- how often do we lose potential comments just because the user does not know that someone replied to his previous post.
From a management perspective
- Management directly on the site.
- Information about users.
- A single control panel for comments for the entire site.
- Ability to appoint moderators.
- Easy to install.
There are also a number of interesting possibilities for the SV Kament system.
- Social broadcasting- allow you to "return" communication to your site from social networks... If you have a group on Vkontakte in which you post announcements of new articles on the site, then often part of the discussion of the articles remains in the comments on the post itself, and it would be great to broadcast these comments back to your site.
- Rating and status of users- allows you to highlight the most active and popular visitors, thus encouraging your users to visit more often, communicate more and write interesting messages to other people.
All at once?
There is a fairly common practice to place several commenting systems at once, for example, a separate VKontakte widget, a separate Facebook, and a separate one for everyone else.
In my opinion, this is one of worst decisions, however, it is important to understand exactly what goals are being pursued.
If you just need to collect user reviews, then this method has the right to life, although a simple guestbook or even an email address may be enough for this.
If our goal is to create a community and stimulate user communication, then this approach is extremely harmful, because by sharing comments, we share the communication itself, so instead of a single dialogue, we get a bunch of unrelated messages.
What comments do you use? Do you think comments are important for your site, and how convenient and effective do you find comments on your site?
In this lesson, I will talk about how comments in HTML, CSS, PHP... Comments are text that is not visible on the web page. They are used for all sorts of explanations, reminders, descriptions for webmasters, which allows you to structure the document. Comments are indispensable when debugging code, allow you to quickly navigate the markup of a web page and find the block you need. Comments are often used to debug HTML code. For example, you can temporarily comment out a specific block of code so that it does not run, and if necessary, it can be easily restored.
HTML comments
In HTML, comments are formed using symbols:... Thus, any text between these symbols is a comment. Let's consider an example:
Example HTML Comments
CSS comments
CSS comments are created using the symbols: / * and * /. To create a comment, you just need to place the web page code between these symbols:
/ * Beginning of a block with styles for Body * / body (background: #efeded; font-family: Verdana, Helvetica, sans-serif; font-size: 12px; margin: 0px; padding: 0px;) / * End of a block with styles for Body * /
PHP Comments
PHP comments can be single-line or multi-line:
1) Single line comments in PHP are created using the symbols: //. You just need to put this symbol in front of the line and it will be commented out. This option is used when the comment consists of only one line.
2) To implement multi-line comments, symbols are used: / * and * /. This option is useful if the comment spans multiple lines.
Thus, we have learned to do
Hello friends and blog guests! Today I'll tell you using PHP and MySQL. And also we will talk about commenting systems for the site and choose the best one for your site from those offered by me.
First question: through PHP and MySQL?
To do this, you and I need to first create a table in the database of your site, which will be called - comments ... This created table will store comments in fields with the following designations:
id Is a unique identifier.
page_id - this field will store the identifier of the site page on which this comment is located.
name Is the name of the commentator who left the comment.
text_comment - respectively, this is the text of the current comment.
The next step, after creating a table for comments in the database, we need to inject special code for our future comments on the site. This code on the site will allow our commenters to add their comments to our articles. Here's the code:
it simple HTML comment form for the site. You place it on your site in the place where it is convenient for leaving a comment on the post - of course, under the post itself.
query ("INSERT INTO` comments` (`name`,` page_id`, `text_comment`) VALUES (" $ name "," $ page_id "," $ text_comment ")"); // Add a comment to the table header (" Location: ". $ _ SERVER [" HTTP_REFERER "]); // Do we redirect back?\u003e
The last step in creating a comment form for a PHP and MySQL site is to display our comments on the site page. Here's the code for that:
query ("SELECT * FROM` comments` WHERE `page_id` \u003d" $ page_id ""); // Fetch all comments for this page while ($ row \u003d $ result_set-\u003e fetch_assoc ()) (print_r ($ row); // Output comments echo "
";
}
?>
That's all! Our simple site comment form is created and can be run on the site.
But this is certainly not for a beginner who will not dig with all this HTML, PHP and MySQL codes. Nor will he learn how to create a database. He needs everything at once, quickly and without headaches. I'm right? Of course right!
Then let's move on to the next section of my material and find out everything about ready-made commenting systems for the site and choose the most convenient, functional and acceptable for your site ...
Systems of comments for the site. Which one to choose?
How to make comments on the site - this is an important question because comments on the site play an important role not only for communication between the site owner and the visitor, but also comments are important for sEO promotion and promotion.
With the help of comments on the site, the position of the site in the search results is increased, behavioral factors, traffic to the site grows, and as a result, your earnings increase. You see how important comments are for the site!
So let's consider how to make comments on the site and what commenting system choose the best option?
In general, comments on sites are displayed in many ways. These are special plugins for wordpress engines and all kinds of comments from social networks, such as for example In contact with, Facebook, Disqus... There are also independent services that offer their own commenting systems for the site, for example.
Now I will give you one plate that will immediately put everything in its place and there will be no questions about the choice of a comment system for the site:
Everything here is clear and clearly visible which comment system is the best and several presented, which are most often used by webmasters on their resources. I think that explanations here are superfluous and the choice is only yours!
This time we are doing a simple AJAX system for adding comments. This will demonstrate how to achieve efficient interoperability between JQuery and PHP / MySQL using JSON. The system works in such a way that added comments are placed on the page without completely reloading it, giving the feeling that the site is working only on the user's computer, thereby avoiding the need to wait for some time required to reload the page with the added comment.
Here's a rough demo of what we plan to implement:
Step 1 - XHTML
First, let's take a look at the comment markup. This code is generated by PHP in a comment, which we are going to look at in an instant.
Demo.php
The div of the avatar class contains a hyperlink corresponding to the avatar (if the user specified a valid avatar link when posting a comment), let's say from gravatar.com. Well, we'll come back to this when we work with PHP. Finally, we have the name and time also in the DIVs, as well as the comment, that is, the text itself in the paragraph.
Another important element in the XHTML part is the comment form itself (all fields except the URL field are required).
Demo.php
Add a comment
Step 2 - PHP
PHP handles connections to the MySQL database and creates comment markup. In addition, there is AJAX at the end of the receive and inserts the comment into the comment table. You can see the code that displays comments on the page below.
Demo.php / * / Select all comments and fill in the $ comments array * / $ comments \u003d array (); $ result \u003d mysql_query ("SELECT * FROM comments ORDER BY id ASC"); while ($ row \u003d mysql_fetch_assoc ($ result)) ($ comments \u003d new Comment ($ row);)
The MySQL query fetches all records from the database and populates the $ comments array with the comment class object you see below. This array is output after script execution.
Demo.php / * / Display comments one by one * / foreach ($ comments as $ c) (echo $ c-\u003e markup ();)
Each comment has a markup () method that generates HTML code to print the page. You can see this from the method and class below.
The class takes a string from the database (fetched with mysql_fetch_assoc ()) and stores it in the $ data variable. It is available only for methods of this class and cannot be accessed from the outside.
Comment.class.php - Step 1 class Comment (private $ data \u003d array (); public function __construct ($ row) (/ * / Constructor * / $ this-\u003e data \u003d $ row;) public function markup () (/ * / This method outputs the XHTML markup comment * / // Create an alias so we don't have to // $ this-\u003e data data every time: $ d \u003d & $ this-\u003e data; $ link_open \u003d ""; $ link_close \u003d ""; if ($ d ["url"]) (// If a person filled in the URL when // adding a comment // Define a hyperlink $ link_open \u003d ""; $ link_close \u003d "";) // Time transformation $ d [ "dt"] \u003d strtotime ($ d ["dt"]); // Required for default Gravatar images: $ url \u003d "http: //" .dirname ($ _ SERVER ["SERVER_NAME"]. $ _SERVER ["REQUEST_URI "])." / img / default_avatar.gif "; return"
". $ link_close."". $ d [" body "]."
This script uses Gravatar to show avatars in comments. For those who haven't used Gravatar, this is a very useful service that allows you to associate an avatar with your email address. The avatar can be easily taken by passing the hash over md5 ().
Notice on line 39 above it - the script tries to figure out the URL it is on and determines the exact default_avatar.gif address of the image. This GIF is transmitted to Gravatar by md5 hash, so if the avatar was found on this email address, a spare stock image is displayed instead.
Comment.class.php - Step 2 public static function validate (& $ arr) (/ * / This method is used to validate data / passed through AJAX. / / This returns true / false based on / on the data is valid and filled in / Array $ arr is passed as paremter / (note the ampersand above) / Either the data input or error messages are valid. * / $ errors \u003d array (); $ data \u003d array (); // Using the filter_input function introduced in PHP 5.2.0 if (! ($ Data ["email"] \u003d filter_input (INPUT_POST, "email", FILTER_VALIDATE_EMAIL))) ($ errors ["email"] \u003d "Please enter a valid Email. ";) if (! ($ data [" url "] \u003d filter_input (INPUT_POST," url ", FILTER_VALIDATE_URL))) (// If the URL field does not match the wrong URL $ url \u003d" ";) // Using filters with custom // callback function: if (! ($ data ["body"] \u003d filter_input (INPUT_POST, "body", FILTER_CALLBACK, array ("options" \u003d\u003e "Comment :: validate_text")))) ($ error s ["body"] \u003d "Comments error."; ) if (! ($ data ["name"] \u003d filter_input (INPUT_POST, "name", FILTER_CALLBACK, array ("options" \u003d\u003e "Comment :: validate_text")))) ($ errors ["name"] \u003d " Name error. ";) If (! Empty ($ errors)) (// If there are errors, write $ errors to the $ arr array: $ arr \u003d $ errors; return false;) foreach ($ data as $ k \u003d\u003e $ v) ($ arr [$ k] \u003d mysql_real_escape_string ($ v);) // Make sure the letters are in lowercase // (for the correct Gravatar hash): $ arr ["email"] \u003d strtolower (trim ($ arr [ "email"])); return true; )
validate () is defined as static in the manner described above. This means that it can be called directly as Comment :: validate (), without having to create an object of that class. This method is not input validation, which is submitted via AJAX.
This method uses the new filter functions that are available in PHP 5.2.0. This allows us to easily validate and filter any input that is passed to the script. For example filter_input (INPUT_POST, "URL", FILTER_VALIDATE_URL) means that we are checking $ _POST ["url"] is a valid URL. If so, then the function returns the value of the variable, otherwise the returns are false.
This is very useful since until now, we had to use our own regular expressions to validate the data. In addition, another advantage is that this data is taken over any configuration of specific transformations (like magic quotes).
We also have the option to specify a custom function that is going to apply some more advanced data modifications, as seen in lines 31 and 37.
Comment.class.php - Step 3 private static function validate_text ($ str) (/ * / This method is used internally as FILTER_CALLBACK * / if (mb_strlen ($ str, "utf8"), ", etc. ..) and convert // Symbols new line at
tags: $ str \u003d nl2br (htmlspecialchars ($ str)); // Remove any newline characters that are left $ str \u003d str_replace (array (chr (10), chr (13)), "", $ str); return $ str; )
The last method is validate_text, which we pass as the callback function. It shields all special hTML characters, effectively depriving them of XSS attacks. It also replaces character strings with
lines.
Submit.php / * / This array will be filled with either / The data that was sent to the script or / Error messages: / * / $ arr \u003d array (); $ validates \u003d Comment :: validate ($ arr); if ($ validates) (/ * Everything is fine, insert it into the database: * / mysql_query ("INSERT INTO comments (name, url, email, body) VALUES (" ". $ arr [" name "]." "," ". $ arr [" url "]." "," ". $ arr [" email "]." "," ". $ arr [" body "]." ")"); $ arr ["dt" ] \u003d date ("r", time ()); $ arr ["id"] \u003d mysql_insert_id (); / * / Data in $ arr insert query, / but unescaped text, / so we use stripslashes / for all array elements: / * / $ arr \u003d array_map ("stripslashes", $ arr); $ insertedComment \u003d new Comment ($ arr); / * Output markup * / echo json_encode (array ("status" \u003d\u003e 1, "html" \u003d\u003e $ insertedComment-\u003e markup ()));) else (/ * Print error messages * / echo "(" status ": 0," errors ":". json_encode ($ arr). ")";)
submit.php gets the comment data as an AJAX request. It validates it and outputs a JSON object of either XHTML markup that is successfully output, or a list of error messages. JQuery uses property status to determine whether to display error messages or add a page markup comment.
You can see two examples below.
Comment