Tạo widget Fanpage cho blogspot

Bài viết này mình hướng dẫn các bạn cách Tạo widget Fanpage cho blogspot đơn giản, đẹp mắt. Widget Fanpage sẽ nằm cố định bên phải blog của các bạn, khi chúng ta click vào nó thì hiện thị widget chứa Fanpage Facebook.

Các bạn có thể xem demo trên bài viết này

Cách làm đơn giản là bạn chỉ cần copy toàn bộ code bên dưới dán trước thẻ đóng </body> (lưu ý là dán trước hàng </body>)

<style>

  /*<![CDATA[*/

.fanpager-widget{height:auto;width:0;position:fixed;right:0;top:40%;z-index:999;-webkit-transition:all 0.35s ease;-o-transition:all 0.35s ease;transition:all 0.35s ease;-webkit-transform:translateX(0);-ms-transform:translateX(0);-o-transform:translateX(0);transform:translateX(0)}

.fanpager-widget.open_sidefanpage{-webkit-transform:translateX(0);-ms-transform:translateX(0);-o-transform:translateX(0);transform:translateX(0);width:340px}

.fanpager-widget .wrap{position:relative}

.fanpager-widget .wrap .title_fb{width:152px;display:inline-block;font-size:16px;font-family:"Roboto",sans-serif;padding:0 25px;line-height:45px;height:45px;background:#3b5999;transform:rotate(-90deg);-webkit-transform:rotate(-90deg);-moz-transform:rotate(-90deg);color:#fff;position:absolute;left:-98px;top:65px;cursor:pointer}

.fanpager-widget .wrap .title_fb span{float:left;padding-left:30px;position:relative;cursor:pointer}

.fanpager-widget .wrap .title_fb span i{position:absolute;top:15px;left:0}

.fanpager-widget .wrap .fb_iframe_widget{width:auto}

.fanpager-widget .wrap .fb_iframe_widget span{max-height:130px;height:130px!important}

.fanpager-widget .wrap .fb_iframe_widget iframe{width:100%!important;height:100%!important}

.fanpager-widget .wrap .fb_iframe_widget{display:inline-block;position:absolute;top:12px;border:solid 10.5px #3b5999;border-left:none;border-right:none}

  /*]]>*/

</style>

<div class='fanpager-widget'>

  <div class='wrap'>

    <div class='title_fb'><span><i class='fab fa-facebook-square'></i>Facebook</span></div>

    <div class='fb-page' data-adapt-container-width='true' data-height='220' data-hide-cover='false' data-href='https://www.facebook.com/hoablogger' data-show-facepile='true' data-small-header='false' data-tabs='timeline'>

      <div class='fb-xfbml-parse-ignore'>

        <blockquote cite='https://www.facebook.com/hoablogger'>

          <a href='https://www.facebook.com/hoablogger'>Facebook</a>

        </blockquote>

      </div>

    </div>

  </div>

</div>

<div id='fb-root'></div>

<script>

  //<![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/vi_VN/sdk.js#xfbml=1&version=v2.6";

    fjs.parentNode.insertBefore(js, fjs);

  }(document, 'script', 'facebook-jssdk'));

  window.addEventListener("load", function() {

    $('.fanpager-widget').click(function(e) {

      e.stopPropagation();

      $(this).toggleClass('open_sidefanpage');

    });

    $("body").click(function() {

      $(".fanpager-widget").removeClass('open_sidefanpage');

    })

  })

  //]]>

</script>

Các bạn đổi lại link trên thành link fanpage của bạn và lưu lại là xong, nếu cần hỗ trợ hãy để lại nhận xét ở bài viết này.

Blogspot phải sử dụng thư viện fontawesome, nếu blog của bạn có dùng thì bỏ qua bước này, nếu chưa có thì copy dán trước thẻ đóng </body>

<script>

  //<![CDATA[ 

  function loadCSS(e, t, n) {

    "use strict";

    var i = window.document.createElement("link");

    var o = t || window.document.getElementsByTagName("footer")[0];

    i.rel = "stylesheet";

    i.href = e;

    i.media = "only x";

    o.parentNode.insertBefore(i, o);

    setTimeout(function() {

      i.media = n || "all"

    })

  }

  loadCSS("https://use.fontawesome.com/releases/v5.7.2/css/all.css");

  //]]> 

</script>

Facebook

Facebook