facebook api
TRANSCRIPT
FACEBOOK API
1. Like Button:- Là cách nhanh nhất để chia sẻ nội dung một trang trên trang face của họ. Bản
thân nút Like cũng cho biết số người like trang đó. Ngoài ra, bạn cũng có thể đăng các comment khi like trang đó.
- Đoạn mã JavaScript:
- Đoạn mã div hiển thị nội dung:
- Kết quả:
- Trong đó:o Data-href: đường URL để likeo Data-send: có bao gồm nút send đi kèm nút like hay không.o Data-layout: có 3 tùy chọn sau:
Standard: Thể hiện chữ nằm bên phải và ảnh của người dùng nằm phía dưới. Chiều rộng tối thiểu là 225px, tối thiểu sẽ tăng lên 40px nếu action được yêu cầu và tăng lên 60px nếu có thêm nút send. Chiều rộng mặc định: 450px. Chiều cao 35px nếu không có ảnh người dùng và 80px nếu có ảnh người dùng.
Button_count: thể hiện số lượt like nằm bên phải button. Chiều rộng tối thiểu là 90px, chiều rộng mặc định là 90px, chiều cao là 20px.
Box_count: thể hiện số lượt like nằm phía dưới button, chiều rộng tối thiểu 55px, chiều rộng mặc định là 55px, chiều cao là 65px.
o Data-show-face : chỉ định có hiển thị hình ảnh người dùng hay không (chỉ dùng cho standard-layout). Bạn phải kích hoạt chức năng này trên child-directed sites.
o Data-width: chiều rộng của nút Like.o Data-action: thể hiện hành động sẽ hiện ra: like hoặc recommendo Data-font: font chữ sẽ thể hiện ra, tùy chọn bao gồm: 'arial', 'lucida
grande', 'segoe ui', 'tahoma', 'trebuchet ms', 'verdana'.
o Data-colorscheme: thể hiện màu cho button: dark hoặc light.o Ref: một nhãn để theo dõi các thông tin chuyển tới, ít hơn 50 kí tự, có
thể chứa các kí tự alphanumberic, dấu chấm câu, hoặc các dấu như +/=-.:_ Ref chứa 2 tham số chính để thêm vào phần theo dõi thông tin khi người dùng click vào link
Fb_ref: Tham số ref. Fb_source: thể hiện loại sự kiện người dùng thao tác ('home',
'profile', 'search', 'ticker', 'tickerdialog' or 'other') và các loại sự kiện xảy ra ('oneline' or 'multiline') , nhấn mạnh với 1 gạch dưới
o kid_directed_site: Nếu trang web dẫn ra cần yêu cầu trẻ em trên 13 tuổi, thì bạn phải kích hoạt chức năng restriction.
2. Nút Send:- Dùng để chia sẻ nội dung tới bạn bè, người dùng có nhiều tùy chọn hơn trong
việc chia sẻ nội dung tới hộp thư bạn bè, hay đăng lên các group, hay qua email. Trong khi nút Like dùng để chia sẻ nội dung với tất cả mọi người thì nút Send dùng để chia sẻ nội dung trang web với một vài người được chọn mà thôi.
- Đoạn mã JavaScript:
- Đoạn mã div thể hiện :
- Kết quả:
- Trong đó:o Data-href: đường dẫn URL bạn muốn shareo Data-font: font chữ bạn muốn thể hiện.o Data-colorscheme: phông màu cho nút share. Có 2 tùy chọn : dark và
lighto Data-ref: một nhãn cho phép bạn theo dõi khi người dùng click vào nút
share: Fb_ref: tham số ref Fb_source: loại sự kiện bạn muốn: email, group, message
o kid_directed_site: Nếu trang web dẫn ra cần yêu cầu trẻ em trên 13 tuổi, thì bạn phải kích hoạt chức năng restriction.
3. Embedded Posts (nhúng bài viết)- Là con đường để đặt các bài viết công khai – về một người hay một Page trên
Facebook - vào trong website của họ.- Cách dùng:
o Bạn có thể nhúng các dòng code trực tiếp từ các bài viết của bạn, nếu bài viết được public, hãy click vào mũi tên phía trên:
o Click vào Embed Post, bạn sẽ thấy hộp thoại chứa các dòng code để nhúng vào trang web của bạn
o Copy các dòng code đó vào trang web của bạn, so easy
4. Follow Button:- Cho phép theo dõi những cập nhật mới nhất trên trang face của bạn.- Mã JavaScript:
- Thẻ div hiển thị nút Follow:
- Kết quả:
- Trong đó:o Data-href: địa chỉ trang cá nhân mà cần followo Data-layout: có 3 tùy chọn sau:
Standard: trình bày chữ nằm bên phải và hình ảnh của người dùng nằm phía dưới, chiều rộng tối thiểu: 225px, chiều rộng mặc
định 450px, chiều cao 35px (không có hình) và 80px (có hình người dùng)
o Data-show-faces: chỉ ra rằng có hiện hình ảnh người dùng đang theo dõi không
o Data-colorscheme: phông màu cho nút follow, có 2 tùy chọn là light và dark
o Data-font: các phông chữ cho hiển thị, có các tùy chọn sau: 'arial', 'lucida grande', 'segoe ui', 'tahoma', 'trebuchet ms', 'verdana'
o Data-width: chiều rộng của plugin5. Comment Box:
- Là một plugin cho phép mọi người comment website của bạn, nó mang 2 đặc điểm sau:
o Social Relevance: Hộp thoại comment sử dụng các quy tắc để lọc các comment có chất lượng nhất lên trên cùng, ngoài ra còn hiển thị ưu tiên các comment liên quan tới bạn bè bạn hoặc bạn bè của bạn bè bạn, các comment được like hoặc comment nhiều nhất. Các comment được gắn spam được ẩn đi.
o Distribution: comment có thể dễ dàng chia sẻ với bạn bè hoặc với những người thích trang của bạn trên Facebook. Nếu mọi người chọn chức năng đăng lên Facebook, các thông tin người comment sẽ hiện lên cho phép bạn biết những ai đang comment
- Mã JavaScript:
- Thẻ div hiển thị hộp thoại comment:
- Kết quả:
- Trong đó:o Data-href là đường dẫn tới URL cần commento Data-width: chiều rộng của plugin, tối thiểu là 400px.o Data-colorscheme : phông màu của plugin, có 2 tùy chọn là light và
darko Data-number-posts: số lượng bài post được hiển thị, mặc định là 10, tối
thiểu là 1.o Data-order-by: sắp xếp theo các tùy chọn: 'social', 'reverse_time', 'time'.
Mặc định là 'social- Moderation tools:
o Admin có thể lựa chọn cho người dùng có thể nhìn thấy các comment của tất cả mọi người hoặc chỉ của bạn bè mình để giảm thiểu các comment không cần thiết
o Admin cũng có thể có các danh sách từ cấm và các users bị cấm, nếu có comment thuộc các danh sách trên thì nó sẽ tự động bị gắn hạn chế xem
o Bạn cần phải khai báo mình là một admin, để làm được điều này chỉ cần khai báo một thẻ meta ở <head></head>:
o Để thêm nhiều admin hơn, chỉ cần thêm nhiều ID hơn, nếu có quá nhiều comment thì bạn có thể đặt ID của ứng dụng như admin để nhiều người quản lý ứng dụng có thể quản lý chung các comment, có hộp điều hành riêng cho họ.Bạn có thể chỉ định APP_ID hoặc Facebook người dùng, nhưng không thể chọn cả hai.
6. Share Dialog:- Facebook cũng cung cấp chia sẻ các hộp thoại (Share Dialog) mà bao gồm
trang web của bạn để mọi người có thể chia sẻ liên kết đó trên dòng thời gian của họ. Mọi người mở Share Dialog bằng cách click vào một link trên website của bạn, nó sẽ mở ra một tab mới với URL được chỉ định trên face của họ.
- Cách đơn giản nhất là dùng dòng sau:
- Cao cấp hơn, bạn có thể dùng JavaScript để người dùng có thể chia sẻ trang web hiện tại mà họ đang xem, đoạn mã dưới có thể sử dụng mà không làm thay đổi trang web của bạn:
- So sánh giữa Share và Like:o Việc bạn chia sẻ các hộp thoại (Share Dialog) thay vì Like phụ thuộc
vào cái mà bạn muốn cung cấp cho người dùng. Nhiều người lựa chọn cả hai để phục vụ cho mục đích chia sẻ trang web của họ. Nhưng cũng có khác biệt giữa Share Dialog và Like:
Like đơn giản và dễ dàng hơn, mọi người chỉ cần click và các thông tin sẽ được chia sẻ trên dòng thời gian. Họ có thể có các comment cho các thông tin đó, tuy nhiên điều đó là không cần thiết.
Share Dialog yêu cầu nhiều hơn một chút nhưng tạo cho họ nhiều sự lựa chọn hơn. Khi người dùng chọn Share Dialog thì họ phải tạo một comment và chia sẻ liên kết lên wall của họ, họ cũng có thể tùy chỉnh tiêu đề và hình ảnh thu nhỏ của các liên kết mà họ chia sẻ.
7. Activity Feed:- Plugin này sẽ giúp bạn hiển thị các thông tin của người dùng diễn ra trên trang
web của bạn. Do thông tin được lưu trữ bởi Facebook nên bạn có thể xem thông tin cá nhân hay không được xem những người hoạt động trên trang web bạn. Các hoạt động của người dùng là like, share, comment liên quan tới trang
web của bạn. Các plugin này sẽ hiển thị hoạt động người dùng hoặc các khuyến nghị. Bạn có thể điều chỉnh cách hiển thị này nhờ vào 3 cách sau:
o App IDo One or more action typeso Domain
- App ID: nếu bạn chỉ định App ID cho plugin, nó sẽ hiển thị toàn bộ các hoạt động được xác định bởi mối liên kết với App ID này.
- One or more action types: Nếu bạn hiển thị một hoặc nhiều hành động cho việc hiển thị, bạn có thể xác định một loạt các hành động phân cách bởi dấu phẩy
- Domain: Nếu bạn chọn Domain, nó sẽ hiển thị toàn bộ các hoạt động như like, read,… trên domain của bạn.
- Mã JavaScript:
- Thẻ div chứa nội dung hiển thị:
- Kết quả:
- Trong đó:o Data-site là tên domain bạn muốn hiển thị các hoạt động.o Data-action: các hành động được cách nhau bởi dấu phẩy để hiển thị
hoạt động cho hành động nào.o Data-app-id: hiển thị toàn bộ hành động sẽ liên quan tới APP_IDo Data-width: chiều rộng của plugin, mặc định là 300pxo Data-height : chiều cao của plugin, mặc định là 300pxo Data-header: xác định vị trí hiển thị headero Data-colorscheme: phông màu của plugin, có 2 tùy chọn là light và darko Data-font: phông chữ hiển thị của plugin, có các tùy chọn là 'arial',
'lucida grande', 'segoe ui', 'tahoma', 'trebuchet ms', 'verdana'o Data-recommendations: chỉ định có giới thiệu trang web đó với người
dùng hay không.o Data-filter: cho phép bạn lọc những thứ cần tìm trong plugin (URL)o Data-linktarget: xác định có mở tab mới khi bạn click vào đường link
hay khôngo Data-ref: nhãn dùng theo dõi hành động của người dùng.o Data-max-age: giới hạn số lượng các đường link hiện lên plugin, mặc
định là 0, giá trị từ 0-1808. Recommendations Box:
- Thể hiện các lời giới thiệu người dùng trang của bạn khi người dùng đang sử dụng app hoặc trang đó. Do được host bởi Facebook nên thông tin người dùng có thể share hoặc không share với bạn.
- Tương tự giống với Activity Feed, nó có 3 cách để lựa chọn trang web để người dùng liên kết.
9. Recommendations Bar:
- Dùng để giới thiệu người dùng like nội dung trang của bạn và share chúng khi người dùng đọc nội dung. Nó luôn nằm phía dưới bên phải hoặc bên trái của màn hình.
- Mã JavaScript:
- Thẻ div hiển thị nội dung:
- Kết quả:
- Mở rộng của plugin:o Onvisible: plugin được mở rộng khi người dùng di chuyển chuột qua
các điểm mà thẻ <fb:recommendations-bar /> được đặt. Đây là chế độ mặc định
o X% : với X là số nguyên dương nhỏ hơn hoặc bằng 100. Điều này quy định cụ thể tỷ lệ phần trăm trang được cuộn lại trước khi plugin được mở ra
o Manual: sử dụng tùy chọn này để kích hoạt các plugino Real_time cho biết sẽ mất bao nhiêu thời gian trước khi plugin được
mở.- Trong đó:
o Data-href là địa chỉ URL được chỉ tới để recommendations.o Data-trigger: khi mà plugin được mở, phụ thuộc vào tham số read_timeo Data-real-time: số giây trước khi plugin được mở, mặc định là 30s, nhỏ
nhất là 10s.o Data-action: hành động trên plugin: like hoặc recommendo Data-side: nơi mà plugin sẽ hiển thị, left hoặc right
o Data-site: chia cách với nhau bởi dấu phẩy, liệt kê các domain được giới thiệu.
o Data-ref: một nhãn dùng để theo dõi hành động người dùng.o Data-num-recommendations: hiển thị số lượng trang giới thiệu. Mặc
định là 2 và giá trị lớn nhất là 5.o Data-max-age: giới hạn trên trang giới thiệu trên plugin, mặc định là 0
và giới hạn từ 0-18010. Like box:
- Là một plugin giúp người chủ của Face Page nào đó có thể thu hút like của mọi người tới trang của mình. Khi kích hoạt chế độ Like Box giúp người dùng:
o Xem có bao nhiêu người like trang của mình.o Đọc những tin cập nhật mới nhất trên trang của mìnho Like trang Page với chỉ 1 click mà không cần phải ghé thăm trang.
- Mã JavaScript:
- Thẻ div hiển thị nội dung:
- Kết quả:
- Trong đó:
o Data-href là đường dẫn URL tới trang Face Pageo Data-width : chiều rộng của plugin, mặc định là 300px;o Data-height: chiều cao của plugin,chiều cao mặc định phụ thuộc vào số
người like trang đóo Data-colorscheme: phông màu của plugin, có 2 tùy chọn là light và darko Data-show-faces: xác định có hiển thị hình ảnh người dùng hay khôngo Data-stream: quy định có hiển thị bài viết mới nhất từ wall của plugino Data-header: xác định có hiển thị tiêu đề bài viết nằm trên cùng của
plugino Data-show-border: xác định có hiển thị border quanh plugin hay không.
Nếu để là False thì bạn có thể dùng CSS để hiển thịo Data-force-wall: xác định có chứa bài viết trên tường của Place hay
không, mặc định là false.11. Login button:
- Cho phép người dùng đăng nhập và hiển thị các thông tin cá nhân của người đó. Bạn có thể hiện thị số lượng hình ảnh người dùng đã like Page đó
- Mã JavaScript:
- Thẻ div hiển thị Login button:
- Kết quả:
- Trong đó:o Data-show-faces: xác định có hiển thị hình ảnh người dùng đã like hay
khôngo Data-autologoutlink: nếu được đặt là true và người dùng trước đó đã kết
nối và có session. Login button sẽ thay đổi để người dùng có thể đăng xuất.
o Data-onlogin: được gọi lại khi người dùng logino Data-max-rows: hiển thị số lượng hình ảnh người dùng đã like, mặc
định là 1.
o Data-width: chiều cao của plugin, mặc định là 200px.o Data-scope: một danh sách các quyền cách nhau bởi dấu phẩy, khi ứng
dụng cần truy cập thông tin cá nhân người dùng mà riêng tư thì các yêu cầu sẽ được hiện lên
o Data-registration-url: địa chỉ trang đăng kí URL, nếu người dùng chưa đăng kí, họ có thể bị trả về đường dẫn mà bạn xác định trong registration-url
o Data-size: có các size sau: small, medium, large, xlarge. Mặc định là medium.
o Data-kid_directed_site: Nếu trang web dẫn ra cần yêu cầu trẻ em trên 13 tuổi, thì bạn phải kích hoạt chức năng restriction.
12. Registration:- Giúp người dùng signup nhanh chóng dựa trên tài khoản facebook của mình.
Đó là một iframe đơn giản giúp bạn có thể nhúng nó vào trong trang web của mình. Sau khi đăng nhập vào Facebook, người dùng có một biểu mẫu điền trước với các thông tin của họ. Plugin cũng dành cho những người không có tài khoản Facebook, hoặc không muốn đăng nhập vào tài khoản Facebook của mình bằng một form tương tự.
- Mã Iframe:
- Kết quả:
- Các thuộc tính:
- Các field:
- Bạn có thể yêu cầu người dùng cung cấp các thông tin mà không đại diện trên Facebook, để thực hiện điều này, bạn cần sử dụng chuỗi JSON. Ví dụ:
- Các field:
- Login và Registration Flows:o Bạn cần tạo một button Login:
o Khi người dùng chưa đăng nhập tới trang của bạn, nút Login sẽ hiện ra, sau khi người dùng click vào đó, trang sẽ yêu cầu nhập địa chỉ và password, nếu người dùng chưa có sẽ bị trả về registration-url. Nếu người dùng đăng nhập thì sự kiện onlogin() sẽ được gọi.
- Reading data: dữ liệu sẽ được truyền tới trang của bạn dựa trên thuộc tính signed_request. Các thông tin trả về sẽ được viết dưới dạng JSON:
13. Facepile:- Hiển thị thông tin người sử dụng mà đã kết nối với trang Page Face của bạn
hay tương tự.- Để hiển thị hình ảnh của những người tham gia kết nối, dùng đoạn mã sau:
- Bạn có thể sử dụng 2 cách:o Nhúng Iframe vào trang web của bạno Sử dụng <fb:facepile>
- Mã JavaScript:
- Thẻ div hiển thị:
- Kết quả:
- Trong đó:
o Data-href là địa chỉ trang của bạn. Hiển thị thông tin người dùng like trang web này.
o Data-action: thể hiện loại hành động.plugin sẽ hiển thị thông tin người dùng kết nối app của bạn dựa trên hành động này.
o Data-app-id: Nếu bạn muốn hiển thị người kết nối tới trang của bạn thì hãy chỉ định app_id như một tham số
o Data-show-faces: số dòng hình ảnh hiển thị, mặc định là 1.o Data-width: chiều rộng của plugino Data-size: size của hình ảnh và các dòng chữo Data-colorscheme: phông màu cho plugin