Home »

Hướng dẫn chèn Album ảnh từ Facebook vào Web, blogger, Blogspot

Thứ Năm, 3 tháng 4, 2014
Code chèn hình ảnh facebook vào web vào blogspot. Gần đây, một trong những độc giả của Chiến Lược Mới  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 Chiến Lược Mới 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).
Chèn hình ảnh facebook vào blogspot
Chèn hình ảnh facebook vào blogspot

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:
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 cách nhúng album ảnh trên facebook vào wb blogspot
Hướng dẫn chèn Album ảnh từ Facebook vào blogger, Blogspot
  1. Hướng dẫn cách làm
  2. Đăng nhập vào Blogger.
  3. Chọn mẫu (Template).
  4. 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.
  5. Nhấp chọn vào Chỉnh sửa HTML (Edit HTML).
  6. 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>

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.

Giờ thì xuất bản trang của bạn và xem thành quả nha.
Bạn nào không copy code được thi Download code về nhé: Xem và copy Code
Chúc bạn thành công!
Tags:

Comments[ 0 ]


Đăng nhận xét