Chèn fanpage facebook vào blogspot mới nhất

Cập nhật: Chèn fanpage vào blogspot 2016 (Bản mới nhất V2.7| Chèn bằng thẻ IFrame đơn giản và nhanh chóng hơn).

Lưu ý: Nên xem và thực hiện theo video để không phải gặp vấn đề về các bản cập nhật của Facebook nhé các bạn! Admin - Lê Vương Nam (thông báo ngày 26/10/2016).


Mặc dù cách chèn fanpage facebook vào blogspot đã được rất nhiều blogger hướng dẫn trên mạng. Tuy nhiên, thời gian gần đây Facebook nâng cấp plugin mới (cụ thể là Graph API v2.3) nên đa số các bạn đều không thực hiện được và hầu hết vướng 2 lỗi sau:
  • Không tìm thấy Tab IFRAME khi Get Code
tab-iframe
Không tìm thấy tab Iframe
  • Lỗi khi phân tích cú pháp XML, dòng..., cột...: The reference to entity "version" must end with the ';' delimiter.
loi-chen-fanpage-facebook
Lỗi chèn fanpage facebook

Như hướng dẫn trước đây thì các bạn sẽ truy cập https://developers.facebook.com/docs/plugins/like-box-for-pages để lấy Code, nhưng giờ bạn sẽ thấy thông báo sau:
loi-chen-fanpage-facebook
Với việc phát hành của Graph API v2.3 , các plugin như Box là bị phản đối. Vui lòng sử dụng mới trang Plugin thay thế. Trang Plugin cho phép bạn nhúng một nguồn cấp dữ liệu đơn giản của nội dung từ một trang vào trang web của bạn. 
Nếu bạn không tự nâng cấp lên các trang Plugin, Like Box thực hiện các plugin của bạn sẽ tự động rơi trở lại trang các Plugin của 23 tháng 6 năm 2015 . 
Các Like Box là một phiên bản đặc biệt của nút Like được thiết kế chỉ dành cho Facebook Pages. Nó cho phép các quản trị viên để thúc đẩy trang của họ và nhúng một nguồn cấp dữ liệu đơn giản của nội dung từ một trang vào các trang web khác.
Đến đây chắc có lẽ các bạn cũng đã hiểu vì sao lại bị vướng 2 lỗi trên phải không nào! Còn 1 vấn đề nữa đó là các bạn sẽ thấy những trang đã chèn fanpage vào blogspot trước đó vẫn chạy bình thường. Tuy nhiên, giao diện sẽ không đẹp bằng plugin mới này và "nguồn cấp dữ liệu" cũng sẽ không đơn giản bằng Graph API v2.3.

Những thông tin trên nhằm giúp các bạn hiểu rõ lý do tại sao chèn fanpage facebook vào blogspot bị lỗi. Giờ thì quay lại nội dung chính của bài. Mình sẽ hướng dẫn các bạn cách chèn fanpage facebook vào blogspot không bị lỗi.

Chèn fanpage facebook vào blogspot

Bước 1: Các bạn truy cập link sau: https://developers.facebook.com/docs/plugins/page-plugin. Giao diện sẽ như thế này.

code-chen-fanpage-facebook-vao-blogspot

Bước 2: Cuộn trang xuống dưới và thiết lập như hướng dẫn trong hình:
thiet-lap-fanpage-facebook
Chú thích:
  • Facebook Page URL: dán URL của fanpage các bạn tại đây. Ví dụ như của mình là: https://www.facebook.com/chuyennhac.
  • Width: chiều rộng hiển thị của fanpage.
  • Height: chiều cao hiển thị của fanpage.
  • Adapt to plugin container width: Chiều rộng thích ứng với mặc định.
  • Show Friend's Faces: Hiện faces của bạn bè.
  • Use Small Header: Sử dụng tiêu đề nhỏ.
  • Hide Cover Photo: Ẩn ảnh bìa.
  • Show Page Posts: Hiển thị trang viết.
Các bạn cứ tích vào thử từng cái, chỉnh sửa chiều rộng và chiều cao phù hợp với blog của các bạn, sau khi đã hài lòng thì tiếp tục bước 3.

Bước 3: Cuộn trang xuống dưới, nhấn vào Get Code (Lấy mã). Facebook sẽ hiện một bảng như sau:

code-chen-fanpage-facebook-vao-blogspot

Bước 4: Các bạn copy phần code đầu tiên (phần mã code dưới dòng 1.Include the JavaScript SDK on your page once, ideally right after the opening <body> tag.).

Vào Mẫu-> Chỉnh sửa HTML-> Nhấp vào vị trí bất kỳ trong khung và nhấn tổ hợp phím "Ctrl+F"-> Một khung tìm kiếm hiện ra các bạn gõ "<body>" xong Enter (Nếu không thấy thì gõ "<body"). Giờ thì các bạn sẽ dán đoạn Code vừa copy ở trên vào sau thẻ <body> (hoặc <body class='main-body'> tùy giao diện). Không rõ thì thực hiện theo hình nhé!
chen-fanpage-facebook-vao-blogspot-b1
Tại trang quản trị blogger click chọn Mẫu

chen-fanpage-facebook-vao-blogspot-b2
Chọn Chỉnh sữa HTML
chen-fanpage-facebook-vao-blogspot-b3
Tìm thẻ <body> và chèn đoạn Code 1 vào phía sau
Tiếp tục nhấn "Lưu mẫu" sẽ thấy thông báo lỗi ngay dòng "...&version=v2.3"(bước này rất nhiều bạn đang mắc phải). Đừng lo, giờ các bạn chỉ cần thêm vào trước chữ version dòng sau "amp;", đoạn code sau khi thay có dạng như thế này "...&amp;version=v2.3". Lưu lại một lần nữa là ok!

chen-fanpage-facebook-vao-blogspot-b4
Thêm amp; vào sau dấu &
Bước 5: Quay lại trang lấy code fanpage Copy đoạn code còn lại (phần mã code dưới dòng 2. Place the code for your plugin wherever you want the plugin to appear on your page.)

Vào Bố cục-> Thêm tiện ích-> HTML/Javascript-> Dán đoạn code vừa copy vào khung nội dung, khung tiêu đề thì các bạn nhập tùy thích. Thực hiện theo hình

chen-fanpage-facebook-vao-blogspot-b5
Quay lại trang quản trị chọn bố cục

chen-fanpage-facebook-vao-blogspot-b6
Chọn thêm tiện ích

chen-fanpage-facebook-vao-blogspot-b7
Tìm và chọn tiện ích HTML/Javascript

chen-fanpage-facebook-vao-blogspot-b8
Chèn đoạn Code còn lại (Code 2) vào khung nội dung
Giờ thì lưu lại và xem thành quả nhé! Vì bài viết dành cho những bạn mới tìm hiểu về blogspot nên có phần hơi dài dòng một chút. Những bạn nào đã rành rồi thì chỉ cần lưu ý phần "&amp;" là ok.

Bạn nào không thực hiện được hoặc bị vướng ở bước nào thì có thể để lại comment phía dưới, mình sẽ hướng dẫn cụ thể.

11 comments:

  1. Cám ơn Vương Nam, đã làm thành công

    ReplyDelete
  2. Cảm ơn bác nhiều, e đã làm được <3

    ReplyDelete
  3. admin ơi em không tìm thấy thẻ body trong blog của em http://gfreco.blogspot.com. Giúp em với ạ

    ReplyDelete
  4. < body expr:class='"loading" + data:blog.mobileClass'>
    < div class='outer-wrapper'>
    em chỉ có đoạn code này

    ReplyDelete
  5. sao mình làm lại không đc vậy bạn . Hình như lên version 2.6 rồi !

    ReplyDelete
    Replies
    1. Hôm nay là 19/07/2016 mình vừa mới thử lại vẫn được bình thường nhé bạn. Cập nhật thì sẽ làm theo cách khác chứ không phải là cách này không được. Bạn có thể xem kỹ lại các bước.

      Delete
  6. Xin chào ! Admin có làm blog hướng dẫn chèn quảng cáo google adsen lên blogspot ko ạ ?

    ReplyDelete
    Replies
    1. Trong blogspot bạn vào bố cục-> thêm tiện ích google adsense vào vị trí bạn muốn là được (Tất nhiên là blog bạn đã đăng ký thành công adsense). Nếu bạn muốn chèn adsense vào những vị trí trong bài viết thì có thể tìm kiếm trên mạng, có rất nhiều bài hướng dẫn.

      Delete
  7. Hay quá mình đã chèn thành công cho blog của mình rồi nè

    ReplyDelete