How to Install Facebook Comment Box on Blogger (XFBML / HTML5) - Hallo Dear, djf-xp.blogspot.com, This article that you read this time with the title How to Install Facebook Comment Box on Blogger (XFBML / HTML5), We have prepared this article well for you to read and retrieve the information in it. hopefully the contents of we write can be understood by you. Alright, happy reading.

Title : How to Install Facebook Comment Box on Blogger (XFBML / HTML5)
link : How to Install Facebook Comment Box on Blogger (XFBML / HTML5)

How to Install Facebook Comment Box on Blogger (XFBML / HTML5)

LiveDemo

comment

Keep in mind because there is absolutely no comment box plugin ready to install for Blogger (unlike the Facebook plugin for WordPress which is amazingly developed), then what is needed to install this Facebook-style comment box is to process and hack.

Here are some of the processes:

1. Create and Register an Application on Facebook

2. Installing the Javascript SDK

3. Install Meta OpenGraph

4. Install the FB Comment Box in a Specified Section Below the Post
5. Hiding the Blogger Comment Box

Note: For those who already have an application and have installed the Javascript SDK and MetaOpengraph because they have previously used various FB plugins, skip directly to the step 4. This tutorial will be long, so prepare yourself thoroughly and enjoy the process. hehe

1. Create and Register an Application on Facebook

For certain plugins, we need to have an application that will be used to carry out the validation and authentication process. On Facebook, we use applications to enable that. Here's how to create and register a basic application:

b. Click "Apps" on the top left menu.

c. Click "Create New Apps"

d. Dialog Box will appear for application registration. Fill in the name of the application, for example according to the name of the Blog, as well as the namespace, fill in the name that can be the same, no spaces, all lowercase letters. Select a category. Then click "Continue". Enter captcha.

e. After that you will be taken to the newly created application page. Pay attention in this section, note the Application ID and (if necessary) the App Secret as well. Store in a safe place. We will use it later in the Javascript SDK and Meta OpenGraph.

f. Look underneath, in the "Basic Info" section, fill in the domain in accordance with the blog / web domain that you have. If you still use the blogspot subdomain, fill in the subdomain blogspot.com. If you already use a custom domain, fill in the appropriate domain. Then change the sandbox mode to "disabled". This is to activate the application so that it can be used by all users.

g. Look down again, there is an application integration section with Facebook. Click the "Website with Facebook Login" section and fill in your web / blog url.

h. Make sure all steps are done correctly, then click "Save Changes".

2. Installing the Javascript SDK

The next step is to install the JavaScript SDK. Thanks to Facebook, because with this script, installing all FB plugins on Blogger is very possible.

a. Go to Dashboard> Template> Edit HTML.
b. Activate the search function in the HTML Editor by pressing CTRL + F and find the following code by entering it in the column: (if unclear, see How to Search for Code in the Blogger HTML Editor)

You will get a code followed-some-attribute-and-script....>
c. Put the following JavaScript javascript right after / below (give space to enter the script).
Updates: I changed the script to the Javascript SDK type that has been streamlined, and stored on the blogger server using CDATA.

d. Over App-ID with the App ID numbers that were copied and saved.

Don't save the template first, there are still two more steps.

3. Install Meta OpenGraph

The Meta Opengraph is a special meta that is used by FB to retrieve the "essence" of a page as well as ID verification using applications on the Web. If you share to FB in the form of a link, then Facebook will use several methods, the most recommended method is "retrieve" via Meta Opengraph (meta: og), then what is read will be displayed as a summary, for example images, page titles / posts, post description, and url (domain). If it fails, the Facebook crawler will take whatever can be captured. Sometimes it is not as expected. Well, to overcome this you can see How to Improve Image and Post Description on Facebook. There I only mentioned a few points relating to descriptions and pictures, and here is another meta: og for this purpose:

Blog-Name-Or-Blog-Title'property =' og: site_name '/>
URL-Image / Logo-Default-Representing-Blog'property =' og: image '/>
APP-ID"/>
USER-ID / ADMIN"/>

1. Copy the meta tags above and edit the following points:

Over Blog-Name-Or-Blog-Title with the title / name of your blog.

Over URL-Image / Logo-Default-Representing-Blog with url images that represent your Blog (Logo) in the same height and width (e.g. 200x200)

Over APP-ID with the App ID that was saved earlier.

Over USER-ID / ADMIN with your account user ID, where you are the admin of the application (for comment moderation function). How to search Facebook User ID: copy this url: graph.facebook.com/user.name, paste into the browser, and replace user.name with your username normally found on the url of the profile page. example: graph.facebook.com/azmi.survivor.

2. After editing, copy all. Look for it and place the meta tags underneath, or you can put them in other parts as long as they're in between and .

3. The next step is to enter the source meta og FB attribute (xlmns) in the html tag. Look for it , at the top of the template. Usually there are already several source attributes perched within the tag. Add this in it:

xmlns: fb = 'http: //ogp.me/ns/fb#'

Example:

<html ... ... ... ... xmlns: fb = 'http: //ogp.me/ns/fb#'>

Once again, don't save yet, there's one more step :)

4. Install the FB Comment Box (XFBML or HTML5) under the Article

There are several methods commonly used to insert snippet comment boxes, in Blogger's own comments section (inside b: includablecommenting Blogger) or pasting it to another section as long as it's under the post. I tend to choose the second method because in this way we can hide the default Blogger comment box in various ways without being affected in the Fb comment box, and without having to hack too much. As usual, we will still rely on the conditional tag so that the comment box appears on the post page only.

XFBML

light'expr: href =' data: post.canonicalUrl 'expr: title =' data: post.title 'expr: xid =' data: post.id 'width = "600"numposts ="5">

HTML5

light'class =' fb-comments 'expr: href =' data: post.canonicalUrl 'expr: title =' data: post.title 'expr: xid =' data: post.id 'data-width ='600'data-numposts ='5'/>

a. You can choose one of the two types of code above, because FB comments supports these two types of code.

b. After selecting, copy and customize the following points:

Over light with dark to change the appearance of the comment box to dark if it has to be adjusted to the template.

Over 600 with a certain value to adjust the width of the comment box to the width of the post section.

Over 5 with other values, this is the number of comments displayed by default on posts. The rest opens with 'Show More Comments "

c. After customization is complete, return to Edit HTML and search , use the search feature as before. For some types of templates, especially those using auto readmore, you will find two or three of the same tags, including static page tags. Try searching at the very end and focusing there.

d. Place the FBML code or HTML5 comment box according to the choice and the edited one right below it. Now the points to note are:

If you have pasted code or snippets under a post, for example social share buttons, addthis social buttons, permalink boxes, tags, widget widgets, etc., make sure you put the code under the snippets, so that the comment box is not displayed above it.

If the comment box does not appear, then you have placed the code below improper. Try moving it below another.

e. Up to this point, it's best to save the template first to see the results and see if it fails or not.

5. Hiding the Blogger Comment Box

This stage is optional. But most likely many of you want to hide the Blogger comment box and use Facebook Comment Box as the default comment box.

a. Go to settings> posts and comments.

b. Look at the "Comment Location" section, click the dropdown menu next to it and select "Hide".

c. Click "save settings" and see the changes in your post.

Insert FB comment box by the way above will not be affected by this stage, because the FB comment box is not in the same widget. Maybe someone is asking, why not just hide it using CSS (display: none). That function only hides, while the comment box along with the comments will still be loaded (called), so that it is a load on the blog. Being in this way, the Blogger comment box is not called at the same time not displayed.

Closing

It is very possible that there are various problems in installing Faceboo Comment Boxk on your blog, so drop a comment if you wish to. Have a nice Blogging.

Thus the article How to Install Facebook Comment Box on Blogger (XFBML / HTML5)
So this article, How to Install Facebook Comment Box on Blogger (XFBML / HTML5) hopefully can benefit you all. ok, see you in another article post.

You are now reading the article How to Install Facebook Comment Box on Blogger (XFBML / HTML5) with the link address https://djf-xp.blogspot.com/2019/10/how-to-install-facebook-comment-box-on.html