Attaches Facebook "Like" to the Web page (W3C error is avoided)
The "Like" button was attached to the Web page. However, it will be an error with the check of W3C Markup Validation Service. Since this is avoided, I introduce it.
The installation method of Facebook "Like" button
A "Like" button can be attached not only to the page of Facebook but to an ordinary web page. I thought that information dissemination of a web page and an access increase had an effect. I attached to the web page instantly. A way is easy if it is made to only merely display.
A code can be created from the Generation page of Facebook "Like" button. Please create the iframe version.
The following tags are stuck on a position to display a "Like" button in a body tag.
<iframe src="//www.facebook.com/plugins/like.php?href=http//example.jp/&send=false&layout=standard&width=450&show_faces=true&action=like&colorscheme=light&font&height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:80px;" allowTransparency="true"></iframe>
In case of this method, even if it clicks "Like", it is not displayed on the page of the newsfeed of Facebook only by being displayed on that page and the wall page of the person who clicked. It is because it does not have any information on the Facebook account of those other than the information on that page, or others in this tag.
How to display "Like" information on newsfeed (app_id is acquired)
In order to make it display on newsfeed, 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 and the ID information (app_id) on a website.
After acquiring app_id, the code of a "Like" button is created.
The application creation screenof 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 just to make sure.
It returns to the installation method of an again "Like"-button, and creates
a "Like" button. If URL of the web page to install is inputted at this time, the
code containing following application ID (app_id) will be generated.
This is only stuck on the position which a web page wants to display with a
copy.
<iframe src="//www.facebook.com/plugins/like.php?app_id=123456789012345&href=http//example.jp/&send=false&layout=standard&width=450&show_faces=true&action=like&colorscheme=light&font&height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:80px;" allowTransparency="true"></iframe>
A URL portion is generated by the PHP command. (only in case of site which can use PHP)
In a Wordpress, if a URL portion is made into a permalink, all the pages can use the same code, but in an ordinary web page, you have to change URL separately.
If it is a site which can use PHP, and a URL portion is made a general-purpose display by the PHP command, the same code can be used like a permalink. A URL portion is performed as follows.
<?php echo "http://".$_SERVER['SERVER_NAME'].$_SERVER['REQUEST_URI']; ?>
The "$_SERVER['SERVER_NAME']" portion expresses domains (www.example.jp etc.). "$_SERVER['REQUEST_URI']" portions are the URL sections (/***/example.php etc.).
How to avoid W3C error of Facebook "Like" button.
In the above-mentioned method, it becomes an error with the check of XHTML1.0 W3C Markup Validation Service by the portion of allowTransparency="true".
The portion of allowTransparency="true" is deleted in order to avoid this error. This portion is a setup of whether to make it penetrate by the object for IE. If this is deleted, in IE, a background will become white.
Finally, the code (tag) of the "Like" button was as follows.
<iframe src="http://www.facebook.com/plugins/like.php?app_id=123456789012345&href=<?php echo "http://".$_SERVER['SERVER_NAME'].$_SERVER['REQUEST_URI']; ?>&send=false&layout=standard&width=450&show_faces=true&action=like&colorscheme=light&font&height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:80px;" title="Like button">Like button</iframe>
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 click "debugging." Although light warning comes out, it should not have a problem. Because, it is since formal OGP (Open Graph Protocol) is not set up.
"Like" information was able to be well displayed on the newsfeed of Facebook by this method. Moreover, it was able to be made to display errorless with the check of W3C Markup Validation Service.