Flat Popup Facebook Like Box Widget for Blogger

Flat Popup Facebook Like Box Widget for Blogger

Flat Popup Facebook Like Box for Blogger

Flat Popup Facebook Like Box for Blogger - in this session i shared this widget for blogger. Before some days, i shared another popup like box for blogger. That was Pop up Facebook Like box for Blogger with CSS ". 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). 

Targeted visitors are most important of any blog. Retention blog visitors more and more important. If you want to increase your facebook like then should promote your page in 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 box is most essential for get more like. So today i am gonna to share a tutorial about pop up facebook like box for blogger.

How it work?

Recently i found a popup jQuery named Easy Static Modal Popup Plugin. I used this jQuery in this popup facebook like box widgeteZmodal 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. Thats why i used eZmodal in this widget. 

In first load, in this widget shown a loader. This loader like below screenshot.

Flat Popup Facebook Like Box Widget for Blogger

Using facebook like box you may keep your visitors in your touch. This way is another great way for increase blog traffic. Popup facebook like box is great way for promote 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 by your visitor with others. In this way can get more extra traffic. In this circumstance you have must need promote your page with your blog. Popup like box is one of the best way.

Now lets start the tutorial. Before start work, please take a backup of your template. 
Step 1: Go to Blogger Dashboard > Template > Edit HTML and past below code before </style>
 /*=============== CSS Popup Like box by msdesignbd.com ======================*/
.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} 

Step2: Now past below code before </body> tag.
 <script src='https://cdn.rawgit.com/msdesign92/ms-design/master/mspopup.js' type='text/javascript'/>
<script type='text/javascript'>
  $(&#39;#popup-box&#39;).mspopup({
  &#39;autoOpen&#39;: true
});
        </script> 

Now Save Template.

Step3: Go to Layout > Add a gadget > HTML/Javascript and past below code.
<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/msdesign.rtml" 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: Change msdesign.rtml with your facebook page username.

That's it. Now refresh your blog and see awesomeness. Thanks...

Previous Post
Next Post

post written by:

TemplateMark better known as Template Market provides High quality free and premium Blogger templates. If you running a blog with Blogspot platform, then you can choose more than 20+ free blogger templates for your blog. TemplateMark provides free version of every template. You can highly choice TemplateMark for your digital blog.

42 comments:

  1. Thank you, really this is beautiful it looks great, greetins from Mexico

    ReplyDelete
  2. This comment has been removed by the author.

    ReplyDelete
    Replies
    1. I have seen your blog. You have some script problems in your blog. Firstly change or fix these problems then install this widget. Thanks, Stay with MS

      Delete
  3. This is amazing Like box, But i want one change this popup like box Popup's every time when my page reload, I want some changes in this
    1) Popup box appears when my user visit homepage (or)
    2) appear popup-box one time for user
    Plz help me...MS........!!!!!!!!

    ReplyDelete
    Replies
    1. Then you need to use some cookies..

      Delete
    2. Hello MS,
      need help how to use cookies, provide the solution

      Delete
    3. Will share another posts about this solution. Stay connected

      Delete
  4. This is so Impressive. Good Looking than other Popup Boxes. Thank You

    ReplyDelete
  5. it's just showing loading......... image, but not displaying the FB page! why?

    ReplyDelete
  6. solved and thanks for the nice design. I loved it

    forgot to put FB script code inside body

    ReplyDelete
    Replies
    1. Your pop-up design is a good one. Can we make it responsive which can fit to mobile screen?

      Delete
    2. Will post another tutorial. Thanks...

      Delete
  7. This comment has been removed by the author.

    ReplyDelete
  8. thank , but this show in all page . a want this show only home page . please :D

    ReplyDelete
  9. Assalam Bro Its working but if i like fb page also its goes on repeating in every pages
    its very imp for every website so plz upload it soon
    we all are waiting
    jazakallah

    ReplyDelete
  10. Please..how to add facebook like popup responsive, work on smartphone with timer. And automatic close if some people like. Thank you..

    ReplyDelete
  11. Hi, please is the new version that support cookie available yet? Thanks. Love your blog. Very informative.

    ReplyDelete
  12. Thank you, it looks amazing and so elegant on my blog but I got a question. Is it responsive?

    ReplyDelete
  13. Hi, I am using the free palki ultimate template and I added the html code in the sidebar. The likebox appeared in the sidebar. How can I make it appear in the center of the website and only in the home page?

    ReplyDelete
  14. Hi, how do, if I just want to come out once a day per visitor and the message disappears after 4 seconds?

    ReplyDelete
  15. Thanks A Lot Bro.

    Can you help me to train seo

    ReplyDelete

  16. In my blogger using template (version Apriezt 2.2) did not work, it may not be compatible with SDK JavaScript or not has a built-in template, but the template (IdeasMAG Responsive Template) worked properly and was very good this has (SDK JavaScript) version = v2.5 & appId = 1760806057479925 ";

    ReplyDelete
  17. how to create date expired in popup?

    ReplyDelete
  18. Thank You! It's damn good and excellent. You have good creativity in design. Thank you very much msdesignbd.

    ReplyDelete
  19. ভাই বর্তমানে ms design এ যে pop up like বাটনটা আছে সেটা কই পাবো?

    ReplyDelete
    Replies
    1. http://www.msdesignbd.com/2016/08/bottom-floating-facebook-like-box-widget-for-blogger.html

      Delete
  20. Yes This One Is Working Thanks Buddy!

    ReplyDelete
  21. Best Widget For fb like box thankyou

    ReplyDelete
  22. Your pop-up design is a good one. Can we make it responsive which can fit to mobile screen?

    ReplyDelete