Showing posts with label blogger widgets. Show all posts
Showing posts with label blogger widgets. Show all posts

How to Add Facebook Comment Box in Blogger

Comment box in a website/blog allow visitors to add their reviews or ask any question related to article. This is must have part of a user friendly website. Comments keep your site active and show your website/blog popularity. Every new comment means that your website/blog is being update. Facebook provides many plugins for websites like Facebook Like Box, like button, share button, comment box etc. However in this post you will know, how to add Facebook comment box in Blogger.
Almost every person has Facebook account now a days that's why it is better to use Facebook comment box. Facebook comment box allow users to show their comments on Facebook as well as on website which means your website can become more social. You can use Facebook plugin for Wordpress but Blogger users can only use codes to show Facebook comment box in Blogger blog. Lets start to add Facebook comment box in Blogger. procedure is very simple which is divided into steps.

Other Recommended : 

Add Blogger Contact Form to Page Without Editing Theme
How To Protect Facebook Account From Hacking (12 Methods)

How to Add Facebook Comment Box in Blogger

1- Create Facebook App :

Relex, it is not scary. Just follow a few simple steps. Visit You must be login using your Facebook account. Now look at right top. Take your mouse on "My Apps" option.

Get Facebook Comment Box Code From Developer

You will see an option "Add a New App". Click on it. A pop up box will appear. Write name of your Facebook app in first box and your email in second box. After that click on "Create App ID". Following is a sample image of this step.

Create a New App ID at Facebook Developer

You will be redirect to your app Dashboard. Now Click on "App Review" that is on left side and make your Facebook comments box visible to public. When you will click, it will ask to select your website category. Select your website category.

Make Facebook Comment Box Public

You have created Facebook app id and all settings are ok. Lets move to Facebook Developer where you will create Facebook comment box code for website.

2- Generate Facebook Comment Box Code :

Visit the plugin page Add url, select number of comments that will appear and adjust the width of comment box. All settings are done. Now click on "Get Code".

3- Add Facebook Comments Box in Blogger Blog :

After click on "Get Code" new screen will appear like below screenshot.

How to Add Facebook Comment Box Code in Website

Facebook Developer will give you 2 codes when you will click on get code button. You have to put these codes in Blogger blog. Let do it but first select your desired language and app ID which is very first option in that box. Now start to add codes in Blogger.

Step 1 : Go to your Blogger blog dashboard and then go to "Theme" option. Click on "Edit HTML" and search for <body>. Copy the 1st code that you got from Facebook Developer and paste just after <body> tag.. Copy the 1st code that you got from Facebook Developer and paste just after tag. 

Step 2 : Now you need to install 2nd code where you want to show Facebook comment box in Blogger. Every website shows comment box below the post, if you want to show Facebook Comment Box below the post then search for the below code :
                            <div class='post-footer-line post-footer-line-1'> 

That's all Facebook Comment box successfully installed in Blogger blog. If you got any issue , then use the below comment box to contact with me. Happy Blogging !

Add Blogger Contact Form to Page Without Editing Theme

Looking for Blogger contact form HTML code? The contact form is one of the essential parts of a website/blog. It provides a way to your visitors to reach to blog admin. Visitors can ask about problems related to the website or any other issues. A user-friendly website must have a contact form. Many third-party sites (like, 123contactform ) also provide Blogger contact form but it is better to use the official contact form. These third party sites show advertisements and also effect blog speed that's why official Blogger contact form is recommended which deliver messages immediately on email associated with Blogger.
Blogger contact form can be added as a widget but webmasters usually like to create it on a separate page. You can see different bloggers which will say to edit Blogger Theme to show a contact form on a page. That process is very complex. First of all, add a widget, then go to theme and add some codes to hide the contact form widget and then go to the page and paste the code. it will not end here, also edit the code. Everyone does not like to dirty his hands with coding. Especially for new bloggers, it is just a headache. Do not worry, I shall provide Blogger contact form HTML code. Your job is to copy and paste it where you want to show it and need to do just a little customization. No theme editing will be included. Let's start to add it.

Add Blogger Contact Form to Page Without Editing Theme

Also watch :

10 Blogger (Blogspot) SEO Tips for Higher Rankings

Blogger Contact Form HTML Code :

First of all go to your Blogger blog and then go to "pages". Create a new page and give it a title which will be "Contact Us" or any other according to your desire. Now switch to html and paste the following code before </div> tag :

var blogId = 'your-blog-id-here';//this number should be mandatorily edited.
//The below message 5 Strings can also be edited
var contactFormMessageSendingMsg ='Sending...';
var contactFormMessageSentMsg = 'Your message has been sent.';
var contactFormMessageNotSentMsg = 'Message could not be sent. Please try again later.';
var contactFormEmptyMessageMsg ='Message field cannot be empty.';
var contactFormInvalidEmailMsg = 'A valid email is required.'

var widgetLoaded=false;
function sendEmailMsg() {
if(widgetLoaded== false) {
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'sidebar', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': contactFormMessageSendingMsg , 'contactFormMessageSentMsg': contactFormMessageSentMsg , 'contactFormMessageNotSentMsg': contactFormMessageNotSentMsg , 'contactFormInvalidEmailMsg': contactFormInvalidEmailMsg , 'contactFormEmptyMessageMsg': contactFormEmptyMessageMsg , 'title': 'Contact Form', 'blogId': blogId, 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': ''}, 'displayModeFull'));
return true;

<br />
<form name="contact-form">
<h4 style="text-align: left;">
Your Name :</h4>
<h4 style="text-align: left;">
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" /></h4>
<h4 style="text-align: left;">
Your Email: <em>(required)</em></h4>
<h4 style="text-align: left;">
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" /></h4>
<h4 style="text-align: left;">
<br />Your Message: <em>(required)</em></h4>
<h4 style="text-align: left;">
<textarea class="contact-form-email-message" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea></h4>
<h4 style="text-align: left;">
<br /><input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" onclick="sendEmailMsg()" type="button" value="Send" /></h4>
<br /></div>
<br /></div>
<div style="max-width: 450px; text-align: center; width: 100%;">
<div class="contact-form-error-message" id="ContactForm1_contact-form-error-message">
<div class="contact-form-success-message" id="ContactForm1_contact-form-success-message">

Customization :

You need to do some settings to active it. Search for your-blog-id-here (Tip : ctrl F) and replace it with your blogger blog id. What is your blog id? Go to your blog and see in address bar. Your blog id is showing in address bar copy it and paste where i told above. Below image explain more better.

How to Find My Blogger Blog ID

That's all, now its over to you. If you like this post then share it with others.