Facebook like box in responsive popup

If you're wondering how to create welcome popup modal window with feature called "facebook like box" - this guide is what you're looking for. In this article i will describe step by step whole process. The effect of this guide will be responsive modal window that will appear once someone will connect to your website and inside this window module will display popular facebook page plugin   (old name: facebook like box). Popup will appear only one time. Example of this responsive window you can find below:

How to create popup with facebook like box ?

Whole guide is based on responsive popup pro module - it is necessary. So if you doesnt have it - download and install it in your shop. Then open module configuration page and hit button to create new popup. To create exactly the same popup as above, please fill out popup creation form with these options:

Facebook like box widget code

Now we have to prepare facebook likebox widget code. All that we have to do is copy to clipoboard code below

    <div id="fb-root"></div> <script type="mce-text/javascript">// <![CDATA[ (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.7";
    fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); // ]]></script> <div class="fb-page"
    data-width="180" data-href="https://www.facebook.com/MyPresta" data-small-header="false" data-adapt-container-width="true"
    data-hide-cover="false" data-show-facepile="true"><div class="fb-xfbml-parse-ignore"></div></div>

Now back to popup pro configuration page, and turn on "Desktop View" section, where you can define width and height of the popup, and where you can define popup contents. Define Popup width to 516 and Popup height to 234.  Inside rich text editor turn on source code tool and paste the code you copied from above. You can see reference below:

Now you can save changes and you will have popup window with MyPresta fanpage . If you want modal window with like box of your facebook page - inside the code you copied change the "data-href" param to link to your facebook fanpage. I mean:

    data-href="https://www.facebook.com/MyPresta"

to:

    data-href="https://www.facebook.com/Your-Fanpage-Here"

How to create responsive popups?

As you probably noticed, popup pro module allows to create responsive popups with different contents for selected device type. Module configuration page - there where you define settings of the popup - contains 3 sections related to contents. Desktop view, Tablet view and Mobile View. Above we defined desktop view, if you want to display popup also on other deviced you have to define contents for other types. Below you can find the best settings and code for like box for each device type:

Tablet view:

Popup width: 516, Popup height: 234, and code to copy-paste:

    <div id="fb-root"></div> <script type="mce-text/javascript">// <![CDATA[ (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.7";
    fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); // ]]></script> 
    <div class="fb-page" data-width="500" data-href="https://www.facebook.com/MyPresta" data-small-header="false" data-adapt-container-width="true"
    data-hide-cover="false" data-show-facepile="true"><div class="fb-xfbml-parse-ignore"></div></div>

Mobile view

Popup width: 196, popup height: 247, and code to copy-paste:

    <div id="fb-root"></div> <script type="mce-text/javascript">// <![CDATA[ (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.7";
    fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); // ]]></script> 
    <div class="fb-page" data-width="180" data-href="https://www.facebook.com/MyPresta" data-small-header="false" data-adapt-container-width="true"
    data-hide-cover="false" data-show-facepile="true"><div class="fb-xfbml-parse-ignore"></div></div>