Cách chèn Facebook SDK vào blogspot mới nhất

Bạn có một trang web tất nhiên bạn cần phải tạo ID ứng dụng mới sau đó thêm URL trang web của bạn vào ứng dụng, đây là yêu cầu bắt buộc để Facebook không chặn trang web của bạn khi ai đó chia sẻ bài viết của bạn lên Facebook. Tuy nhiên để tích hợp các plugin xã hội như nút like, share, comments.v.v.. thì bạn cần phải thêm một bước chèn Facebook SDK vào theme của bạn.

Cụ thể, bạn sẽ chèn Facebook SDK ngay trước thẻ đóng </body> trong theme của bạn, mình hướng dẫn các bạn 3 phương pháp chèn Facebook SDK vào blogspot mới nhất, bạn có thể sử dụng một trong ba cách mà không làm ảnh hưởng đến hiệu suất tải trang.

Chèn Facebook SDK trước thẻ đóng </body> trong theme

Phương pháp 1: Tải script trực tiếp không đồng bộ bằng thuộc tính async, defer

<!-- Load Facebook SDK for JavaScript -->

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

<script async="async" defer="defer" crossorigin="anonymous" src="https://connect.facebook.net/vi_VN/sdk.js#xfbml=1&version=v5.0&appId=<APP_ID>&autoLogAppEvents=1"></script>

Phương pháp 2: Tải script theo sự kiện scroll

<!-- Load Facebook SDK for JavaScript -->

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

<script>//<![CDATA[

  var fired=false

  window.addEventListener('scroll',function(){

    if((document.documentElement.scrollTop!=0&&fired===false)||(document.body.scrollTop!=0&&fired===false)){

      (function(){

        var an=document.createElement('script')

        an.async=true;an.src='https://connect.facebook.net/vi_VN/sdk.js#xfbml=1&version=v5.0&appId=<APP_ID>&autoLogAppEvents=1'

        var sc=document.getElementsByTagName('script')[0]

        sc.parentNode.insertBefore(an,sc)

      })();

      fired=true

    }

  },true)

//]]></script>

Phương pháp 3: Kết hợp sự kiện scroll và setTimeout

<!-- Load Facebook SDK for JavaScript -->

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

<script>//<![CDATA[

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

    var is_load=0

    function loadjs(){

      if(is_load==0){

        is_load=1

        (function(){

          var an=document.createElement('script')

          an.async=true;an.src='https://connect.facebook.net/vi_VN/sdk.js#xfbml=1&version=v5.0&appId=<APP_ID>&autoLogAppEvents=1'

          var sc=document.getElementsByTagName('script')[0]

          sc.parentNode.insertBefore(an,sc)

        })();

      }

    }

    // Sự kiện scroll

    window.addEventListener('scroll',function(){loadjs()})

    // Nếu không scroll bắt đầu load sau 3 giây

    setTimeout(function(){loadjs()},3000)

  })

//]]></script>

Các bạn nhớ thay <APP_ID> bằng ID ứng dụng của trang web bạn, xóa dòng &autoLogAppEvents=1 nếu muốn loại bỏ mã theo dõi Facebook. Ngoài ra, bạn nên thêm điều kiện trang nếu chỉ muốn tải Facebook SDK tại một trang nhất định, giả sử bạn chỉ muốn tải Facebook SDK cho những trang bài viết, bạn sẽ thêm điều kiện như sau:

<b:if cond='data:view.isPost'>

  Chèn Facebook SDK trong này

</b:if>