Learn how to display your Facebook page In popup tab

Apr 22/Mohamed Nakhlawy/Plugins

Don't worry its very easy, you can do it.

You will add this code to body

And try to add this code before that mean the Facebook page will appear after your website structure loaded


Get Your Facebook Page from Here


now you can replace facebook Step 1 and facebook Step 2


<div id="MainFbInclude">

<button id="closeFrame">X</button>

<div id="MainFbIncludeC">

<!-- facebook Step 1 -->
<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 = 'https://connect.facebook.net/en_US/sdk.js#xfbml=1&amp;version=v2.12&amp;appId=1613237728913794&amp;autoLogAppEvents=1';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>


<!-- facebook Step 2 -->
<div class="fb-page" data-href="https://www.facebook.com/AlNakhlawy/" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true">
<blockquote cite="https://www.facebook.com/AlNakhlawy/" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/AlNakhlawy/">Afrodien</a></blockquote>
</div>

</div>

</div>

<style type="text/css">
#MainFbInclude {
position: fixed;
height: 100%;
width: 100%;
top: 0;
right: 0;
left: 0;
z-index: 9999999999;
background: #0000002b;
}

#MainFbIncludeC {
position: relative;
height: 300px;
width: 300px;
margin: 0 auto;
top: 50%;
transform: translateY(-50%);
}

#MainFbIncludeC .fb-page.fb_iframe_widget,
#MainFbIncludeC .fb-page.fb_iframe_widget span,
#MainFbIncludeC .fb-page.fb_iframe_widget iframe {
height: -webkit-fill-available !important;
width: -webkit-fill-available !important;
}

button#closeFrame {
width: 30px;
height: 30px;
position: fixed;
right: 20px;
top: 20px;
border-radius: 100%;
border: 1px solid #000;
line-height: 28px;
background: #fff;
text-align: center;
}
</style>

<script type="text/javascript">
$("#closeFrame").on('click', function() {
$("#MainFbInclude").remove();
localStorage.setItem("FB_Frame", "true");
});
</script>


Now when visitor go to any page in your website will see the Facebook page


To make Facebook page appear one time

Add this code to head before


<script type="text/javascript">
if(localStorage.FB_Frame=="true"){
    $("#MainFbInclude").remove();
}
</script>