LẬP TRÌNH VÀ THIẾT KẾ WEBSITE TƯƠNG TÁC VỚI MẠNG XÃ HỘI FACEBOOK PART 1

24 715 2
LẬP TRÌNH VÀ THIẾT KẾ WEBSITE TƯƠNG TÁC VỚI MẠNG XÃ HỘI  FACEBOOK PART 1

Đang tải... (xem toàn văn)

Tài liệu hạn chế xem trước, để xem đầy đủ mời bạn chọn Tải xuống

Thông tin tài liệu

Lập Trình Ung Dụng Facebook, LẬP TRÌNH VÀ THIẾT KẾ WEBSITE TƯƠNG TÁC VỚI MẠNG XÃ HỘI FACEBOOK,MẠNG XÃ HỘI FACEBOOK

TÀI LIỆU CỦA THƯ VIỆN LẬP TRÌNH LẬP TRÌNH VÀ THIẾT KẾ WEBSITE TƢƠNG TÁC VỚI MẠNG XÃ HỘI FACEBOOK Dành Cho Người Mới Bắt Đầu TẬ P Lập trình & thiết kế website tương tác với mạng xã hội facebook Trang / 24 Mục lục PHẦN 1: LÀM QUEN VỚI CÁC KHÁI NIỆM Lời giới thiệu Những hiểu biết ban đầu 2.1 Facebook Platform gì? 2.2 Facebook Open Graph gì? .5 2.3 Facebook Open Graph vận hành nào? 2.4 Access Token Key gì? .6 2.5 Facebook Social Plugin gì? .7 2.6 Facebook Login chức gì? Tổng kết phần đầu PHẦN 2: SỬ DỤNG FACEBOOK SOCIAL PLUGIN Giới thiệu Định hướng sử dụng Website cần làm để sử dụng Social Plugin 10 Hướng dẫn sử dụng Social Plugin 10 4.1 Like Button 10 4.2 Send Button 13 4.3 Follow Button 13 4.4 Comments Box 14 4.5 Facepile 15 4.6 Like Box 16 4.7 Share Dialog 18 4.8 Những Social Plugin khác 21 Tìm hiểu Facebook Meta Tags 21 Tổng kết phần social plugin 23 Tập Dành cho người bắt đầu Đặng Văn Lel Lập trình & thiết kế website tương tác với mạng xã hội facebook Trang / 24 PHẦN 1: LÀM QUEN VỚI CÁC KHÁI NIỆM Lời giới thiệu Là ngƣời làm việc với cơng nghệ thơng tin, tơi khơng thích việc giới thiệu nhiều dài dòng Nên ta thẳng vào vấn đề Đã bạn thấy website có thành phần trơng nhƣ chƣa? Hoặc bạn có website bán hàng trực tuyến, đồng thời bạn có tài khoản facebook, fanpage facebook Đã bạn tự hỏi rằng: liệu có cách giúp bạn thêm sản phẩm lên website bạn tự động thêm viết sản phẩm lên fanpage(1) facebook cá nhân bạn? Tài liệu hƣớng dẫn bạn làm việc nhƣ mơ tả phía nhiều Xin lưu ý bạn đƣợc mơ tả tài liệu vơ dễ Nhƣng vài lý do, khái niệm ban đầu khiếng bạn đau đầu suy nghĩ sâu xa Bạn đừng quan tâm đến việc liên kết khái niệm lại với nhau, mà cần đọc qua Khi cụ thể chi tiết một, bạn tự nhiên hình dung lại đƣợc cách khái quát tranh toàn cảnh vấn đề Sơ đồ kết nối khái niệm đầu bạn  Những hiểu biết ban đầu Cũng nhƣ công việc khác, tiếp xúc với mẻ, cần có hiểu biết khái niệm, cấu trúc, cách vận Tập Dành cho người bắt đầu Đặng Văn Lel Lập trình & thiết kế website tương tác với mạng xã hội facebook Trang / 24 hành nhƣ nguy trƣờng hợp lỗi trƣớc bắt đầu làm việc Giờ ta lần lƣợt qua vài khái niệm để bạn có nhìn tổng quan ban đầu hỗ trợ facebook 2.1 Facebook Platform gì? Platform(nền tảng) lĩnh vực lập trình đƣợc hiểu nhƣ hệ thống bao gồm nhiều tiện ích, hỗ trợ, liệu, cơng cụ,… dùng cho việc lập trình tùy chỉnh thông tin từ nhà phát triển bên ngồi Việc lập trình platform nhằm mục đích tác động đến tiện ích, hỗ trợ, liệu,… mà hệ thống platform cung cấp Một hệ thống platform cung cấp cho nhà phát triển bên ngồi thƣờng dƣới hình thức API (Application Programming Interface) Những API làm nhiệm vụ mô tả, điều hƣớng xác cách thức để ứng dụng từ bên tác động đến ứng dụng nội Facebook Platform hệ thống cung cấp cho nhà phát triển bên ngồi cơng cụ cách thức để tác động đến hệ thống liệu facebook Việc tác động bao gồm việc nhƣ lấy, tùy chỉnh, thêm mới, thống kê,… thông tin facebook Để hiểu rõ điều này, phân tích sơ đồ bên dƣới đây: Website facebook Truy cập sử dụng (A) Người dùng Truy cập sử dụng (B) Nhà phát triển Tạo Website tác động Dữ liệu Facebook tác động Facebook Platform sử dụng API Nhìn sơ đồ trên, ta đóng vai trị “nhà phát triển” Công việc ta tạo “website chúng ta” Website có phần chức sử dụng hệ thống API đƣợc cung cấp “facebook platform” để tác động đến “dữ liệu facebook” Tập Dành cho người bắt đầu Đặng Văn Lel Lập trình & thiết kế website tương tác với mạng xã hội facebook Trang / 24 Ngƣời dùng truy cập website chúng ta, họ tác động lên đó, tùy theo ta lập trình mà họ làm cơng việc nhƣ thích, bình luận, chia sẽ, gửi viết lên facebook, … thông qua website Có hình thức cụ thể facebook platform hỗ trợ cho website Facebook Social Plugin Facebook Open Graph 2.2 Facebook Open Graph gì? Hệ thống Graph mạng lƣới liên kết dày đặc chi tiết đối tƣợng facebook với Các đối tƣợng hình ảnh, video , ngƣời, câu chuyện, dịng chia sẽ, bình luận, thích, hoạt động, kiện, … Nói chung, Graph mạng lƣới liên kết thứ facebook Facebook Open Graph cổng thông tin giúp cho ứng dụng bên ngồi giao tiếp tiếp cận đối tƣợng mạng lƣới Graph facebook Việc giao tiếp hành động gửi viết, bình luận, hình ảnh, video lên facebook Hoặc đọc liệu, thống kê, chia sẽ, sửa, xóa liệu, 2.3 Facebook Open Graph vận hành nào? Để giao tiếp với bên ngoài, facebook open graph xem mõi webiste bên app(ứng dụng) facebook Khi ngƣời dùng gửi hành động đến facebook thơng qua website bên ngồi, đƣợc đánh dấu nguồn gốc rõ ràng nhƣ hình minh họa dƣới (một viết gửi lên facebook thơng qua app có tên Thư Viện Lập Trình) Tập Dành cho người bắt đầu Đặng Văn Lel Lập trình & thiết kế website tương tác với mạng xã hội facebook Trang / 24 Nhƣ vậy, muốn sử dụng facebook open graph cần phải đăng ký website bạn với facebook tạo app facebook làm đại diện cho website Website A Website B Website C Facebook App A Facebook App B Facebook App C Facebook Open Graph facebook platform Tác động Dữ liệu Facebook (mơ hình làm việc với facebook website bên ngoài) 2.4 Access Token Key gì? Khi kết nối đến app facebook, ngƣời dùng đƣợc yêu cầu cung cấp quyền mà app cần Sau đó, khóa truy cập đƣợc tạo để nhận dạng ngƣời Khi ngƣời gửi hành động lên facebook thơng qua app facebook kiểm chứng lại khóa đƣợc cung cấp lúc kết nối xem hành động có đƣợc phép hay khơng Khóa gọi Access Token key Access Token Key chuỗi ký tự số, có tính phân biệt ngƣời dùng, app, fanpage bên bao gồm thơng tin quyền đƣợc ngƣời sử dụng chấp nhận lúc kết nối Vì lý an tồn, bảo mật xác nên mõi hành động đƣợc gửi đến facebook thông qua app đến Open Graph đƣợc kiểm chứng Access Token key Nhƣ vậy, access token key khóa có chứng nhận dạng nguwoif dùng facebook, khóa bao gồm thông tin ngƣời dùng quyền hạn mà thân ngƣời cấp phép cho app Khi app gửi hành động lên facebook cần gửi kèm theo access token key Facebook vào access token key để biết hành động tác động lên đối tƣợng mạng lƣới graph có đƣợc phép hay không tiến hành thực hiện? Tập Dành cho người bắt đầu Đặng Văn Lel Lập trình & thiết kế website tương tác với mạng xã hội facebook 2.5 Trang / 24 Facebook Social Plugin gì? Social Plugin cơng cụ giúp bạn hiển thị đối tƣợng facebook nhƣ nút Like, Comment, Send, Follow, website bạn Mõi đối tƣợng bị gắn liền với địa URL xác định Facebook dùng URL để phần biệt thống kê quan tâm ngƣời dùng đến Sử dụng Social Plugin khơng cần đến Access Token Key, tất bạn cần học cách chèn vào webisite cung cấp cho URL 2.6 Facebook Login chức gì? Đối số website, bạn có hỗ trợ ngƣời dùng đăng nhập tài khoản facebook họ Facebook Login phƣơng vô đơn giản giúp bạn xác định có hay khơng có ngƣời dùng facebook ngƣời dùng đăng nhập facebook chƣa Nhƣ vậy, chức giúp bạn hỗ trợ cho ngƣời sử dụng đăng nhập vào website bạn tài khoản facebook họ Bạn thiết kế liệu cho phần lƣu giữ ngƣời dùng Công việc bạn đơn giản gọi hàm API đến APP facebook nhận kết có hay khơng Tổng kết phần đầu Bạn đƣợc giới thiệu sơ lƣợc qua tiện ích mà facebook có hỗ trợ cho bạn việc làm cho website bạn xã hội kết nối với facebook nhiều Bạn chƣa học cách làm, bạn lƣu ý điều Chúng tơi muốn bạn biết đến điều chƣa dạy bạn cách thực Hãy đặt lại nhìn tổng quan sang phần học cách làm việc với mõi hỗ trợ - Facebook Platform tảng hỗ trợ từ facebook giúp cho bạn xây dựng website bạn xã hội kết nối nhiều với facebook - Facebook Platform chia phần hỗ trợ cho website Social Plugin Open Graph - Social Plugin công cụ giúp bạn hiển thị thành phần nhƣ nút Like, Comment, Share, website bạn gắn liền với URL Facebook sử dụng URL nhƣ khóa phân biệt URL khác tồn giới có sử dụng Social Plugin Tập Dành cho người bắt đầu Đặng Văn Lel Lập trình & thiết kế website tương tác với mạng xã hội facebook Trang / 24 - Open Graph cổng giao tiếp facebook với ứng dụng bên ngoài, hỗ trợ cho việc tiếp cận xử lý đối tƣợng bên mạng lƣới đối tƣợng dày đặc facebook - Để làm việc với Open Graph bạn cần khóa truy cập cho hành động đƣợc gửi đến cổng thơng tin Khóa gọi Access Token Key đƣợc dùng để nhận dạng ngƣời thực hành động nhƣ quyền mà ngƣời cho phép ứng dụng thực - Để làm việc với Social Plugin bạn cần chèn vào website cấp cho mõi plugin URL xác định - Hết phần - Tập Dành cho người bắt đầu Đặng Văn Lel Lập trình & thiết kế website tương tác với mạng xã hội facebook Trang / 24 PHẦN 2: SỬ DỤNG FACEBOOK SOCIAL PLUGIN Giới thiệu Trong phần này, tập trung vào vấn đề chèn sử dụng facebook social plugin website Lƣu ý đƣợc học qua plugin theo thứ tự, sau tìm hiểu đặc điểm kỹ thuật quan trọng liên quan sử dụng chúng Định hướng sử dụng Câu hỏi quan trọng bạn sử dụng social plugin để làm gì? Bạn có thấy website bán hàng có cách trình bày sản phẩm mà có thành phần Like, Share, Send chƣa? Nhƣ bạn thấy, mõi sản phẩm đƣợc thống kê riêng biệt số ngƣời Like, hỗ trợ nút chia gửi bạn bè, Làm cách để plugin phân biệt đƣợc sản phẩm khác nhau? Câu trả lời cách sử dụng URL sản phẩm Mõi sản phẩm có URL xác định riêng biệt Trong Social Plugin, URL đƣợc xem nhƣ khóa để phân biệt đối tƣợng mà plugin đƣợc sử dụng Nhƣ vậy, sử dụng Social Plugin việc dùng cấu trúc đƣợc định nghĩa trƣớc để hiển thị đánh giá độ quan tâm ngƣời sử dụng (nhƣ thích, chia sẽ, bình luận, …) lên địa URL Tập Dành cho người bắt đầu Đặng Văn Lel Lập trình & thiết kế website tương tác với mạng xã hội facebook Trang 10 / 24 Website cần làm để sử dụng Social Plugin Để trang web sử dụng Social Plugin website, đơn giản, bạn cần chèn đoạn code vào sau thẻ trang web Code (function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_US/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); 10 Trong code trên, quan tâm thành phần sau: - fb-root: thẻ div mà facebook social plugin u cầu phải có q trình xử lý - en_US: ngơn ngữ sử dụng plugin, theo ngôn ngữ bạn chọn vi_VN thành phần nhƣ nút Like, Comment hiển thị Thích, Bình Luận Hướng dẫn sử dụng Social Plugin Đến phần quan trọng đây, vào chi tiêt social plugin thực hành chèn vào website 4.1 Like Button Là plugin đơn giản cung cấp cho bạn cách để hiển thị nút Like trang web bạn Để ngƣời dùng thể quan tâm cách ấn like chia nội dung lên facebook Mõi nút Like đƣợc chèn vào trang web phải gắn liền với URL Cấu trúc chung để chèn nút Like nhƣ sau: Cú pháp Tập Dành cho người bắt đầu Đặng Văn Lel Lập trình & thiết kế website tương tác với mạng xã hội facebook Trang 11 / 24 Đấy cấu trúc đơn giản nút Like Trong đó, bạn quan tâm đến thuộc tính sau: data-href Là địa URL gắn liền với nút Like data-send Nếu TRUE nghĩa bạn muốn hiển thị nút Send bên phải nội dung nút Like data-width Tổng chiều rộng dùng để hiển thị nút Like data-show-faces Nếu TRUE nghĩa bạn muốn hiển thị vài người dùng Like đối tượng data-layout Lựa chọn mẫu hiển thị nút Like Có tất giá trị tương ứng với kiểu hiển thị: • standard • data_count • box_count Ví dụ, tạo file html với nội dung nhƣ sau: social_plugin_vidu_1.html 10 11 12 13 14 15 16 17 18 19 20 21 22 23 Tập Like Button (function (d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/vi_VN/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); } (document, 'script', 'facebook-jssdk')); Dành cho người bắt đầu Đặng Văn Lel Lập trình & thiết kế website tương tác với mạng xã hội facebook Trang 12 / 24 Chạy file Server nhƣ IIS hay Apache, … bạn thấy kết nhƣ sau (bên trái dùng vi_VN, bên phải dùng en_EN) Trong trƣờng hợp trang mà có nhiều nút Like, mõi nút Like gắn với URL riêng Nhƣ ví dụ sau: social_plugin_vidu_2.html 10 11 12 13 14 15 16 Bài học Bài học Kết nhƣ này: Tập Dành cho người bắt đầu Đặng Văn Lel Lập trình & thiết kế website tương tác với mạng xã hội facebook 4.2 Trang 13 / 24 Send Button Cung cấp công cụ đơn giản giúp hiển thị nút Send website bạn mà ngƣời gửi chia URL đến bạn bè hình thức gửi tin nhắn facebook Cũng nhƣ Social Plugin khác, nút Send cần gắn liền với URL theo cú pháp đơn giản nhƣ sau: Cú pháp Trong đó, data-href chƣa URL mà bạn muốn ngƣời dùng chia đến bạn bè họ cách gửi tin nhắn Thơng thƣờng plugin đƣợc dùng Thay vào đó, ngƣời ta mở thuộc tính data-send TRUE nút Like để hiển thị nút Send bên cạnh 4.3 Follow Button Cung cấp cho bạn công cụ để chèn nút Follow lên website bạn liên kết nút đến tài khoản facebook Những ngƣời sử dụng khác bấm vào nút Follow để theo dõi đƣợc hoạt động tài khoản đƣợc gắn kết facebook Cấu trúc để chèn Follow Button nhƣ sau: Cú pháp Trong đó: data-href Là địa URL tài khoản facebook data-width Tổng chiều rộng dùng để hiển thị nút Follow data-show-faces Muốn hiển thị vài người dùng ấn Follow đối tượng hay không? data-layout Lựa chọn mẫu hiển thị nút Follow, có kiểu hiển thị: • standard • data_count • box_count Tập Dành cho người bắt đầu Đặng Văn Lel Lập trình & thiết kế website tương tác với mạng xã hội facebook Trang 14 / 24 Ví dụ, ta có file mã nguồn nhƣ sau (đã loại bỏ phần chung): social_plugin_vidu_3.html Kết nhƣ 4.4 Comments Box Plugin cung cấp khu vực hiển thị website bạn để ngƣời bình luận chia thông tin liên quan đến URL site bạn Dạng chung Comment Box nhƣ sau: Cú pháp Vẫn nhƣ plugin khác, comment box gắn liền với URL xác định Điều có nghĩa bạn chèn nhiều comment box trang miễn URL gắn với chúng khác Tập Dành cho người bắt đầu Đặng Văn Lel Lập trình & thiết kế website tương tác với mạng xã hội facebook Trang 15 / 24 Chú thích thuộc tính sử dụng cú pháp: data-href Là địa URL gắn liền với nội dung bình luận data-width Tổng chiều rộng dùng để hiển thị nội dung phần bình luận data-num-posts Bạn muốn hiển thị bình luận Xem ví dụ dƣới (đã loại bỏ phần chung) social_plugin_vidu_4.html Kết hiển thị 4.5 Facepile Plugin giúp bạn hiển thị danh sách ngƣời dùng thích URL bạn đăng nhập vào URL tài khoản facebook Cấu trúc để sử dụng plugin nhƣ sau: Tập Dành cho người bắt đầu Đặng Văn Lel Lập trình & thiết kế website tương tác với mạng xã hội facebook Trang 16 / 24 Cú pháp Trong đó, ý nghĩa thuộc tính nhƣ sau: data-href Là địa URL gắn liền với plugin data-max-rows Số dòng tối đa để hiển thị người thích URL data-width Tổng chiều rộng dùng để hiển thị nội dung plugin size Kích thước avatar người dùng Có kích thước: • small • medium • large Ví dụ, giữ nguyên cấu trúc cú pháp bạn có kết hiển thị nhƣ sau: 4.6 Like Box Đây plugin cho phép chủ sở hữu facebook fanpage hiển thị khu vực thơng tin nhằm thu hút thêm ngƣời dùng số lƣợt thích fanpage thơng qua website bên ngồi Plugin cho phép ngƣời sử dụng website bạn thực cơng việc sau:  Xem có ngƣời ngƣời bạn họ thích fanpage  Đọc viết gần fanpage  Thích fanpage với click mà khơng cần phải vào facebook Tập Dành cho người bắt đầu Đặng Văn Lel Lập trình & thiết kế website tương tác với mạng xã hội facebook Trang 17 / 24 Cú pháp để chèn Like Box nhƣ sau: Cú pháp Trong đó, ý nghĩa thuộc tính nhƣ sau: data-href Là địa URL dấn đến fanpage bạn facebook data-width Tổng chiều rộng dùng để hiển thị nội dung plugin Plugin KHÔNG hỗ trợ chiều rộng nhỏ 192px data-show-faces Có hiển thị danh sách avatar người thích fanpage khơng? data-stream Có hiển thị vài viết fanpage hay khơng? data-show-border Có hiển thị điền viền xung quanh nội dung hay khơng? data-header Có hiển thị tiêu đề “Tìm chúng tơi Facebook” hay không? Tiêu đề thay đổi theo ngơn ngữ bạn sử dụng data-height Thuộc tính bỏ Nếu có để độ cao tối đa nội dung Đây kết hiển thị mẫu cho plugin này: Tập Dành cho người bắt đầu Đặng Văn Lel Lập trình & thiết kế website tương tác với mạng xã hội facebook 4.7 Trang 18 / 24 Share Dialog Facebook cung cấp chia vô dễ dàng cho việc sử dụng mà bạn tích hợp lên website để ngƣời chia nội dung URL lên facebook Một viết chia facebook có dạng nhƣ hình bên dƣới Trong đó, bạn ý đến thành phần đƣợc đánh số nhƣ Diễn giải: message Là nội dung người dùng nhập vào chia lên facebook title Tiêu đề mà bạn muốn hiển thị share url URL chia summary Nội dung giới thiệu URL image Hình ảnh muốn hiển thị Các thành phần 2,3,4,5 thành phần mà bạn chủ động định Phần phần ngƣời sử dụng nhập vào Cổng thông tin để mở nội dung Share Dialog dƣới dạng URL kèm theo tham số (dữ liệu cho 2,3,4,5) quy định trƣớc Facebook Share Dialog URL Tập http://www.facebook.com/sharer.php?s=100 &p[title]=TITLE &p[summary]=SUMARY &p[url]=SHARE_URL &p[images][0]=IMAGE_URL Dành cho người bắt đầu Đặng Văn Lel Lập trình & thiết kế website tương tác với mạng xã hội facebook Trang 19 / 24 Các tham số lần lƣợt tƣơng ứng với số TITLE (2); SUMMARY (4); SHARE_URL (3); IMAGE_URL (5) Ví dụ, bạn mở trình duyệt web lên gõ nội dung địa nhƣ sau: Ví dụ mở Share Dialog facebook http://www.facebook.com/sharer.php?s=100 &p[title]=Tiêu đề ví dụ &p[summary]=Nội dung giới thiệu URL định chia &p[url]=http://facebook.com/thuvienlaptrinh &p[images][0]=https://fbcdn-sphotos-f-a.akamaihd.net/hphotos-akprn1/p480x480/537186_335445503235604_629007960_n.jpg Bạn nhìn thấy nội dung trơng nhƣ hình bên dƣới Đó nội dung Facebook Share Dialog Phần lại ngƣời dùng nhập nội dung cho phần (1) bấm “Share Link” để chia lên facebook Thông thƣờng, ta mở Share Dialog dƣới dạng cửa sổ Popup Và gắng liền popup với nút bấm đƣờng dẫn mà ta sử dụng kiện click để gọi cửa sổ popup lên Phần tơi trình bày có xâm phạm chút javascript ngồi facebook api Nhƣng để đảm bảo tính tồn vẹn cho tài Tập Dành cho người bắt đầu Đặng Văn Lel Lập trình & thiết kế website tương tác với mạng xã hội facebook Trang 20 / 24 liệu nên việc cần thiết Vì vậy, quay lại với vấn đề mở cửa sổ popup có nội dung Share Dialog Ta cần định nghĩa hàm javascript với nội dung nhƣ sau: Open Popup Window window.open( FB_ShareDialogURL , 'Sharer', toolbar=0, status=0, width=600, height=300 ); Diễn giải FB_ShareDialogURL Là địa để yêu cầu facebook hiển thị nội dung Share Dialog Địa phần URL mà ta làm ví dụ bên Sharer Tên cửa sổ POPUP, muốn đặt tùy bạn toolbar Đảm bảo cửa sổ popup tool bar status Đảm bảo cửa sổ popup khơng có status bar width Chiều rộng cửa sổ popup height Chiều cao cửa sổ popup Ví dụ tham khảo Ví dụ mở nội dung Share Dialog cửa sổ Popup function OpenShareDialog(){ var ShareDialogURL = ""; ShareDialogURL += "http://www.facebook.com/sharer.php?s=100"; ShareDialogURL += "&p[title]=Tiêu đề ví dụ"; ShareDialogURL+= "&p[summary]=Nội dung giới thiệu URL định chia sẽ"; ShareDialogURL += "&p[url]=http://facebook.com/thuvienlaptrinh"; ShareDialogURL+="&p[images][0]=https://fbcdn-sphotos-f-a.akamaihd.net/hphotos8 ak-prn1/p480x480/537186_335445503235604_629007960_n.jpg"; window.open(ShareDialogURL,'Sharer',toolbar=0,status=0,width=600,height=300); 10 } Gán kiện click lên đối tƣợng để gọi hàm OpenShareDialog đƣợc định nghĩa nhƣ ví dụ trên, bạn mở popup trơng nhƣ hình dƣới Tập Dành cho người bắt đầu Đặng Văn Lel Lập trình & thiết kế website tương tác với mạng xã hội facebook Trang 21 / 24 Về nội dung y nhƣ ví dụ phía trên, dùng thơng tin Điểm khác biệt thành phần nhƣ tool bar, status bar biến nên trông cửa sổ gọn gàng 4.8 Những Social Plugin khác Ngoài plugin đƣợc sử dụng phổ biến nhƣ danh sách nêu trên, facebook cung cấp số plugin đặc dụng khác Do đồi hỏi thêm vài kiến thức khác nên giới thiệu plugin lại phần sau tài liệu Tìm hiểu Facebook Meta Tags Để bắt đầu, nhìn lại cấu trúc viết dạng chia liên kết Tập Dành cho người bắt đầu Đặng Văn Lel Lập trình & thiết kế website tương tác với mạng xã hội facebook Trang 22 / 24 Các thành phần nhƣ mơ tả trƣớc đó:  Số : Là phần nội dung mà ngƣời chia liên kết nhập vào  Số : Là tiêu đề liên kết  Số : Chính URL liên kết  Số : Phần giới thiệu liên kết  Số : Là hình ảnh minh họa đại diện cho liên kết Trong đó, phần 2-3-4-5 đƣợc xem nội dung giới thiệu liên kết đƣợc chia mà chủ nhân liên kết hồn tồn tùy chỉnh đƣợc (chủ nhân liên kết khác với ngƣời chia liên kết) Theo mặc định, ngƣời sử dụng facebook đánh địa URL vào phần soạn thảo viết Facebook tạo phần giới thiệu liên kết bên dƣới viết để ngƣời viết xem trƣớc nội dung (xem hình dƣới) Những thành phần đƣợc tự động tạo phần 2-3-4-5 theo mặc định giá trị tƣơng ứng đƣợc lấy là: Phần  Lấy nội dung thẻ liên kết Phần  Chính than liên kết Phần  Lấy nội dung thẻ liên kết Hoặc phần nội dung liên kết (nếu khơng có thẻ description) Phần  Lấy hình ngẫu nhiên xuất liên kết Tập Dành cho người bắt đầu Đặng Văn Lel Lập trình & thiết kế website tương tác với mạng xã hội facebook Trang 23 / 24 Trong trƣờng hợp bạn muốn chủ động định nội dung thành phần nêu facebook meta tags cơng cụ giúp bạn làm việc Facebook meta tags sử dụng giống nhƣ thẻ meta bình thƣờng html đặt phần site Dƣới danh sách facebook meta tags cần dung đến Tên loại site Ví dụ là: “liên kết”, “bài viết”, … Tên site Tiêu đề hiển thị phần Url hiển thị phần liên kết Nội dung hiển thị phần Url hình ảnh phần Dƣới ví dụ tham khảo Ví dụ tham khảo chèn facebook meta tag 10 11 … Những facebook meta tags không ảnh hƣởng đến kết hiệu ứng thẻ meta bình thƣờng khác Tổng kết phần Đến bạn thiết kế website kèm theo tiện ích nhỏ gọn, tƣơng tác với facebook ễ dàng mà không gặp phải khó khăn Hầu hết nhu cầu phổ biến đáp ứng đƣợc Tuy nhiên, làm việc với facebook khơng dừng lại Nếu bạn muốn thực hành động đại diện cho bạn nhƣ gửi viết, hình ảnh, bình luận, thích nhƣ thể bạn dùng website facebook bạn cần nhiều kiến thức nêu Tập Dành cho người bắt đầu Đặng Văn Lel Lập trình & thiết kế website tương tác với mạng xã hội facebook Trang 24 / 24 Chúng ta học điều phần tài liệu Nhƣng trƣớc tiên, thử sử dụng kiến thức học đƣợc phần áp dụng vào website mà bạn sở hữu - Hết phần - Những phần lại đƣợc cập nhật TẬP LIKE THEO DÕI TẠI PAGE http://facebook.com/thuvienlaptrinh Tập Dành cho người bắt đầu Đặng Văn Lel ... Đặng Văn Lel Lập trình & thiết kế website tương tác với mạng xã hội facebook Trang / 24 Nhƣ vậy, muốn sử dụng facebook open graph cần phải đăng ký website bạn với facebook tạo app facebook làm... để tác động đến “dữ liệu facebook? ?? Tập Dành cho người bắt đầu Đặng Văn Lel Lập trình & thiết kế website tương tác với mạng xã hội facebook Trang / 24 Ngƣời dùng truy cập website chúng ta, họ tác. .. người bắt đầu Đặng Văn Lel Lập trình & thiết kế website tương tác với mạng xã hội facebook Trang / 24 PHẦN 1: LÀM QUEN VỚI CÁC KHÁI NIỆM Lời giới thiệu Là ngƣời làm việc với cơng nghệ thơng tin,

Ngày đăng: 15/03/2014, 23:55

Từ khóa liên quan

Tài liệu cùng người dùng

  • Đang cập nhật ...

Tài liệu liên quan