Chèn Album ảnh từ Facebook Page vào blogger

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.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).

» 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.