Add Flat Popup Facebook Like Box Widget for Blogger

Targeting the blogger visitors is the most important way of any blog. If you want to increase your Facebook like then should promote your page on your blog with your blog's users. Then you will get more like from your users who visit your blog. Adding the pop up like the box is most essential for getting more like. So today I am gonna to share a tutorial about pop up facebook like box for blogger. This widget was made with some cookies and these are unnecessary. Recently I build another popup facebook like box widget using CSS and JavaScript No cookies included.

Check out: How to Add Bottom Floating Facebook Like Widget to Blogger

Add Flat Popup Facebook Like Box Widget for Blogger

How Does it Work?

Recently i found a pop-up jQuery and I used this jQuery in this pop-up facebook like box widget eZmodal is a simple and fast jQuery plugin which enables you to display static HTML content in a responsive, fully configurable modal popup window. This a best popup plugin. That's why i used eZmodal in this widget.

Pay Attention: How to Add Dark Author Bio Bio Box to Blogger

Using the facebook like box widget you may keep your visitors in your touch. This way is another great way for increase blog traffic. Popup Facebook like box is a great way for promoting your fan page with your blog visitors. Proper use of like box, you can get more like for your fan page.

Facebook is a great way for increase blog traffic. When you share your content on your Facebook page, then here is an opportunity to share your content with your visitor with others. In this way can get more extra traffic. In this circumstance, you have must need to promote your page with your blog. Pop-up like box is one of the best way.

Read Also: How to Add Add Popup Email Subscribe Widget to Blogger

Adding Flat Popup Facebook Like Box Widget to Blogger

  1. Go to Blogger Dashboard >Template > Edit HTML and past the given CSS before ]]></b:skin>
  2. /*=============== CSS Popup Like box ======================*/ .mspopup{position:fixed;top:0;left:0;right:0;bottom:0;z-index:90000;background:rgba(0,0,0,.6);overflow-x:hidden;overflow-y:auto;display:none} .mspopup-container{background:#fff url(http://i.imgur.com/2twQjiN.gif) no-repeat 50% 50%;padding:0;font-size:14px;height:236px;position:fixed;top:50%;left:50%;z-index:90001;-webkit-box-shadow:0 0 15px 0 rgba(50,50,50,0.8);transform:translateY(-50%) translateX(-50%)} .mspopup .mspopup-close{position:absolute;top:9px;right:20px;font-weight:700;font-family:Verdana;font-size:18px;cursor:pointer;color:#fff} .mspopup .mspopup-close:hover{color:#535353} .mspopup .mspopup-header{font-size:20px;padding:10px;text-align:center;color:#fff;font-family:Open Sans;background-color:#3B5998;text-shadow:1px 2px 4px #838383} .mspopup .mspopup-header p{font-size:10px;padding:0;margin:0;font-weight:400;text-transform:initial} .mspopup .mspopup-content{padding:10px 20px}
  3. Now past the given code before </body>
  4. <script src='https://cdn.rawgit.com/knigulper/github.io/gh-pages/knigulper.blogspot.com/fbpopuplikebox.js' type='text/javascript'/> <script type='text/javascript'> $(&#39;#popup-box&#39;).mspopup({ &#39;autoOpen&#39;: true }); </script>
  5. When you complete the above mentioned steps, click the Save button
  6. Navigate to Layout >Add a gadget >HTML/Javascript and past below code.
  7. <div id="popup-box" class="mspopup"> <div class="mspopup-container"> <div class="mspopup-header"> <div class="mspopup-close" data-dismiss="mspopup">x</div> Like us and Join with our community <p> Get our all latest update from our facebook page, Its free and speedy</p> </div> <div class="mspopup-content"> <div class="fb-page" data-href="https://www.facebook.com/knigulper" data-width="400" data-height="300" data-small-header="true" data-adapt-container-width="true" data-hide-cover="true" data-show-facepile="true" data-show-posts="false"><div class="fb-xfbml-parse-ignore"></div></div> </div> </div> </div>

    Note: Replace knigulper with your facebook page username.

Meet Our Blogger Community! JOIN NOW

Subcribe to Our Newsletter For Free

Subscribe Now

Recommended For You

2 comments:

  1. Replies
    1. I am sorry to hear that! Could you please explain in brief so that i can help you?

      Delete