Monday, 25 September 2017

How to Add Facebook Chat Widget to BlogSpot Blogs

Now facebook made it easy to get in touch with your blog readers through its chat widget in active conversation. Being in touch with your blog readers is a surefire way to collect the information from the visitors. The information includes the questions, queries, suggestions, and feedbacks. If you visit pro bloggers, they strategically offer many options to stay tuned with their readers. So, why you are chewing food improperly?


You may have seen the third party chat widgets and plugins on various sites, but you could hardly find threaded comment enabled chat widget. Facebook chat plugin has many powerful features like conversation notifications. In this way, you don't need to add the contact and feedback form separately. Facebook chat plugin will do this job for your blogger blogs. Just log into your Facebook account, and there will be notifications of conversations that people have had with you.

Real Also: How to Add Preloader to BlogSpot Blogs

How Does Facebook Chat Plugin Work on BlogSpot?

As soon as your readers land on your blogger, they will see a floating Facebook chat widget with your profile picture and Chat Now button. So, when they hit Chat Now button, a box will appear with threaded comments. They have the option to send their comments from their personal Facebook account or from the pages which they manage.

Check out: How to Add Tabs and Accordion to BlogSpot

Adding Facebook Chat Widget to Blogger Blogs

Before making any changes in your blogger theme you must backup it. Because in the event of any errors it will help you to restore your blog to its previous layout.

  1. Go to your BlogSpot Dashboard > Theme > Edit HTML
  2. Click inside the code area and press Ctrl + F from your keyboard
  3. As soon as you press the Ctrl + F, a search box will appear
  4. Type <body> and paste the Facebook comment plugin right below it
  5. If you don't have plugin code, get it here

  6. Now find the ]]></b:skin> and add the given CSS right before it
  7. /*= facebook chat plugin by =*/ .choosetype {position:fixed; height:0px; bottom:0px; right:0px; width:455px; border:6px solid #0583f2; border-radius:3px;} {height:420px; display:block !important; background:#fff; padding:15px; z-index:99999999; overflow-y:auto; overflow-x:hidden;}   .boxshow {width: 260px;height:100px;overflow: hidden;position: fixed;right: 0px;bottom: 0px;z-index: 9999999;padding:15px; background:#0583f2; color:#fff; border-radius:3px;}   .boxshow .needtitle {font-size:18px; font-weight:700; margin-bottom:3px; display:inline-block}   .boxshow a, .boxshow p {color:#fff;} .boxshow p {margin-top:1px;margin-bottom:8px!important;}   .boxshow img {float:left; margin-right:5 20px; border-radius:100%; position: absolute;left: 25px;top: 25px; border:none}   .boxshow .moreinfo {float: left;width: 200px;float: right; text-align:center}   #clickme {background:#5EB800; padding:6px; border-radius:3px; cursor:pointer;margin-top:4px;}   .boxbix #clickmety {top:235px; position:fixed; right:440px; background:#0583f2; color:#fff; width:30px; height:30px; line-height:30px; text-align:center; z-index:-1; opacity:0; border-radius:3px;}   .boxbix #clickmety i {color:#fff !important; font-family:fontAwesome !important}   .hh {margin-top:18px;}  #clickme {font-family: &#39;Montserrat&#39;, sans-serif;}
  8. Final step, locate the </body> and add the HTML markup just before it
  9. <div class='mydiv'> <div class='boxshow'> <img caption='Knigulper' src='' width='60' height:'60'/> <div class='moreinfo'> <a class='needtitle' href='#'>Have a Question?</a><p>Leave A Message</p> <p class='hh'><a id='clickme'>Chat Now</a> </p> <p class='get-this' style='margin-bottom:1px; margin-left:140px; padding-bottom: 0px;font-size:9px'> <a href='' id='get'>Get plugin</a></p> </div> </div> <div class='boxbix'> <a id='clickmety'><i class='fa fa-close'/></a> <div class='choosetype' style='display:none'> <div class='fb-comments' data-href='' data-numposts='5' data-width='380'/> </div> <div class='clear'/> </div>       </div> <script> //<![CDATA[  $("#clickme").click(function(){   $(".choosetype").toggleClass("show");    $("#clickmety").css({'z-index':'999999999999','opacity':'1','display':'block'});   });  $("#clickmety").click(function(){   $(".choosetype").toggleClass("show");    $("#clickmety").css({'display':'none'});   });   //]]> </script> <script> //<![CDATA[ (function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); = id; js.src = ""; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); //]]> </script>
  10. Replace blue text with you image URL, black text with your blog URL/page id and click Save Theme

Now your Facebook chat widget is ready to work on your blogger.

Discover How to Grow Your Blog to 2k+ Visits /Day

Get Free Access

More From Knigulper

Comment Policy

Please Keep in mind that all comments are moderated manually & by default, all the links in comment area are set to nofollow. Using hyperlinks in comment is forbidden and such comments will not be published. Let's enjoy a spam-free conversation.


  1. hi... I've tried it. but this is the report I got
    " The reference to entity "version" must end with the ';' delimiter."

    How do I fix it?

    1. Hello Godson! Paste your facebook chat code here and press Convert. Copy the converted code and paste it in your theme.

  2. Very nice brother you are great brother are you understand hindi language

  3. nice post please visit