Popup Facebook Like & Share Blogger Widget

Hello, guys, I have shared many blogger widgets on this blog which are about posts on bloggers like recent posts widgets or random posts widgets or any other but this time I am going to share with you other blogger widgets that I haven't shared before.

This is the first time when I am sharing with you Facebook like and share widget for bloggers.

Everyone wants to get likes on Facebook pages and this is not too much easy to get likes because for that you need an audience.

If you are having a website and you have an audience then you can convert that audience into your followers on Facebook.

By using this popup Facebook like and share blogger widget you can get likes on your Facebook page even you can also get shares on Facebook

This blogger widget looks very beautiful and shows up when your webpage is completely loaded.

The bad effect of this widget on your blog will be that your website will take a little bit longer to load because this widget has to load external files from Facebook that's why it needs time.

I always try to make it easy for you to install different kinds of widgets on your blogger blog easily and this time also I have made it easy for you to install this blogger widget into your blogger blog.

So if you want to install this popup Facebook like in share blogger widget into your blogger blog when you simply have to follow the steps which are provided below and do as it is said without skipping any step.

Steps to follow:

1. Go to Blogger Dashboard
2. Go to Theme/Template Section
3. Click Edit HTML
4. Now Search for </style>

To search anything in blogger template section press Ctrl+F and then type term to search and press enter.

5. Now copy the code provided below and paste it just above </style>.

<style>
    #fb-fanbox {
        display: none;
        background: rgba(0, 0, 0, 0.9);
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 99999;
        -webkit-transform: translateZ(0);
    }

    #fb-boxclose {
        width: 100%;
        height: 100%;
        -webkit-transform: translateZ(0);
    }

    #fb-boxview {
        background: #fff;
        border: 1px solid #fff;
        width: 300px;
        height: 230px;
        position: absolute;
        top: 33%;
        left: 37%;
        border-radius: 3px;
    }

    #fb-closebox {
        float: right;
        cursor: pointer;
        position: absolute;
        right: 0px;
        top: 5px;
    }

    #fb-closebox:before {
        content: "X";
        background: #fff;
        color: #000;
        font-weight: 400;
        font-size: 15px;
        font-family: inherit;
        padding: 5px 8px;
    }

    #fb-boxlink,
    #fb-boxlink a.visited,
    #fb-boxlink a,
    #fb-boxlink a:hover {
        color: #aaa;
        font-size: 9px;
        text-decoration: none;
        text-align: center;
        padding: 5px;
    }
</style>
<script>
    //<![CDATA[
    jQuery.cookie = function (key, value, options) {
        if (arguments.length > 1 && String(value) !== "[object Object]") {
            options = jQuery.extend({}, options);
            if (value === null || value === undefined) {
                options.expires = -1;
            }
            if (typeof options.expires === "number") {
                var days = options.expires,
                    t = (options.expires = new Date());
                t.setDate(t.getDate() + days);
            }
            value = String(value);
            return (document.cookie = [
                encodeURIComponent(key),
                "=",
                options.raw ? value : encodeURIComponent(value),
                options.expires ? "; expires=" + options.expires.toUTCString() : "", // use expires attribute, max-age is not supported by IE
                options.path ? "; path=" + options.path : "",
                options.domain ? "; domain=" + options.domain : "",
                options.secure ? "; secure" : "",
            ].join(""));
        }
        options = value || {};
        var result,
            decode = options.raw
                ? function (s) {
                      return s;
                  }
                : decodeURIComponent;
        return (result = new RegExp("(?:^|; )" + encodeURIComponent(key) + "=([^;]*)").exec(document.cookie)) ? decode(result[1]) : null;
    };

    jQuery(document).ready(function ($) {
        if ($.cookie("popup_facebook_box") != "yes") {
            $("#fb-fanbox").delay(3000).fadeIn("fast");
            $("#fb-closebox, #fb-boxclose").click(function () {
                $("#fb-fanbox").stop().fadeOut("fast");
            });
        }
    });
    //]]>
</script>

6. Now search for <body>
7. Copy the code provided below and paste it just below the <body> tag.

<div id="fb-fanbox">
    <div id="fb-boxclose"></div>
    <div id="fb-boxview">
        <div id="fb-closebox"></div>
        <iframe
            allowtransparency="true"
            frameborder="0"
            scrolling="no"
            src="https://www.facebook.com/plugins/likebox.php?
href=https://www.facebook.com/softwebtutsofficial&width=300&height=255&colorscheme=light&show_faces=true&show_border=false&stream=false&header=false"
            style="border: none; overflow: hidden; width: 339px; height: 200px;"
        ></iframe>
    </div>
</div>

You also need to add jQuery Library in your site if it is not added.

8. Save Theme/Template

Here are some configuration settings that you have to configure in the above code without configuring them this widget will not work properly in your blogger blog.

So if you want to make this widget work properly in your blogger blog then you have to simply replace the page name.

The page name is highlighted you just have to replace it with your page name.

For example, in the above, I have used my page name softwebtutsofficial and you have to replace it with your page name so that your Facebook page will be loaded in this widget.

Conclusion:

So here the conclusion comes and I hope that you will like this Facebook popup share and like the blogger widget.

So if you want to get Facebook page likes then install this widget into your blogger blog now and start getting Facebook page likes easily from your website if it has an audience.