The Facebook "comment" and "Like"button are attached to Web pages.

Facebook "comment" and "Like"button are attached to all my web pages, Since the error of W3C Markup Validation Service was made the minimum, I will introduce it.

The installation method of Facebook "comment" and the "Like" button

Facebook comment and "Like" button can be attached not only to the page of Facebook but to an ordinary web page (homepage). Since this was effective for information dissemination of a web page, or an access increase, it was instantly attached to the web page.

Facebook "comment" and "Like" information are displayed on newsfeed (app_id).

In order to display a comment etc. on the newsfeed of Facebook, the Facebook account information of the owner of a web site, etc. are required. ID information (app_id) on a website is acquired using this account information.

This is carrying out string attachment of the Facebook account information (admins) and the ID information (app_id) on a website.

app_id is acquired.

First, Facebook application creation of developer's siteis accessed. A site name and URL are inputted on this screen. If a security check ends, the completion screen of creation of application ID of "Create an App" will be displayed. A note of this application ID (app_id) is made.

How to avoid W3C error of the comment of Facebook, etc. if possible

If the Facebook comment and "Like" button code are acquired by an ordinary method on the Facebook plug-in creation, The tag portions of "fb:like" or "fb:comments" become an error with the check of W3C Markup Validation Service XHTML1.0.

In order to avoid this error, it replaces by Javascript. The example code of the comment and "Like" button was as follows. The script is using PHP in part.jquery is also used.

<meta property="og:image" content="http://hogehoge.jp/image.jpg" />
<meta property="fb:app_id" content="123456789012345" />
<meta property="fb:admins" content="123451234567890" />
<?php $rq_uri = preg_replace('/\?.*/', '', $_SERVER['REQUEST_URI']); ?>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>
<script type="text/javascript"><!--
jQuery(document).ready(function($){
  var fbtag = document.createElement('fb:like');
    fbtag.setAttribute("href","<?php echo "http://".$_SERVER['SERVER_NAME'].$rq_uri; ?>");
    fbtag.setAttribute("width", "650");
    document.getElementById("facebook-like").appendChild(fbtag);
  var fbtag = document.createElement('fb:comments');
    fbtag.setAttribute("href","<?php echo "http://".$_SERVER['SERVER_NAME'].$rq_uri; ?>");
    fbtag.setAttribute("width", "650");
    document.getElementById("facebook-comments").appendChild(fbtag);
});
--></script>

Although it becomes W3C error by the above-mentioned meta-tag, probably, this meta-tag will be required at the lowest. Please add, if other meta-tags are required. The "fb:admins" information is not indispensable.

By Wordpress, URL portion Permalink is used "<?php the_permalink(); ?>", the same code can be used with all the reports. The above-mentioned code is installed in a head tag.

The following code is installed in the setting position of a comment and "Like" button. in a body tag.

<script type="text/javascript" src="http://connect.facebook.net/ja_JP/all.js#xfbml=1"></script>
<div id="facebook-like"></div>
<div id="facebook-comments"></div>

The place of "ja_JP" is made into "en_US" when using an English display.

OGP is specified with a html tag.

OGP (Open Graph Protocol) is specified with a html tag. The next description is added to a html tag. (xmlns:og="http://ogp.me/ns#" xmlns:fb="http://ogp.me/ns/fb#")

In XHTML it is as follows .

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://ogp.me/ns/fb#" xml:lang="ja" lang="ja">

The check of whether to be set up well

Let's check whether it is well set up using the debugger which Facebook is preparing. How to use a debugger enters URL in form, and clicks "debugging."

The comment and the "Like" button were able to be well displayed on the newsfeed of Facebook by this method. Moreover, with the check of W3C Markup Validation Service, an error was able to be made the minimum and was able to be displayed.