I
guess you’ve tried to add a Facebook comments box in your blog, that will
enable your Facebook fans to easily comment on your posts, but encountered some
difficulties with codes you obtained from Facebook. You get error messages like:
Error parsing XML…The reference to entity “appId” must end with ‘;’ delimiter and
Warning: this comments plugin is operating
in compatibility mode... Consider specifying an explicit 'href'…. This is
because, like with many other third-party social media plugins, some codes used to generate
Facebook plugins aren’t always compatible with Blogger templates; but it
doesn’t mean you won’t be using them in your blog—some of them like the iFrames
work pretty well. For those codes that don’t work well, there are ways to
manipulate them in order to make them compatible with your template—or you can
just discard them and use alternative codes. Here, I’ll show you how to
manipulate these codes while you’re creating a Facebook Comments Box on your
blog.
Firstly, you’ll need a Facebook App. If you want a guide on how to create it, read my previous post on How to Create a Facebook App.
Now, here are the steps you will take:
Firstly, you’ll need a Facebook App. If you want a guide on how to create it, read my previous post on How to Create a Facebook App.
Now, here are the steps you will take:
- Go to www.developers.facebook.com/docs/plugins/comments.
- Remove the default URL from settings. You may also make some other changes to the comments box settings, like changing the number of comments it will display at a time. Then click on Get Code button.
- In the window that will appear, click on XFBML. You’ll see three sets of codes: a JavaScript SDK (notice the app id of your Facebook App); an XML namespace; and a <fb:comments/> element but you won’t use this third set of codes because it will require you to place your page’s URL within its opening tag and I suppose you don’t want to go through all the rigors of implementing it, one by one, on each of your pages. In place of this element, you’ll use another set of codes that I’ll show you.
- Copy the JavaScript SDK into a notepad or wordpad and change the two & characters to & characters. Then, copy this changed JavaScript SDK. Go to your blog’s dashboard>Template and Click on Edit HTML. Find the opening <body> tag by pressing Ctrl+F and searching for <body. Paste the JavaScript SDK immediately below it.
- Copy the second set of codes into a notepad and remove <html and >. Copy the remaining code and place it within and at end of the opening <html> tag. The opening html tag is the first set of HTML codes in your template. I believe you won’t have any difficulty finding it.
- Copy the code below. It’ll serve as third code
needed to generate the comments box.<b:if cond='data:blog.pageType == "item"'><div style='padding:20px 0px 5px 0px; margin:0px 0px 0px 0px;'><script src='http://connect.facebook.net/en_US/all.js#xfbml=1' /><div><fb:commentscolorscheme='light'expr:href='data:post.url'expr:title='data:post.title'expr:xid='data:post.id'width='515'/></div></div></b:if>
- Paste this code where you want the comments box to appear in your blog. I recommend you place it within the comment-form of your template i.e. immediate after the <b:includable id=’comment-form’ var=’post’> tag. To find this tag press Ctrl+F and search for <b:includable id=’comment-form’ var=’post’>. You can change the width (highlighted above) of the comments box from 515 to any other value that fits your template.
- Save the template. The Facebook comments box is then ready for use.
Below
is a short video I made that will help see how exactly you’ll place these codes
to get good results.
hi mr Chima Chibueze
ReplyDeletei folow your steps
but the facbook comments box only show in posts which have no comments
it show her
http://shlotmozdwag.blogspot.com/2011/09/blog-post.html
but not show here
http://shlotmozdwag.blogspot.com/2011/07/blog-post_09.html
any Ideas
And thank you in advance for your efforts
Hi +MasryChannel . I noticed that too. Place the third code within the "sharebuttons" form. In the HTML Editor search for and place the third code immediately after it.
ReplyDelete+MasryChannel There is another place where you can place the third code depending on your choice and that is just below your blog's post body. See how it looks like in my blog. To place the code, find and paste the third code after it.
NOTE: There are three tags in the HTML. Find them and paste the third code after each of them.
thank you very much
ReplyDeletedfdfdf
ReplyDelete