Load động các đoạn mã nhúng của facebook theo điều kiện

Haizz, đến khi thành công rồi vẫn còn gặp hạn. Toàn bộ phần code mà tôi giới thiệu bên dưới đã mất sạch do lỗi upload lên blog khi tắt máy tối qua. Thế là sáng nay phải ngồi viết lại. Cũng may là do gian nan nhiều quá nên…thuộc lòng :cuoibebung: , chỉ mất 2 phút để gõ như con vẹt 🙂 .

Kể từ khi các nhà mạng cấm facebook, tôi phát hiện thấy một điều bực mình các các nút “Like” trên bài viết, rồi “Like box” bị lỗi hiển thị rất xấu.

Load động các đoạn mã nhúng của facebook theo điều kiện

Hình minh hoạ bên trên cho thấy khi kết nối được với facebook (sử dụng Hotspot Shield) thì “Like box” hiển thị rất đẹp, nhưng khi không kết nối được thì nó hiển thị cái khung rất là mất mỹ quan đô thị và tôi ghét điều đó. Một điều đáng ghét nữa là khi không thể kết nối đến facebook, quá trình load trang rất lâu do một số thành phần phải đợi facebook load xong thì mới load được. Tình hình nghiêm trọng đến mức tôi nhớ là có một bạn đã comment và yêu cầu “anhhangxom ơi, anh gỡ mấy cái facebook ra đi bởi vì em truy cập thấy lâu quá !”

Kể từ đó, tôi đã tìm cách để sao cho các plugin của facebook (nút Like, LikeBox) chỉ load lên nếu phát hiện người dùng có thể kết nối đến facebook, ngược lại thì nó sẽ không load và không tạo ra các “lỗ hổng” to đùng như bạn thấy ở hình minh hoạ bên trên. Bài viết này là một tập hợp các xử lý nhiều vấn đề nhỏ nhưng khiến tôi phải tốn nhiều công sức mới thực hiện thành công :

– Làm sao để phát hiện người dùng có khả năng kết nối đến facebook hay không.
– Làm sao để ngắt kết nối đến facebook nếu nó thực hiện quá lâu.
– Làm thế nào để load hình vào một thẻ đã thiết kế sẵn trong html.
– Làm sao để biết được một tấm hình có được trình duyệt load thành công hay không.
– Làm thế nào để load các plugin của facebook chỉ sau khi toàn bộ trang đã được load.
– Làm thế nào để nhúng các iframe của facebook vào blog.
– Làm thế nào để load nút Like cho tất cả các bài viết từ một nơi.
….

Vấn đề đầu tiên và quan trọng nhất là làm thế nào để phát hiện được người dùng có khả năng kết nối đến facebook hay không. Đơn giản là nếu bạn truy cập được trang facebook.com thì có nghĩa là bạn có khả năng kết nối, ngược lại thì không. Vấn đề là phải để cho blog hoặc trang web của bạn hiểu được điều này. Tôi đã tìm hiểu nhiều cách làm trong PHP để biết có thể kết nối đến một địa chỉ web hay không, nhưng đáng tiếc là không được. Cuối cùng, tôi phải áp dụng một thủ thuật là : Cho trình duyệt load avatar-của-tui tại địa chỉ http://graph.facebook.com/100001225080368/picture trong khoảng thời gian 5 giây. Nếu trình duyệt load được hình thì có nghĩa là người dùng có khả năng kết nối với facebook, ngược lại thì không.
Bài viết này là cách load nút “Like” bên dưới mỗi bài viết đăng trên blog. Do tôi sử dụng iframe do facebook cung cấp nên vẫn còn một số hạn chế về mặt hiển thị. Ví dụ như “LikeBox” không hiển thị được avatar của những người đã like. Nút “Like” không hiển thị được tổng số người like ở ô kế bên. Nhưng như vậy đã là một thành công. Thời gian sắp tới sẽ cải tiến nó để đạt được 100% mong muốn 🙂 .

Như đã nói, bài viết này giúp hiển thị nút Like kế bên mỗi bài viết. Do đó, các bạn đặt đoạn mã bên dưới ở nơi cần đặt nút “Like”. Trong trường hợp của WordPress, tôi sẽ đặt ở đầu mỗi bài viết, cụ thể là sẽ chèn đoạn mã bên dưới vào nơi mong muốn trong 2 tập tin “index.php” và “single.php”

<iframe name=”<?php the_permalink() ?>” src=”” scrolling=”no” frameborder=”0″ style=”border:none; overflow:hidden; width:450px; height:24px;” allowTransparency=”true”></iframe>

Do nút like sẽ được load sau khi toàn bộ blog đã load xong, nên không thể gán đường dẫn cho thuộc tính “src” được vì như vậy trình duyệt sẽ kết nối đến facebook ngay lập tức. Do vậy, tôi sử dụng thuộc tính “name” của iframe để lưu lại đường dẫn của mỗi bài viết. Đoạn mã <?php the_permalink() ?> giúp tôi lấy được đường dẫn của các bài viết. Sau này, tôi sẽ cho tất cả các iframe ở đoạn code bên trên đồng loạt hiển thị nút Like (hoặc “lặn” luôn nếu không thể kết nối đến facebook) khi blog đã hoàn tất việc load trang.

Đoạn mã bên trên là do facebook cung cấp, nhưng tôi đã loại bỏ giá trị của thuộc tính “src” (phần đánh dấu ngoặc trong hình minh hoạ bên dưới) và thêm vào thuộc tính “name” :

Load động các đoạn mã nhúng của facebook theo điều kiện

Phần chuẩn bị cho nút “Like” đã xong, giờ đến lượt xử lý để load nó lên. Toàn bộ đoạn code bên dưới tôi đặt trong tập tin “sidebar.php” hoặc bạn đặt ở đâu thấy phù hợp là được. Tôi đã chú thích ở mỗi dòng code nên sẽ đăng luôn toàn bộ để tiết kiệm thời gian :

Load động các đoạn mã nhúng của facebook theo điều kiện

Vậy là xong. Nếu trình duyệt có khả năng kết nối với facebook (hoặc bạn đang dùng HotspotShield hoặc UltraSurf) thì bạn sẽ thấy mỗi bài viết trên anhhangxomonline.net đều xuất hiện nút Like, ngược lại thì không. Đồng thời, tốc độ load và xử lý của blog cũng nhẹ nhàng và êm ái hơn, không còn cái cảnh “quay, quay nữa, quay mãi” như hồi xưa :cuoibebung:

Load động các đoạn mã nhúng của facebook theo điều kiện

Rất vui nếu nhận được ý kiến đóng góp từ tất cả các hàng xóm. Thời gian tới sẽ cải tiến thêm để nó thực sự như mong muốn của tôi và chấm dứt những buổi thức khua dậy sớm để mò mẫm 🙂

À. Nếu bạn thích bài viết này thì đừng ngại bấm nút Like nhé :v_nguong2: , nếu bạn thấy nó xuất hiện :v_smile: .

11 Comments
  1. em vao dc fb nhung ko co nut like?????

  2. Hay quá. Để áp dụng xem sao :))

  3. À mà e kết nối đc face nhưng lạiko thấy nút like :-??

  4. Ây da, kết nối facebook được nhưng lại không thấy nút Like ? Vụ này lạ nha, anh đã test rất kỹ rồi mà. Nếu được em hãy thử clear hết cache của trình duyệt hoặc chạy trình duyệt ở chế độ riêng tư private thử xem. Bảo đảm nó hoạt động mà, mặc dù đoạn code bên trên có thay đổi chút ít 😀

  5. e vào dc facebook mà cũng chả thấy nút like đâu cả!:D

  6. […] thành cám ơn các bạn đã đọc tin. P/S: Link giải pháp của bạn Anh Hàng Xóm Load động các đoạn mã nhúng của facebook theo điều kiện | anhhangxom(^o^)nline Trả lời với trích […]

  7. chao pro nho pro co the huong dan cach load cac anh va ten cua cac nguoi like vao box html da thiet ke san. giong trong cua pro ko

  8. hy vọng anh cập nhật cho phiên bản fbml của face chứ hiện thời cũng ít web dùng iframe khi tích hợp nút like rồi

  9. Kỹ thuật này rất hay, hok biết anh fix lỗi vào đc FB mà vẫn load đc ảnh chưa

Gửi phản hồi