Learn More

Tuesday, October 4, 2011

Integrating Blog With Facebook

facebook homepage
One of the key in blogging is to combine your blog with social networking. Make them feel comfortable interacting with your blog. Of course, this becomes something that needs to be taken into account. Therefore, as we have explained before, this time we will discuss how to incorporate bloggers with facebook. We will discuss it with other social networks, if possible.

At first, you must make an application on facebook. From that application, you will get app_id, for other step on application, we will discuss next. After that, you must put meta opengraph in blogger. Please note that the type of your site is a blog, but when you open a post then the type of your site is the article. So we should be able to include it all. Here is a meta applied to your blog.

Actually, there are many meta tags that should be involved, you can get further information on http://ogp.me/. However, Facebook only requires that title, image, url, site_name, description, admins, APP_ID, type. Interestingly, when you re-read the meta tags code above, you see that there is no meta-image to a post. There are reasons why we do this, first, facebook will crawl by itself to get an image. Second, you might have thought to involve data: post.thumbnailUrl, but it can not be if in the <head> tags. Actually we have discussed this section before, but we have not explained the strategy meta tags for each post. So read more, especially about <html> tag. Because you must include xmlns:fb="https://www.facebook.com/2008/fbml and xmlns:og='http://ogp.me/ns#'.

Once you are successful, the next step is to put plugins social. You do not have to put the whole thing. All depends on you, but the most commonly used are like button, send button, comment, recommendation. Whatever you plug it in, then you are advised (required) to place one of the facebook javascript. Read our tutorial about like button and the comment box. Each provided the javascript code, but we must to put one javascript. When you put all, then your site becomes slow and probably one of the social plugins do not work. See the example below.

There is one interesting thing, and maybe this is one of the weaknesses of social plugins belong to facebook. Social plugins besides login button, can not logout (login) redirect. For example, suppose on a site there are two social plugins, like buttons and the comments box. Then, you try to comment via the comments box. So you must sign in, after sign in, the comments box is active, but not for like button. To activate it then you should click the button like (in this case you do not need to sign in). If only, like buttons or the comments box has a login (logout) redirect, then the above events will not occur. But, if you have ability in javascript code, then you can change it, so that you make login (logout) redirect from comments box, you can go from a.migrated and _refreshOnAuthChange. We are so sorry for the code to make it logout (login) redirect, because facebook has been register it to apache. We must appreciate it.

If you still need to add login button (with automatic logout), may be this code will help you (see our live demo below).

In our demo you will see a login button or logout button, depend on your status in facebook.com, when you login then you will be taken to the homepage, and also vice versa.

Facebook API
This very hard for blogger, but this very help for you if using web hosting. You can record or else of your user account when your user login to your site. So, when you using facebook login system for your site, so the login button and API are the biggest weapon for you. Practise with the code below and see our demo below

When you login from login button above, you will see your name and your picture. Let's try to login.

Facebook UI
May be, you can give request of your application to friends of your user in facebook. You can do this by give the code below (see our demo below).

When you click the button, you will see popup window application request from facebook. For example, you can choose all your friends for this tutorial. (not available again). From this tutorial, we hope you now what is your next step to integrate blog with facebook.

Post a Comment