Welcome to <CodeIsLove>: Geek Is Chic, owned by Kitty. The site houses loads of random ramblings, articles, tutorials and tips as well as Classic Blogger-related things.
Tutorial: Add Facebook comments on Classic Blogger template
Not all of us like Blogger's default commenting system, I know this. Many of us have defected to using Disqus, Intense Debate, etc. And some of us actually prefer to use Facebook commenting system. But how to install this on Blogger?
Fret not, the tutorial below will teach you how to do it! It's a bit long but it's quite easy, really.
Ready? Read on!
Here you will need to create an app first by clicking on the green 'Create New App' button. A pop-up window appears that look something like this:
Fill in the blanks like shown above. You can give any name you like to your app. The name in the picture above is just an example.
Once you've filled in the necessary things, click 'Create app' button.
Step 2
Once you've clicked the 'Create app' button you will be brought to your app's dashboard page. Here you will need to change the settings of the app. So click on 'Settings' from the menu on the left.
Fill in your email address in the 'Contact Email' box then click 'Save changes'.
Step 3
Click on 'Status & Review' from the menu on the left. You will see this text: Do you want to make this app and all its live features available to the general public? and next to it, there is a button that is set to 'NO'. Change it to 'YES'. Once you confirm it to YES, a green dot will appear next to your app's name. This shows your app is now live and visible to the public.
In input box 'URL to comment on' (labelled 1), leave the URL as it is. We will change it AFTER we insert it into the Blogger template.
Put in any value you like in box labelled 2. This determined the length of the comment box that will appear in your blog.
In box labelled 3, the value you put in will determine how many comments will be displayed on your blog.
In the box labelled 4, this determined the look of your commenting system; choose either light or dark.
Once you're done, click 'Get code'.
Step 6
A pop up window will appear once you clicked the 'Get code' button. You will be presented with the code that you will need to paste into your Blogger template.
Copy the codes in box 4 and paste into right after the opening <body> tag.
Next, copy the codes in box 5 and paste into wherever you want the comments to appear. If your template already has the default Blogger commenting system, just replace that default Blogger code with this new one.
Once we pasted the second code, remember back in Step 2, in box labelled 1 we deliberately left the URL as it was. Now it's time to change it so that it will work properly on our blog.
So look at the code: <div class="fb-comments" data-colorscheme="light" data-href="http://example.com/comments" data-numposts="5" data-width="500"></div>
Change http://example.com/comments to <$BlogItemPermalinkURL$>.
Now what this Blogger tag normally does is it generates a unique permalink for every individual post in our blog. We use this code and insert it into the Facebook comment code so it will generate a comment thread that is unique for every post in our blog.
Once we've done that, save the template!
Step 7
To display the Facebook comment count on your blog, use this code:
@Pankaj, what do you mean by here? You mean in the blog? Or the comments?
Post a Comment
Commenting policy: 1. Please leave comments that are relevant to the blog post. 2. Comments on posts that are more than 14 days old will be moderated. 3. Do not post advertisements to your own site/products here. 4. Do not post private information, it will be deleted. 5. Refrain from using abusive/vulgar words, if you have personal issues with me, contact me directly through the contact form or my email instead.
Facebook comments to Tutorial: Add Facebook comments on Classic Blogger template:
Not all of us like Blogger's default commenting system, I know this. Many of us have defected to using Disqus, Intense Debate, etc. And some of us actually prefer to use Facebook commenting system. But how to install this on Blogger?
Fret not, the tutorial below will teach you how to do it! It's a bit long but it's quite easy, really.
Ready? Read on!
Here you will need to create an app first by clicking on the green 'Create New App' button. A pop-up window appears that look something like this:
Fill in the blanks like shown above. You can give any name you like to your app. The name in the picture above is just an example.
Once you've filled in the necessary things, click 'Create app' button.
Step 2
Once you've clicked the 'Create app' button you will be brought to your app's dashboard page. Here you will need to change the settings of the app. So click on 'Settings' from the menu on the left.
Fill in your email address in the 'Contact Email' box then click 'Save changes'.
Step 3
Click on 'Status & Review' from the menu on the left. You will see this text: Do you want to make this app and all its live features available to the general public? and next to it, there is a button that is set to 'NO'. Change it to 'YES'. Once you confirm it to YES, a green dot will appear next to your app's name. This shows your app is now live and visible to the public.
In input box 'URL to comment on' (labelled 1), leave the URL as it is. We will change it AFTER we insert it into the Blogger template.
Put in any value you like in box labelled 2. This determined the length of the comment box that will appear in your blog.
In box labelled 3, the value you put in will determine how many comments will be displayed on your blog.
In the box labelled 4, this determined the look of your commenting system; choose either light or dark.
Once you're done, click 'Get code'.
Step 6
A pop up window will appear once you clicked the 'Get code' button. You will be presented with the code that you will need to paste into your Blogger template.
Copy the codes in box 4 and paste into right after the opening <body> tag.
Next, copy the codes in box 5 and paste into wherever you want the comments to appear. If your template already has the default Blogger commenting system, just replace that default Blogger code with this new one.
Once we pasted the second code, remember back in Step 2, in box labelled 1 we deliberately left the URL as it was. Now it's time to change it so that it will work properly on our blog.
So look at the code: <div class="fb-comments" data-colorscheme="light" data-href="http://example.com/comments" data-numposts="5" data-width="500"></div>
Change http://example.com/comments to <$BlogItemPermalinkURL$>.
Now what this Blogger tag normally does is it generates a unique permalink for every individual post in our blog. We use this code and insert it into the Facebook comment code so it will generate a comment thread that is unique for every post in our blog.
Once we've done that, save the template!
Step 7
To display the Facebook comment count on your blog, use this code:
@Pankaj, what do you mean by here? You mean in the blog? Or the comments?
Post a Comment
Commenting policy: 1. Please leave comments that are relevant to the blog post. 2. Comments on posts that are more than 14 days old will be moderated. 3. Do not post advertisements to your own site/products here. 4. Do not post private information, it will be deleted. 5. Refrain from using abusive/vulgar words, if you have personal issues with me, contact me directly through the contact form or my email instead.
Facebook comments to Tutorial: Add Facebook comments on Classic Blogger template:
I offer designing and re-designing of Classic Blogger templates. Examples of my design can be found on my portfolio website.
The basic rate for a design starts from $25 USD. The rate is based on the complexity of the design. The more elaborate the design is, the higher the price is.
How to place your order
Send me an email via the contact form and state clearly how you want your design to be. This includes colour scheme, layout (with or without sidebar, number of columns, etc), any extra features, etc.
Your email should be in this format:
Name:
Design: Please give detailed explanation on how you want your template to look like
Preferred payment method: Paypal/Moneybookers/Payza/Bank transfer to Baiduri bank
I shall respond to your email within 3 (three) days. Your order will be placed into a Waiting Queue as orders are processed on a first come, first serve basis.
Payment methods
Payment has to be made to either by PayPal, or Moneybookers.
However, if you choose to pay via (international) bank transfer, be aware that you may be charged for the transfer service.
Other important information
Throughout the designing process, I may need to refer back to you for questions/opinions so do check your email frequently. This is to ensure the design can be done as soon as possible.
Depending on the design, your template make take up to over 1 (one) week to finish. You will be informed once the template is done.
I will send you an email requesting for the payment after the template is done. Once the payment is received, I will email you the complete template along with the necessary files.
All of my designs/templates will come with a credit section. This section must be left intact and you may not remove nor alter them. Resources that come with the designs/templates may not be redistributed or reproduced.
The designer
Kitty. 29. Blogger, web design hobbyist, compulsive shopper and bibliophile based in Brunei. Enjoys creating and designing websites, dabbling with HTML, CSS and PHP.
I've been blogging since 2005 (or earlier) though my experience with the internet started back in 2000. My main interest is in web design and development. Other times you can see me wrapped around a book or glued to Astronomy and web design magazines.
The website
This website was created in January 2011 and the domain was purchased by me in late December 2010. Initially the website was intended to house tutorials for Classic Blogger/Blogspot only however over the time it has developed into what you see today.
Several of the tutorials and articles can also be found on Nekonette.com, which is the my main website where I mostly blog about my personal life. Also some of the tutorials here have been moved to that website.
Categories/Labels
Past layouts
These are the layouts that have been used on Codeislove.net previously.
Layout #1
Layout #2
Layout #3
Articles, Tutorials and Contests
Articles
Please do not copy the articles verbatim and/or redistribute them on your site. And I'd appreciate it if you link back to me.
Tutorials
Please do not copy the tutorials verbatim and/or redistribute them on your site. And I'd appreciate it if you link back to me.
Looking for money-making opportunities? Check out these websites.
Contact the webmistress
You can email me your messages/tutorial requests using the contact form:
Advertising
Codeislove: Geek Is Chic is a blog which houses various articles, tips and tutorials on web design as well as a mix of personal insights published by the website owner.
Also, if you think that you have a good advertisement offer to discuss with me, do contact me and let's discuss about it.
Get reviewed
You can have your website/blog reviewed here on Codeislove. Alternatively, you can also apply to get your website/blog reviewed on my other website, Amalina.org. You can request your review to be public or private. If you choose to have it public, it will be posted here on Codeislove. Similarly, if you want it to be private, I will send the review to you via email.
Please send an email to me in this format and I will get back to you as soon as I can:
Name:
Email:
Website/blog:
Do you want the review to be public/private?
Welcome to <CodeIsLove>: Geek Is Chic, owned by Kitty. The site houses loads of random ramblings, articles, tutorials and tips as well as Classic Blogger-related things.
Post a Comment
Commenting policy:
1. Please leave comments that are relevant to the blog post.
2. Comments on posts that are more than 14 days old will be moderated.
3. Do not post advertisements to your own site/products here.
4. Do not post private information, it will be deleted.
5. Refrain from using abusive/vulgar words, if you have personal issues with me, contact me directly through the contact form or my email instead.