Hướng dẫn Google và FaceBook API

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 bằng tài khoản google sau đó chọn Web platform.

- Chọn “GET A KEY”

- Xuất hiện hộp thoại, chọn “CONTINUE”

- Cửa số mới xuất hiện, chọn “Create Project” sau đó “Continue”

- Chờ một lúc để Google tạo Project Màn hình mới xuất hiện, đặt tên key và chọn Create

- Lưu lại key của bạn

Bước 2: Tìm tọa độ của một địa điểm trên Google Maps

- Ví dụ bạn muốn đánh dấu cửa hàng trên 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 trên bản đồ và chọn “Đây là gì?”

- Một khung nhỏ phía dưới màn hình hiện lên cho biết tọa độ của địa điểm Trong hình tọa

độ trường HUTECH là (10.802145, 106.715001).

Bước 3: Chèn Google Maps vào website

- Bài này sẽ tạo google maps trong trang “Liên hệ” của website bán sách.

- Vào trang view của trang “Liên hệ”, paste đoạn code sau vào, thay YOUR-API-KEY bằng Key của bạn đã lấy ở bước 1 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);

<style>

#map {

width: 100%;

height: 400px;

}

</style>

<div id="map"></div>

<script>

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 của bản đồ

});

var marker = new google.maps.Marker({

position: latlng,

map: map,

title: "Your Title" //Tên hiển thị khi đưa chuột vào địa điểm

});

}

</script>

<script async defer

src="https://maps.googleapis.com/maps/api/js?key=YOUR-API-KEY&callback=initMap">

</script>

- Thẻ <div id="map"></div> là nơi sẽ hiển thị bản đồ

- Đến đây chúng ta đã hiển thị được bản đồ với địa điểm cửa hàng được đánh dấu khi người dùng load trang “Liên hệ”

Bước 4: Lấy vị trí hiện tại và tìm đường đi

- Thêm Button “Tìm đường đi” để hiển thị đường đến cửa hàng, khi click Button sẽ gọi hàm timDuongDi() trong JavaScript.

<button class="btn btn-primary" style="" onclick="timDuongDi()">Tìm đường đi</button>

- Thêm đoạn code sau vào trong thẻ <script></script>:

function timDuongDi() {

var latlng = new google.maps.LatLng(10.802145, 106.714965); //Vị trí của 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í của bạn');

map.setCenter(pos);

var directionsDisplay = new google.maps.DirectionsRenderer({

map: map

});

var request = {

destination: latlng, // Điểm đến là vị trí cửa hàng

origin: pos, // Điểm bắt đầu là vị trí hiện tại của 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;

}

</style>

<button class="btn btn-primary" style="" onclick="timDuongDi()">Tìm đường đi</button>

<div id="map"></div>

<script>

function initMap() {

var latlng = new google.maps.LatLng(10.802145, 106.714965); //Vị trí của 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 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í của 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.');

}

</script>

<script async defer

src="https://maps.googleapis.com/maps/api/js?

key=AIzaSyC4M0r4UZrpyrFzwHm7kUiQTaDzR8npPcg&callback=initMap">

</script>

- Đến đây khi nhấn vào nút “Tìm đường đi”, Google Maps sẽ tự động lấy vị trí hiện tại của bạn và hiển thị đường đi đến cửa hàng.

HƯỚNG DẪN CÀI ĐẶT FACEBOOK COMMENT API

I – FACEBOOK COMMENT API

 Bước 1 Tạo Facebook APP

Truy cập https://developers.facebook.com/apps

Click vào nút: Đăng ký ngay - (Nếu đã từng đăng ký thì bỏ qua bươc này)

- Chấp nhận chính sách và nhấn nút đăng ký

- Chọn nền tảng cho app

- Click vào dòng Skip and Create App ID trên góc phải và điền thông tin cho app

1

2

- Tiếp tục chọn mục " Cài đặt " sau đó Bạn sẽ tích chọn vào Nút " Thêm nền tảng " ==> chọn “ Trang web ”

3

2 1

- Tiếp theo gõ địa chỉ trang website, Sau khi nhấn lưu thay đổi , chúng ta mới gõ

App Domain (App Domain các bạn có thể dõ nhiều Domain cũng được) và nhấn

Lưu thay đổi 1 lần nữa để hoàn thành

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ẻ <html> bạn thêm xmlns:fb='http://www.facebook.com/2008/fbml' Khi đó thẻ <html> ở đầu trang web của bạn sẽ có dạng:

<html xmlns:fb='http://www.facebook.com/2008/fbml' >

- Mã này cho phép các phiên bản trình duyệt cũ cũng có thể sử dụng được khung Comment của Facebook.

Mục cần lưu ý

2

3

1

Bước 2:

- Thêm vào trước thẻ </head> của bạn đoạn code sau:

<meta property="fb:app_id" content=" YOUR_APP_ID " />

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ẻ <header>

<meta property="fb:admins" 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

- Lưu lại ID Fb trên thanh Address

Bước 3: Thêm vào ngay sau thẻ <body> đoạn code:

<div id="fb-root"></div>

<script>

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() {

1

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);

}());

</script>

Trong đó, tương tự như bước trên, bạn thay YOUR_APP_ID bằng App ID/API

Key của 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

<div class="fb-comments" data-href=" YOUR_WEBPAGE_HREF " data-width="760" data-num-posts="20"></div>

Trong đó, YOUR_WEBPAGE_HREF bạn thay bằng link của trang bạn muốn hiển thị khung Facebook Comment

Nếu bạn muốn hiển thị khung comment cho từng trang khác nhau với các nội dung khác nhau, bạn có thể thay thế YOUR_WEBPAGE_HREF bằng liên kết tương ứng.

VD: Trang mình muốn thêm khung comment là trang chi tiết của sản phẩm thì đoạn code khung comment sẽ như sau:

<div class="fb-comments"

data-href=" http://mvcbookstore.somee.com/BookStore/ChiTiet/@Model.Masach " data-width="100%" data-numposts="5"></div>

Save lại.Vậy là xong phần Code Refresh lại website của bạn để thưởng thức thành quả.

III Cài đặt thêm thông tin và Quản lý Comment

Đầu tiên bạn vào liên kết sau:

http://developers.facebook.com/tools/comments/

Đây cũng sẽ là link để bạn quản lý các Comment từ website của bạn Bạn có thể thêm ai đó vào blacklist, xóa comment, ban user

Bước 1: Nhấp vào Cài đặt

- Ở đây bạn có thể cài đặt được các chức năng quản lý đối với các comment trên website của mình như: kiểm duyệt các comment, thêm các moderators để quản

lý, chặn các từ được cho là spam,

-