How to Add PopUp Facebook Like Box Widget to Blogger

By -

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 popup facebook like box for blogger. This widget was made with some cookies developed with jQuery. 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 Box Widget to Blogger

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

Steps to Add PopUp Facebook Like Box Widget to Blogger:

  1. Login to your Blogger Dashboard > Theme > Edit HTML
  2. Click anywhere inside the theme editor and press Ctrl + F
  3. Type </style> or </b:skin> and hit Enter key
  4. Add the given CSS right above the </style> or </b:skin>
    5. /*=============== 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}
  5. Now past the given code before </body>
    6. <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>
  6. When you complete the above mentioned steps, click the Save Theme button
  7. Navigate to Layout >Add a gadget >HTML/Javascript and past following 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/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.

Comments

  1. Admin18 September 2016 at 09:24

    very much too slow

    ReplyDelete
    Replies
    1. Farooq Ahmad Bhat29 December 2016 at 08:35

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

      Delete

Post a Comment

Popular posts from this blog

List of Top 11 Social Bookmarking Sites for 2018

By -
Image
Today, I'm going to share with you the most popular and widely used social bookmarking sites for 2018. These sites will help you increase your content visibility on social media and search engines. The process begins with the content curation and content aggregation. But before you bag the list, you need to understand what social bookmarking is and why you should use them instead of browser bookmarks. What is Social Bookmarking? Social Bookmarking is the process of adding, storing, submitting and sharing your contents on those websites where people and search engines can see and access your work actively. It includes a webpage, an image object, a video or text-based links like services or products that you offer. When you share (bookmark) your contents on a social bookmarking site, it means your data has been whitelisted or stored for quick access in future if the original web page exists. Check out: Role of Social Media in Boosting Your Traffic Easily Why You Should Use...
Read more

6 Digital Marketing Strategies for Small Business

By -
Image
Revenue is the lifeblood of any business. To get enough sales, it is very important to market your business as well as the products and services which you are providing. Today, there are millions of potential consumers on the Internet. Therefore, digital marketing is highly necessary. This is an activity where the company's name, brand, products, and services are spread throughout the Internet so that online consumers can view them, make purchases and possibly make referrals. By boosting your company's brand awareness online, you can create an attractive, positive and profitable business. One of the most effective methods of achieving this is by using SEO methods and other useful techniques. Here is more on Search Engineering Optimization. What is Search Engine Optimization? (SEO) This is a specialized strategy where the online visibility of a website is grown in the organic search engine results. Involving a collection of technical and web-based strategies, SEO optimizatio...
Read more

How to Create Separate AMP Pages On Blogger [AMP Plugin]

By -
Image
Today, I am going to share an awesome technique by which you can install AMP version on your responsive blogger template. By doing this, your responsive theme will not get disturbed because with this method, you can add AMP snippets to the mobile version (m=1) instead of upgrading your whole template to AMP. So let get started! As we know, people are upgrading their responsive themes to AMP themes and this method has badly impacted their blog layout. But in this article, we will be learning to create a separate AMP page in a native manner that will keep your responsive design up. So creating a separate AMP page on Blogger's mobile URL m=1, we need to have valid AMP snippets in our Blogger template. Then we will make some minor changes to make AMP on mobile URL m=1. How to Easily Add Hreflang Tag to Blogger Steps to Add AMP Pages On Blogger Mobile Redirect URL Creating a separate AMP page in Blogger is not a difficult task as you think. In today's article, I am going t...
Read more