How to attach Facebook comment and "Like" button to WordPress

Since I attached without using plug-in for a Wordpress (blog) for Facebook Comment and "Like" button, I introduce it.

Facebook comment, and "Like" button installation method

Facebook comment and "Like" button can be attached not only to the page of Facebook but to an ordinary web page (homepage).

Since WordPress was a blog which can be installed by yourself, it had "Comment" from the first, but since the comment was also attached by the time and effort which attaches Facebook "Like" button, both were attached.

Although it was made to usually indicate that it is a comment and it is "Like" using plug-in, since I do not want to use plug-in, the script was described to the PHP file of the theme.

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

If there is no app_id or admins information, it cannot display "Like" etc. on newsfeed. It is a very important thing whether it is made to display on newsfeed.

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.

How to acquire app_id

First, the Facebook application creation of developer's site of Facebook is 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.

W3C error of Facebook comment, etc. is avoided if possible, and is created.

If Facebook comment and a "Like" code are acquired by an ordinary method on the Facebook plug-in creation of Facebook, 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, these tags are transposed to other tags (div etc.) by Javascript.The example of a code in the WordPress of a 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" />

<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 the_permalink(); ?>");
    fbtag.setAttribute("width", "650");
    document.getElementById("facebook-like").appendChild(fbtag);
  var fbtag = document.createElement('fb:comments');
    fbtag.setAttribute("href","<?php the_permalink(); ?>");
    fbtag.setAttribute("width", "650");
    document.getElementById("facebook-comments").appendChild(fbtag);
});
--></script>

Although it becomes W3C error in the place of the above-mentioned meta-tag, probably, the meta-tag of a picture and application ID at least will be required. Please add, if other meta-tags are required. There may not be any fb:admins information.

The URL portion is made into the permalink "<?php the_permalink();?>" in the WordPress.Then, the same code can be used with all the reports.The above-mentioned code is installed in a head tag.classic of the theme of a WordPress describes in header.php.

The following code is installed in the setting position of a comment and "Like" button. in a body tag classic of the theme of a WordPress describes in index.php. It is the neighborhood just after displaying a report.

<?php $fb_count++; ?>
<?php if ($fb_count==1) {
print <<<EOD
<div class="np">
<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>
</div>
EOD;
} ?>

When an editorial well was displayed in great numbers in a page, it was made to be displayed only after the first report, since id in the div tag used for a comment and a "Like" display part was used only once within the page. At least one independent page of a report is satisfactory.

class="np" is a thing for making it not display by printing. Moreover, the place of "ja_JP" is made into "en_US" when making it an English display "Like" and Comment.

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."

It was able to make it display it on the newsfeed of Facebook as a comment well by this method "it is good."Moreover, with the check of W3C Markup Validation Service, an error was able to be made the minimum and was able to be displayed.