How To Add Stylish Facebook Popup Page Plugin In Blogspot Blogs

How To Add Advanced Popup "Facebook Page Plugin Pro" to Blogger Blogs

facebook popup like box for website

facebook popup like box for blogger with timeout Feature and Close Button

What is Advanced Popup Facebook Page Plugin Pro?

Advanced Popup Facebook Page Plugin Pro is a Popup Widget Which Will Appear at the middle of the site And Show your Facebook Page to your visitors so that they can like your page and see how many people already liked your page.

This Popup Facebook Page Plugin Pro will Not affect your site loading speed because we have designed it in the way that it will show when your site is fully loaded and we have added timeout feature What this will do is it will not show the pop up like box instantly after the site is loaded it will show after three seconds so that it will not be annoying for visitors and look more official This Pop up Facebook Page plugin is created using HTML, JavaScript For Markup and Interaction & CSS For Styling .   

Advantages of Using Advanced Popup Facebook Page Plugin Pro

Why To Use Advanced Popup Facebook Page Plugin Pro ?

Like We said above This widget is loaded with many features Like 

Timeout Delay Feature And Close Button: 
We have Added Timeout Delay Feature so that the widget should show after three seconds of site fully loaded and Close Button so that The visitor can interact with the widget and can close or like the page plugin easily

Does Not Affect on Site Loading Speed:
This Facebook Page plugin will Show After the site loads if the site does not loads completely then this widget will not show to the visitors.

Increase Your Facebook Page Likes at maximum:
This Widget will appear to every visitor who browse your site so there is high possibility of people like your page.

Drawbacks of Advanced Popup Facebook Page Plugin Pro

What are Drawbacks of  Advanced Popup "Facebook Page Plugin Pro"?

See Every Widget has advantages and disadvantages. Some of the Drawbacks of this widget are:

• Visitors can get irritated seeing the Popup box again and again.

• If JavaScript is disabled in the browser then this widget will not work properly. 

Check This Widget Also: CSS3 Popular Posts Widget with Auto Numbers+hover effect!

Let Start Adding Advanced Popup "Facebook Page Plugin Pro" Center of Blogger Blog?:

Installing The Widget in the Blog:

STEP 1: Log in to your Blogger account and Go to your Blogger Dashboard

STEP 2: In The Left Side Bar You will find Layout Section as highlighted in the image above Click on Layout.

STEP 3: Click On "Add a Gadget" As highlighted in the image above.

STEP 4:After Clicking on "Add a Gadget" Choose "HTML/JavaScript" from the list & as highlighted in the image above.

STEP 5: Now Copy This Below Code And Paste it in The Empty Box of the "HTML/JavaScript" Section.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />

<style>
    
    .tw_float_ads_main_Wrap{
        max-width: 350px;
        max-height: 350px;
        position: fixed;
        z-index: 98765;
        background: rgb(59,89,152);
        top: 50%;
        left: 50%;
        margin-left: -175px;
        margin-top: -175px;
        box-sizing: border-box;
        box-shadow:0 0 3px rgba(0,0,0,0.2);
        border-radius: 10px;
        display: none;
    }    
    
    .tw_float_ads_close{
        margin: 0 auto;
        text-align: center;
        padding: 30px 20px 30px;
        position: relative;
    }
    
 .tw_float_ads_close #tw_close_button
{
   font-size: 25px; 
    color: #fff;
    position: absolute;
    top: -12px;
    right: -10px;
    display: inline-block;
    box-shadow:0 0 3px rgba(0,0,0,0.2);
    z-index: 9999999;
    background: rgb(59,89,152);
    padding: 5px;
    border-radius: 5px;
}
    
#tw_close_button{
        cursor:pointer;
}

#TW_credits{
    font-size: 25px; 
    color: #fff;
    position: absolute;
    bottom: 2px;
    right: 5px;
    display: inline-block;
    text-shadow:0 0 3px rgba(0,0,0,0.2);
    text-decoration: none!important;
    }
    

</style>

<div class='tw_float_ads_main_Wrap' id='tw_float_ads_main_Wrap'>
    <div class='tw_float_ads_close'>
       
       <span id='tw_close_button' style='float: right'>
           
           <i id='TW_Close_Button' class="fa fa-times" aria-hidden="true" title='close the Advertisment'></i>

           
       </span>
       
       <div>
           
     <div class="fb-page" data-href="https://www.facebook.com/trendingwidgets/" data-width= '300' data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><blockquote cite="https://www.facebook.com/trendingwidgets/" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/trendingwidgets/">Trending Widgets</a></blockquote></div>
           
       </div>

   <span id='TW_credits' style='float: right; font-size: 12px;'><a style='text-decoration: none!important; color: #fff;' href="
http://www.trendingwidgets.com/2017/05/add-advanced-popup-facebook-page-plugin.html">Get This Widget</a></span>
   
    </div>
    
    <div style='clear:right'></div>
    
</div>

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.9";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>


<script type="text/javascript">
window.onload = function(){

var tw_closeButton = document.getElementById('tw_close_button');
    
var tw_float_ads_main_Wrap = document.getElementById("tw_float_ads_main_Wrap");

myVar = setTimeout(function(){ tw_float_ads_main_Wrap.style.display = 'block' }, 3000);

tw_closeButton.onclick = function(){
    
  document.getElementById("tw_float_ads_main_Wrap").style.display = 'none'; 

    
}

}

</script>

That's it Thanks For Following The Tutorial Now Its time For Customization to make it as it made for your site.

Customization:

• The Orange Highlighted Text is responsible for Font-awesome Style-sheet if you already included this style-sheet then please don't add this text highlighted in orange color .

• The Yellow Highlighted Text is Responsible For Your Facebook Page Name Just change the every instance of Yellow Highlight text and replace with your page name.

STEP 6:  All Done Save the Gadget and Check it in your site.

Conclusion:

If you are facing the difficulty in adding your Facebook pagename then use this official Facebook Page plugin and generate your code you will see two codes Up and Down Use Below Code. Copy and replace with our code Which Starts from <div class="fb-page" and ends after the </blockquote></div>

That's It Thanks For Following our Tutorial '' How To Add Advanced Popup "Facebook Page Plugin Pro" to Blogger Blogs ?'' Along With us If you found any difficulty Please Comment and Share Your Valuable Opinion. And Stay tuned for More Tutorials Like This and Share this with your friends.