Learn More

Wednesday, September 14, 2011

How To Make Like Button Of Facebook Correctly

In this tutorial we will discuss fully how to install the button like from facebook. Said to be complete because it is equipped with the admin page and insights page. With like button, can increase the frequency of the pageview. But if we can not monitor them for what? Because it's admin page and page insight into necessity.

Ok, first step sign in into your facebook account. Then, access the page https://developers.facebook.com/apps. Currently you only have Unnamed App, and you must register your own website, so click the Create New App. Give the name of your application, then follow the activation steps of new applications belong to you. For example, in this tutorial we give an application name as "Example". So you'll have the application page of Example

app facebook page

The next step is to fill in the question of Basic Information. If you use a free domain from blogspot, then fill in the app domain with blogspot.com. Whereas when using a free domain from wordpress, then fill it with wordpress.com. The same is also true for another provider. And after that, it also list your own website address. Then save. The most important thing to note is that the app ID. Because the app ID we will use for the entire social plugin on our site.

The next step is to go to the registration page application like button (https://developers.facebook.com/docs/reference/plugins/like/). Fill out the url of your site, set in accordance with your wishes. After that, click the Get Code button. We suggest you for use the script XFBML. It should be noted, check whether the app ID same with the app ID that you created earlier. If not then when plugin into your site, then the app ID should be replaced with the app ID that you created earlier.  Then copy the following code in your site among <body> with </ body>, or you can also put it in HTML / JavaScript gadget (on blogspot)


then replace <html with <html xmlns: fb = "https://www.facebook.com/2008/fbml" xmlns:og='http://ogp.me/ns#' , then save.

It should be noted, check whether the app ID together with the app ID that you created earlier. If not then when the plugin into your site, then the app should be replaced with the ID that you created earlier.

Need we tell you, it is possible to use it at that. But this result was not optimal. You need to monitor them. Because it put the following code after <head>


for the content of the og: type, you can just fill it with blog, website, or article. To see more details about og: type please visit https://developers.facebook.com/docs/opengraph/. One more thing you have to fill is the facebook ID, look at the url's your facebook profile.

It ss a good move for you to always see the condition of your own markup. Is it in accordance with facebook or not. Therefore please visit https://developers.facebook.com/tools/debug, fill in the url address of your site, then you will see reports markup. Now, list your site in the insights page. Click the green button from Insights for your Website

get insights page

please fill out the registration form correctly, then after that you'll see insight page for your site.

threelas insights page

On the other hand, on your site, you will see your like button as follow

example of like button from putri site

If you are admin of your application, then you will see on your like button Admin Page link and Insight link Oh yes ... now you have it done.

  1. I already create like this on my blog tutorial photoshop facebook page :)

    ReplyDelete
  2. Ya I know, but actually, after this I want to make facebook comment in blogger. So I think it is very nice if I start with this tutorial. If you have put it in your blog, then what you can get from this tutorial are monitor your app with Page Admin and Insights pag, also how to set meta and <html correctly.

    ReplyDelete