Đang tải... (xem toàn văn)
Các bạn sẽ dễ dàng chèn Api của Google như Google Map , hoặc Api từ Facebook như Like page thông qua bài hướng dẫn chi tiết trong tài liệu vào trong website của mình, để thể hiện sự chuyên nghiệp của website và sự tiện lợi hơn từ cung cụ API từ những nhà cung cấp Google và Facebook.
HƯỚNG DẪN CÀI ĐẶT GOOGLE MAPS API & FACEBOOK API (COMMENT) I – GOOGLE MAPS API Bước 1: Tạo Key - Vào trang https://developers.google.com/maps/ - Đăng nhập tài khoản google sau chọn Web platform - Chọn “GET A KEY” - Xuất hộp thoại, chọn “CONTINUE” - Cửa số xuất hiện, chọn “Create Project” sau “Continue” - Chờ lúc để Google tạo Project Màn hình xuất hiện, đặt tên key chọn Create - Lưu lại key bạn Bước 2: Tìm tọa độ địa điểm Google Maps - Ví dụ bạn muốn đánh dấu cửa hàng website Trước tiên bạn phải tìm tọa độ cửa hàng - Vào trang https://www.google.com/maps - Click chuột phải vào địa điểm đồ chọn “Đây gì?” - Một khung nhỏ phía hình lên cho biết tọa độ địa điểm Trong hình tọa độ trường HUTECH (10.802145, 106.715001) Bước 3: Chèn Google Maps vào website - Bài tạo google maps trang “Liên hệ” website bán sách - Vào trang view trang “Liên hệ”, paste đoạn code sau vào, thay YOUR-API-KEY Key bạn lấy bước Thay tọa độ địa điểm bạn cần hiển thị (đã lấy bước 2) vào dòng code: var latlng = new google.maps.LatLng(10.802145, 106.714965); #map { width: 100%; height: 400px; } function initMap() { var latlng = new google.maps.LatLng(10.802145, 106.714965); //Tọa độ cửa hàng var map = new google.maps.Map(document.getElementById('map'), { center: latlng, zoom: 16 //Độ phóng to đồ }); var marker = new google.maps.Marker({ position: latlng, map: map, title: "Your Title" //Tên hiển thị đưa chuột vào địa điểm }); } - Thẻ nơi hiển thị đồ - Đến hiển thị đồ với địa điểm cửa hàng đánh dấu người dùng load trang “Liên hệ” Bước 4: Lấy vị trí tìm đường - Thêm Button “Tìm đường đi” để hiển thị đường đến cửa hàng, click Button gọi hàm timDuongDi() JavaScript Tìm đường đi - Thêm đoạn code sau vào thẻ : function timDuongDi() { var latlng = new google.maps.LatLng(10.802145, 106.714965); //Vị trí cửa hàng var map = new google.maps.Map(document.getElementById('map'), { center: latlng, zoom: 16 }); var infoWindow = new google.maps.InfoWindow({ map: map }); // Try HTML5 geolocation if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(function (position) { var pos = { lat: position.coords.latitude, lng: position.coords.longitude }; infoWindow.setPosition(pos); infoWindow.setContent('Vị trí bạn'); map.setCenter(pos); var directionsDisplay = new google.maps.DirectionsRenderer({ map: map }); var request = { destination: latlng, // Điểm đến vị trí cửa hàng origin: pos, // Điểm bắt đầu vị trí bạn travelMode: google.maps.TravelMode.DRIVING }; var directionsService = new google.maps.DirectionsService(); directionsService.route(request, function (response, status) { if (status == google.maps.DirectionsStatus.OK) { // Display the route on the map directionsDisplay.setDirections(response); } }); }, function () { handleLocationError(true, infoWindow, map.getCenter()); }); } else { // Browser doesn't support Geolocation handleLocationError(false, infoWindow, map.getCenter()); } } function handleLocationError(browserHasGeolocation, infoWindow, pos) { infoWindow.setPosition(pos); infoWindow.setContent(browserHasGeolocation ? 'Error: The Geolocation service failed.' : 'Error: Your browser doesn\'t support geolocation.'); } - Code đầy đủ: #map { width: 100%; height: 400px; } Tìm đường đi function initMap() { var latlng = new google.maps.LatLng(10.802145, 106.714965); //Vị trí cửa hàng var map = new google.maps.Map(document.getElementById('map'), { center: latlng, zoom: 16 }); var marker = new google.maps.Marker({ position: latlng, map: map, title: "Book Store" }); } function timDuongDi() { var latlng = new google.maps.LatLng(10.802145, 106.714965); //Vị trí cửa hàng var map = new google.maps.Map(document.getElementById('map'), { center: latlng, zoom: 16 }); var infoWindow = new google.maps.InfoWindow({ map: map }); // Try HTML5 geolocation if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(function (position) { var pos = { lat: position.coords.latitude, lng: position.coords.longitude }; infoWindow.setPosition(pos); infoWindow.setContent('Vị trí bạn'); map.setCenter(pos); var directionsDisplay = new google.maps.DirectionsRenderer({ map: map }); var request = { destination: latlng, origin: pos, travelMode: google.maps.TravelMode.DRIVING }; var directionsService = new google.maps.DirectionsService(); directionsService.route(request, function (response, status) { if (status == google.maps.DirectionsStatus.OK) { // Display the route on the map directionsDisplay.setDirections(response); } }); }, function () { handleLocationError(true, infoWindow, map.getCenter()); }); } else { // Browser doesn't support Geolocation handleLocationError(false, infoWindow, map.getCenter()); } } function handleLocationError(browserHasGeolocation, infoWindow, pos) { infoWindow.setPosition(pos); infoWindow.setContent(browserHasGeolocation ? 'Error: The Geolocation service failed.' : 'Error: Your browser doesn\'t support geolocation.'); } - Đến nhấn vào nút “Tìm đường đi”, Google Maps tự động lấy vị trí bạn hiển thị đường đến cửa hàng HƯỚNG DẪN CÀI ĐẶT FACEBOOK COMMENT API I – FACEBOOK COMMENT API Bước Tạo Facebook APP Truy cập https://developers.facebook.com/apps Click vào nút: Đăng ký - (Nếu đăng ký bỏ qua bươc này) - Chấp nhận sách nhấn nút đăng ký - Chọn tảng cho app - Click vào dòng Skip and Create App ID góc phải điền thông tin cho app - Tiếp tục chọn mục "Cài đặt" sau Bạn tích chọn vào Nút "Thêm tảng" ==> chọn “Trang web” - Tiếp theo gõ địa trang website, Sau nhấn lưu thay đổi, gõ App Domain (App Domain bạn dõ nhiều Domain được) nhấn Lưu thay đổi lần để hoàn thành Mục cần lưu ý II Thêm khung Facebook Comment vào website bạn Bạn cần phải có quyền chỉnh sửa code website để thêm khung Facebook Comment vào website Bước 1: - Tại thẻ bạn thêm xmlns:fb='http://www.facebook.com/2008/fbml' Khi thẻ đầu trang web bạn có dạng: - Mã cho phép phiên trình duyệt cũ sử dụng khung Comment Facebook Bước 2: - Thêm vào trước thẻ bạn đoạn code sau: Trong YOUR_APP_ID bạn thay App ID/API Key ứng dụng mà lưu ý bạn ghi nhớ bước tạo APP Ngoài muốn nhận thông báo có comment bạn cần thêm đoạn code sau vào thẻ Với YOUR_FACEBOOK_USER_ID số ID tài khoản Facebook bạn Bạn quản lý thiết lập tùy chọn phần bình luận địa sau http://developers.facebook.com/tools/comments - Để lấy ID Facebook bạn làm sau: Truy cập trang cá nhân Fb dùng đăng ký App - Lưu lại ID Fb Address Bước 3: Thêm vào sau thẻ đoạn code: window.fbAsyncInit = function() { FB.init({ appId : 'YOUR_APP_ID', status : true, // check login status cookie : true, // enable cookies to allow the server to access the session xfbml : true // parse XFBML}); }; (function() { var e = document.createElement('script'); e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js'; e.async = true; document.getElementById('fb-root').appendChild(e); }()); Trong đó, tương tự bước trên, bạn thay YOUR_APP_ID App ID/API Key bạn vào Bước 4: - Chèn đoạn code sau vào khu vực mà bạn muốn hiển thị khung Facebook Comment data- Trong đó, YOUR_WEBPAGE_HREF bạn thay link trang bạn muốn hiển thị khung Facebook Comment Nếu bạn muốn hiển thị khung comment cho trang khác với nội dung khác nhau, bạn thay YOUR_WEBPAGE_HREF liên kết tương ứng VD: Trang muốn thêm khung comment trang chi tiết sản phẩm đoạn code khung comment sau: Save lại.Vậy xong phần Code Refresh lại website bạn để thưởng thức thành III Cài đặt thêm thông tin Quản lý Comment Đầu tiên bạn vào liên kết sau: http://developers.facebook.com/tools/comments/ Đây link để bạn quản lý Comment từ website bạn Bạn thêm vào blacklist, xóa comment, ban user Bước 1: Nhấp vào Cài đặt - Ở bạn cài đặt chức quản lý comment website như: kiểm duyệt comment, thêm moderators để quản lý, chặn từ cho spam, HẾT [...]... nữa để hoàn thành Mục cần lưu ý 3 2 1 II Thêm khung Facebook Comment vào website của bạn Bạn cần phải có quyền chỉnh sửa code website để có thể thêm khung Facebook Comment vào website của mình Bước 1: - Tại thẻ bạn thêm xmlns:fb='http://www .facebook. com/2008/fbml' Khi đó thẻ ở đầu trang web của bạn sẽ có dạng: - Mã này cho phép các phiên... content="YOUR _FACEBOOK_ USER_ID" /> Với YOUR _FACEBOOK_ USER_ID là số ID tài khoản Facebook của bạn Bạn có thể quản lý và thiết lập tùy chọn phần bình luận tại địa chỉ sau http://developers .facebook. com/tools/comments - Để lấy được ID Facebook các bạn làm như sau: Truy cập trang cá nhân Fb dùng đăng ký App 1 - Lưu lại ID Fb trên thanh Address Bước 3: Thêm vào ngay sau thẻ đoạn code: ... Comment của Facebook Bước 2: - Thêm vào trước thẻ của bạn đoạn code sau: Trong đó thì YOUR_APP_ID bạn thay bằng App ID /API Key của ứng dụng mà mình đã lưu ý các bạn ghi nhớ ở bước tạo APP Ngoài ra nếu muốn nhận thông báo mỗi khi có comment mới thì bạn chỉ cần thêm đoạn code sau vào thẻ