Hướng dẫn cách thêm Facebook vào Blogspot không làm ảnh hưởng đến tốc độ tải trang mới nhất

Cách thêm Facebook vào Blogspot không làm ảnh hưởng đến tốc độ tải trang, tối ưu trên PageSpeed Insights.

Mục đích của việc liên kết facebook cho blogspot là để thêm Fanpage vào web, thêm nút like, chia sẻ, comment... cho blogspot.
Việc làm này ít nhiều cũng sẽ làm ảnh hưởng đến tốc độ tải trang của các bạn.
Nhưng nếu làm theo cách sau đây sẽ phần nào khắc phục được vấn đề trên.

1. Xóa hết các đoạn script của Facebook có trong blogspot

Các bạn có thể vào trình chỉnh sửa html ấn Ctrl + F và gõ từ khóa Facebook để tìm các đoạn code của nó.

Ví dụ: 

<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/en_US/sdk.js#xfbml=1&version=v2.5";

  fjs.parentNode.insertBefore(js, fjs);

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

//]]>

</script>

2. Thêm code sau vào Blog:

- Đăng nhập vào blog
- Chọn mẫu (Template)
- Chọn chỉnh sửa HTML (Edit HTML)
- Copy code sau dán trước thẻ đóng </body>

<div id='fb-root'></div>
<script>
    window.addEventListener('load', function() {
        var is_load = 0
        function loadfb() {
            if (is_load == 0) {
                is_load = 1
                var an = document.createElement('script')
                an.async = true;
                an.src = 'https://connect.facebook.net/vi_VN/sdk.js#xfbml=1&amp;version=v6.0&amp;appId=196084225087380'
                var sc = document.getElementsByTagName('script')[0]
                sc.parentNode.insertBefore(an, sc)
            }
        }
        window.addEventListener('scroll', function() {
            loadfb()
        })
    })
</script>

Thay đoạn mã màu đỏ bằng AppID Facebook của bạn .
Các bạn có thể truy cập trang https://developers.facebook.com tạo ứng dụng và lấy ID.

3. Thêm các đoạn mã cho Facebook

Tìm một trong các đoạn code như sau:

<div class='post-footer'>

hoặc:

<div class='post-footer-line post-footer-line-1'>

hoặc:

<div class='post-footer-line post-footer-line-2'>

hoặc:

<div class='post-footer-line post-footer-line-3'>

Lưu ý: Mỗi đoạn cod trên đều có 2 đoạn giống hệt nhau và chỉ có 1 đoạn có tác dụng, các bạn hãy thử lần lượt khi nào được thì thôi.

Tiếp theo dán vào sau các đoạn mã trên bằng một trong các đoạn code sau:

- Khung bình luận:

<style>
.fb_iframe_widget_fluid_desktop iframe {
    min-width: 100% !important;
}
</style>

hoặc:

<div class="fb-comments" expr:href='data:post.url' data-width="100%" data-numposts="5"></div>

- Nút Like và Share:

<div class="fb-like" expr:href='data:post.url' data-width="" data-layout="button" data-action="like" data-size="small" data-share="true"></div>