Hiện nay Facebook một nguồn giúp tăng lưu lượng truy cập cho các web/blog. Đây là lý do tại sao các quản trị web tập trung nhiều hơn tới các liên kết trang web của họ với các Plugins của Facebook. Namkna đã từng giới thiệu làm thế nào để thêm khung bình luận của facebook vào blog, hộp Khuyến nghị Facebook và Facebook Fan Box trong Blogger. Gần đây, một trong những độc giả của namkna yêu cầu làm thế nào để tạo một thư viện ảnh từ Facebook với Jquey cho Blogger? Hôm nay, trong bài viết này namkna sẽ hướng dẫn các bạnl àm thế nào để tạo một thư viện ảnh từ Facebook với Jquey cho Blogger mà không cần phải truy cập vào trang blog của bạn (How to Create a jQuery Facebook Photo Gallery in Blogger).
Ảnh minh họa |
» JQuery Facebook Photo Gallery cho Blogger là gì?
Plugin này phát triển bởi mybloggerlab cho phép bạn xem và truy cập vào tất cả các Album chứa các hình ảnh trên trang Facebook của bạn ngay trên trang web của bạn mà không phải truy cập vào trang Facebook của bạn. Nó có thể truy cập tất cả các album công cộng (puplish) của bạn, nhưng nó chỉ hoạt động với Facebook Fanfage. Nó cho phép bạn tự do loại trừ bất kỳ album nào mà bạn không thích. Toàn bộ hệ thống hoạt động trên jQuery, vì vậy bạn có đủ lựa chọn để tùy chỉnh nó theo cách bạn muốn.
Bạn có thể xem demo bên dưới:VIEW DEMO
Trên đó, bạn có thể xem các hình ảnh trên trang trên facebook trong trang web của bạn thông qua chức năng Lightbox. Bạn có thể duyệt các album khác nhau và có thể quay trở lại nơi từ nơi bạn bắt đầu.
» Làm thế nào để thêm thư viện ảnh từ Facebook Page với Jquery cho blogger?
1- Đăng nhập vào Blogger.
2- Chọn mẫu (Template).
3- Sao lưu mẫu của bạn để đề phòng sảy ra lỗi khi áp dụng thủ thuật này.
4- Nhấp chọn vào Chỉnh sửa HTML (Edit HTML).
5- Thêm đoạn code bên dưới vào trước thẻ đóng </head>
<link media="all" href="http://fonts.googleapis.com/css?family=Shadows+Into+Light" rel="stylesheet" type="text/css" /> <link media="all" href="https://googledrive.com/host/0B-vz7n1QSdEfWE1Wbmxtc2FYN1k" rel="stylesheet" type="text/css" /> <!-- Scripts --> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript" src="https://googledrive.com/host/0B-vz7n1QSdEfRkNxSXVfYjlRU3c"></script> <script type="text/javascript" src="https://googledrive.com/host/0B-vz7n1QSdEfUDFxcEpsM1ZSTjQ"></script> <script type="text/javascript" src="https://googledrive.com/host/0B-vz7n1QSdEfaHU3dTFPallrU1E"></script> <script type="text/javascript" src="https://googledrive.com/host/0B-vz7n1QSdEfUFhSTlNaaU5tTkE"></script> <script type="text/javascript" src="https://googledrive.com/host/0B-vz7n1QSdEfeVlQNnBDZGhtXzQ"></script>
- Để dùng thủ thuật này lâu dài bạn hãy tải các file CSS và Javascripts bên trên về Tại đây và Upload lên host riêng nha. Nếu chưa có host bạn có thể dùng host miễn của Google Drive Tại Đây.
6- Lưu mẫu lại và tiến hành các bước tiếp theo.» Xác định ID trang facebook của bạn.
7. Bây giờ để tọa một thư viện ảnh bạn phải xác định được ID hồ sơ trang Facebook của bạn. Nếu chưa biết bạn có thể dùng công cụ sau: http://findmyfacebookid.com/
- Hãy nhớ ID mà bạn lấy được vì nó sẽ cần thiết cho bước tiếp theo.
» Tạo trang thư viện ảnh của bạn.
8. Tiếp theo là chọn vị trí để đặt thư viện ảnh của bạn. Bạn có thể đặt trong một tiện ích HTML/Javascripts, trong một bài viết hay trong một trang của bạn. Trng bài viết này mình sẽ hướng dẫn các bạn đặt trong một trang của blogspot với các trang khác các bạn làm tương tự.
- Vào Trang (Page) => Chọn Trang mới (New page)=> Trang trống (Page Blank) và dán đoạn code bên dưới vào nha:
<script> $(document).ready(function ($) { $('#FB_Album_Frame').FB_Album({ facebookID: 'Your-Page-ID', responsiveGallery: false, fixedWidth: 980 }); }); </script> <div id="FB_Album_Frame"></div>
Tùy chỉnh:
- Thay Your-Page-ID thành ID trang Facebook mà bạn đã xác đinh được ở trên bước 7.
- fixedWidth: 980 là độ rộng trang thư viện ảnh của mình chỉnh lại 980 cho phù hợp với trang web của bạn tránh tình trạnh ảnh tràn ra khỏi khung bài viết nha.
9- Giờ thì xuất bản trang của bạn và xem thành quả nha.
Hy vọng qua bài viết này bạn sẽ hiểu cách làm thế nào để tạo một trang thư viện ảnh từ trang facebook của bạn vào blog. Hãy cho mình biết nếu bạn gặp bất cứ khó khăn gì khi áp dụng thủ thuật này nha.
Nhận xét
em bóc tem quả này nhé :D
Trả lờiXóaOke nếu có khó khăn gì khi áp dụng thì cứ cho anh biết nha.
XóaMình download CSS và Javascripts toàn bị lỗi Bandwith là sao nhỉ, thông báo như sau: "The user hosting this content is out of bandwidth. "
Trả lờiXóaBạn có thể tải theo link sau: https://app.box.com/s/5dcv2xhzc58v912ea1gl
XóaHoặc tải bằng cách cop link của file cần tải dán vào trình IDM để tải nha,
Nam ơi, cho mình hỏi sao lúc đầu mình tạo trang thì nó có mấy cái khung comment đầy đủ, nhưng sau đó nó biến mất, bây giờ có cái có, có cái không, mình không hiểu tại sao, Nam có cách khắc phục giúp mình với nhé. Thanks Nam. Web mình: http://www.yeutienganh123.com/
Trả lờiXóaVào chỉnh sửa trang. Trong mỗi phần cài đặt khi đang trang đều có mục có cho đăng nhận xét hay không đóa.
XóaNhận xét này đã bị quản trị viên blog xóa.
Trả lờiXóaNhận xét này đã bị quản trị viên blog xóa.
Trả lờiXóaNhận xét này đã bị quản trị viên blog xóa.
Trả lờiXóae chỉ có thể chạy 1 trong 2 thứ
Trả lờiXóa1. là ứng dụng slide show http://doppiocoffeevn.blogspot.com/
2. album ảnh từ facebook http://doppiocoffeevn.blogspot.com/p/hinh-anh_13.html
e tìm hiểu là dư dòng src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
e đã xóa 1 dòng nhưng cũng chỉ hiển thị được 1 trong 2 cái trên. mong a hướng dẫn e
yahoo: tienduc_911
Đúng rồi nó trùng một số id cà class nên nó chỉ có thể chạy một trong 2 thôi bạn ak.
Xóaa có thể cho e hướng giải quyết sao cho nó chạy hết được không a
XóaNam ơi, cho mình hỏi cái code ô comment ở footer của cậu đó, mình làm được rồi, mà sao nó chỉ update chỉ những comment từ lúc làm, nó ko update toàn bộ comment trong blog là sao Nam. Mình muốn nó update toàn bộ comment luôn ấy. Giúp mình nha. Blog mình: http://www.yeutienganh123.com/ Cám ơn Nam nhiều.
Trả lờiXóaNóp rút feed nên chỉ gọi được một số lượn comment nhất định gần đây nhất thôi nha bạn, để gọi toàn bộ là không thể vì commet fesd không hiển thị nhiều đâu.
XóaBạn ơi, cho mình sao mình làm rồi mà nó chỉ hiện ra 9 album thôi vây, thêm 1 điều nữa là mình muốn thay đổi số lượng hiện thị ở các hàng (hiện tại là mỗi hàng 2 album, mình muốn là 3) thì phải làm thế nào. Rất mong bạn giúp đỡ
Trả lờiXóa1- Nó chỉ hiện tổng số album trên trang facwe của bạn thôi, nó không hiện nhiều hơn đâu
Xóa2, Muốn hiển hị 3 cái trên một hàng thì độ rộng phần chèn album phải đủ rộng bạn ak,
À, nó hiện ít hơn rất nhiều bạn à, nên mình mới hỏi vậy
XóaSau gần 6h ngồi tìm hiểu thì mình đã giải quyết đc mọi vấn đề. Mình ko thử cách này mà thử trên website riêng thì có vài cái rút ra như sau :
Trả lờiXóa- chỉ áp dụng đc vs Album Fanpage
- chỉ load tối đa 9 albums và mỗi album load tối đa 20 ảnh
- các functions thiếu rất nhiều và lỗi
Mình đã gq đc tất cả. Ai quan tâm thì pm qua mail mình sẽ hướng dẫn. vidden9999@gmail.com
anh ơi cho em hỏi một chút là nếu muốn chèn từng album riêng vào blog thì làm sao dc ạh
Trả lờiXóaEm đã thử nhưng nó bị như thế này, anh xem hộ em lỗi tại vì sao vậy?
Trả lờiXóahttp://www.giaydankinhnnd.com/p/blog-page.html
Do chền thẳng vào HTML của trang do vậy khi chèn vào không được chuyển qua lại giữa 2 tab là VIẾT và HTML nếu không sẽ bị lỗi như vậy.
Xóasao không hiện review hình trong album nhỉ
Trả lờiXóa