WEB1013 - Slide7 - Tich Hop Tien Ich Internet

BÀI 7:
TÍCH HỢP TIỆN ÍCH INTERNET
XÂY DỰNG TRANG WEB

MỤC TIÊU BÀI HỌC
NHÚNG TIỆN ÍCH FACEBOOK
 NHÚNG NÚT LIKE VÀ SHARE FACEBOOK
 NHÚNG COMMENT FACEBOOK
 NHÚNG VIDEO FACEBOOK
 NHÚNG BÀI VIẾT FACEBOOK
 NHÚNG TIỆN ÍCH GOOGLE
 NHÚNG YOUTUBE VIDEO
 NHÚNG BẢN ĐỒ GOOGLE MAP
 NHÚNG UHCHAT
 TẠO VÀ NHÚNG SLIDESHOW
NHÚNG TIỆN ÍCH FACEBOOK
CÁC BƯỚC THỰC HIỆN
 Nếu bạn có tài khoản Facebook và đăng ký trở thành Facebook
developer thì có thể nhúng các tiện ích của Facebook vào trang web
của bạn một cách dễ dàng.
 Các bước thực hiện để nhúng các tiện ích từ Facebook
• Bước 1: Trước hết phải có tài khoản facebook.
• Bước 2: Phải đăng ký trở thành facebook developer. Vào liên kết sau và thực
hiện theo các slide hướng dẫn sau để đăng ký.
• https://developers.facebook.com
• Bước 3: Lấy mã tích hợp các tiện ích và nhúng vào các trang web thông qua
liên kết sau
• https://developers.facebook.com/docs/plugins
ĐĂNG KÝ TRỞ THÀNH FACEBOOK DEVELOPER
Nhập mã xác nhận từ

điện thoại vào đây
TẠO MỘT APP MỚI
 Đăng ký trở thành
Facebook developer và
tạo App
TRẮC NGHIỆM
NHÚNG NÚT LIKE VÀ NÚT SHARE
 Lợi ích của nút Like và nút Share facebook
• Nút Like của facebook giúp bạn biết độ quan tâm của người dùng về chủ đề
cần khảo sát
• Nút Share của facebook giúp bạn quảng bá chủ đề của bạn đến nhiều người
xem hơn
 Nút Like và nút Share có một số hình thức hiển thị khác nhau tùy vào
khả năng tùy biến của bạn
TẠO NÚT LIKE VÀ NÚT SHARE
 Bước 1: vào trang tạo nút
Like thông qua địa chỉ sau
• https://developers.facebook.c
om/docs/plugins/like-button Địa chỉ URL muốn like Chiều rộng của nhóm nút
 Bước 2: Tạo nhút Like như Hình thức nút like Loại nút
hướng dẫn của hình bên
Kích thước nút like Hiển thị ảnh thành viên like
cạnh Kèm nút share hay không
 Bước 3: Nhấp nút Get Code
để lấy mã tích hợp vào web
(giao diện get code ở slide Hình thức hiển thị
sau)
NHÚNG NÚT LIKE VÀ NÚT SHARE
 Bước 4: Chọn mã ứng
dụng và ngôn ngữ
 Bước 5: Chép code ở step
2 đặt ngay thẻ <body>
 Bước 6: Chép code ở step
3 đặt vào vị trí mà bạn
mong muốn hiển thị nút
Like.
 Tạo và nhúng mã nút
Like và Share vào trang
chi tiết hàng hóa
TRẮC NGHIỆM
TÙY BIẾN NÚT LIKE
 data-action
• Loại nút (like hoặc recommend)
 data-colorscheme
• Màu của văn bản ngoài nút (light hoặc dark)
 data-href
• Địa chỉ tuyệt đối của tài nguyên muốn like
 data-layout
• Hình thức hiển thị nút (standard, button_count, button hoặc box_count)
 data-share
• Có nút share đi kèm hay không (true hoặc false)
 data-show-faces
• Có hiện ảnh thành viên like hay không (true hoặc false)
 data-size
• Kích thước nút (large hoặc small)
 data-width
• Chiều rộng của nút tùy thuộc vào hình thức nút
KÍCH THỨC CỦA NÚT LIKE VÀ NÚT SHARE
 standard
• Rộng tối thiểu: 225 pixels, mặc định: 450 pixels.
• Cao 35 pixels không ảnh hoặc 80 pixels có ảnh
 box_count
• Rộng tối thiểu 55 pixels, mặc định 55 pixels.
• Cao 65 pixels.
 button_count
• Cao 20 pixels.
 button
• Cao 20 pixels.
TRẮC NGHIỆM
NHÚNG COMMENT VÀO WEB
 Tương tự như nhúng nút https://developers.facebook.com/docs/plugins/comments
Like và Share để tạo và
nhúng Comment
 Các thuộc tính tùy biến: Địa chỉ URL muốn comment Chiều rộng khung comment
• data-numposts
Số comment nhìn thấy
• Số comments nhìn thấy được
• data-order-by
• Sắp xếp theo các tiêu chí sau:
"social", "reverse_time", or "time"
• data-width
• Độ rộng có thể %
Hình thức hiển thị
NHÚNG COMMENT VÀO TRANG CHI TIẾT SẢN PHẨM
Chú ý: mã <script> chỉ cần nhúng một lần

NHÚNG VIDEO TỪ FACEBOOK
 Những video được post lên facebook ở chế độ public thì có thể
nhúng vào trang web.
Bước 1
Bước 2
Bước 3 => Slide sau

NHÚNG VIDEO TỪ FACEBOOK
 Các thuộc tính tùy biến

Địa chỉ video Độ rộng của video
• data-href: địa chỉ video
Bao gồm thanh Like, Comment và Share
• data-allowfullscreen: cho
phép full màn hình (true hoặc
false)
• data-autoplay: tự play (true
hoặc false)
• data-width: rộng của video,
tối thiểu 220px (mặc định
auto)
• data-show-text: hiển thị văn
bàn kèm của video (true hoặc
false)
NHÚNG BÀI TỪ FACEBOOK
 Các bài viết post trên facebook ở chế độ public có thể nhúng vào
trang web
Bước 1 Bước 2
Bước 3 => Slide sau

LẤY MÃ TÍCH HỢP CỦA BÀI VIẾT
 Công cấp thông tin cho
form và lấy mã tích hợp
Địa chỉ bài viêt trên facebook Độ rộng của bài viết
 Các thuộc tính tùy biến Bài viết đầy đủ
• data-href
• Địa chỉ của bài viết
• data-width
• Độ rộng của bài viết, tối thiểu
350 pixel, tối đa 750 pixel, mặc
định là auto.
• data-show-text
• Chỉ áp dụng cho bài viết hình
hoặc video có văn bản đính
kèm
 Nhúng Comment trang
chi tiết hàng hóa
 Nhúng video vào trang
học tiếng anh
 Nhúng post vào trang
web
TRẮC NGHIỆM
BÀI 7 (PHẦN II):
XÂY DỰNG TRANG WEB

NHÚNG TIỆN ÍCH GOOGLE
LẤY MÃ TÍCH HỢP VIDEO TỪ YOUTUBE
 Vào youtube và
mở một clip
 Nhấp nút Share
 Nhấp nút Embed
 Chép mã và
nhúng vào trang
web
MÃ TÍCH HỢP YOUTUBE VÀO WEB
 Mã tích hợp video
 Tùy biến video clip dựa vào các tham số sau đây
• Autoplay: tự play hay không (0 hoặc 1)
• Loop: lặp lại hay không (0 hoặc 1)
• Controls: có thanh điều khiển hay không (0 hoặc 1)
VIDEO YOUTUBE RESPONSIVE
 Nhúng Youtube vào
trang chủ
GOOGLE MAP VÀO WEB
 Google Map rất cần thiết cho web trong việc chỉ dẫn người dùng đến
các điểm mong muốn.
CÁC BƯỚC TẠO VÀ NHÚNG BẢN ĐỒ VÀO TRANG WEB
 Bước 1: Vào trang web: https://www.google.com/maps/d/?hl=vi
 Bước 2: Click vào nut [TẠO BẢN ĐỒ] để tạo bản đồ mới
 Bước 3: Cung cấp tên và mô tả cho bản đồ
 Bước 4: Tìm và đánh dấu điểm trên bản đồ
 Bước 5: Cung cấp thông tin về điểm: tên, địa chỉ, hình, biểu tượng…
 Bước 6: Điều chỉnh độ phóng của bản đồ cho phù hợp
 Bước 7: Chia sẻ bản đồ mức công khai
 Bước 8: Lưu chế độ mặc định
 Bước 9: Lấy mã tích hợp bản đồ và nhúng vào trang web
 Tạo và nhúng bản đồ
vào liên hệ
GOOGLE MAP RESPONSIVE
 Bạn có thể định nghĩa thêm CSS để bản đồ của bạn có tính
responsive (tương thích với nhiều loại thiết bị truy cập)
TRẮC NGHIỆM
NHÚNG CHAT
MÔ HÌNH CHÁT
ĐĂNG KÝ TÀI KHOẢN
CHÉP LẤY MÃ TÍCH HỢP CHAT
 Đặt mã chat vào trước thẻ </body>
ẨN / HIỆN CỬA SỔ CHAT
TRANG DÀNH CHO TƯ VẤN VIÊN
Các lời thoại của

người sử dụng chat
với tư vấn viên
 Đăng ký tài khoản
 Nhúng mã tích hợp
khung chat
 Quản lý lời thoại
THAY ĐỔI THÔNG TIN CẤU HÌNH
ƯU ĐIỂM CỦA UHCHAT
 Đơn giản, dễ sử dụng, bố trí hợp lý
 Miễn phí với các chức năng đơn giản
 Có phí với các chức năng nâng cao (chỉ 300.000/năm)
 Quản trị đơn giản, dễ thay đổi thông tin cấu hình
 Khi tư vấn viên offline, lời thoại sẽ được gửi qua email
TRẮC NGHIỆM
NHÚNG SLIDESHOW
GIỚI THIỆU SLIDESHOW
ỨNG DỤNG SLIDESHOW
TẠO SLIDESHOW VỚI ALBUMIZR.COM
 Có rất nhiều trang web, công cụ cho phép tạo slideshow
 Chúng ta cũng có thể tự viết mã để tạo slideshow tuy nhiên phải biết
JavaScript
 Albumizr.com cho phép tạo slideshow mà không cần phải viết mã
JavaScript
• Tạo slideshow dễ dàng
• Cung cấp mã tích hợp vào trang web
• Có thể tạo nhiều slideshow và quản lý lâu dài nếu có đăng ký tài khoản
 Tạo slideshow
 Nhúng slideshow vào
trang web
 Đăng ký tài khoản
 Tạo và quản lý nhiều
slideshow
TÓM TẮT BÀI HỌC
 NHÚNG TIỆN ÍCH FACEBOOK

 NHÚNG NÚT LIKE VÀ SHARE FACEBOOK
 NHÚNG COMMENT FACEBOOK
 NHÚNG VIDEO FACEBOOK
 NHÚNG BÀI VIẾT FACEBOOK
 NHÚNG TIỆN ÍCH GOOGLE
 NHÚNG YOUTUBE VIDEO
 NHÚNG BẢN ĐỒ GOOGLE MAP
 NHÚNG UHCHAT
 TẠO VÀ NHÚNG SLIDESHOW

WEB1013 - Slide7 - Tich Hop Tien Ich Internet

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

WEB1013 - Slide7 - Tich Hop Tien Ich Internet

Uploaded by

Copyright:

Available Formats

BÀI 7:

TÍCH HỢP TIỆN ÍCH INTERNET

XÂY DỰNG TRANG WEB

Nhập mã xác nhận từ

Chú ý: mã <script> chỉ cần nhúng một lần

Bước 3 => Slide sau

 Các thuộc tính tùy biến

Bước 3 => Slide sau

XÂY DỰNG TRANG WEB

Các lời thoại của

 NHÚNG TIỆN ÍCH FACEBOOK

You might also like