21/08/2017

Hướng dẫn tạo javascript lấy số lượt theo dõi từ các trang mạng xã hội

Mạng xã hội ngày nay rất phổ biến và là một trong những kênh quan trọng hàng đầu của người viết blog. Đây là kênh trực tiếp đưa người đọc tiếp cận với blog và bài viết nhanh nhất, nếu các kênh của bạn có lượng fan đông đảo thì yếu tố tất nhiên lượng xem bài viết cũng gia tăng đáng kể. mình chỉ viết giới thiệu vài dòng nếu muốn tìm hiểu sâu bạn có thể tìm kiếm các bài viết trên mạng đề cập đến vấn đề này để hiểu rõ hơn.

Vấn đề chính ở đây mình muốn đề cập đến là làm sao lấy được số người theo dõi thực từ các kênh mạng xã hội và hiển thị bằng con số cụ thể. Vấn đề này xem ra tưởng chừng như rất đơn giản nhưng đi vào thực hiện lại gặp rất nhiều khó khăn bởi hai yếu tố: thứ nhất mỗi kênh mạng xã hội tính đến thời điểm hiện tại đều sử dụng khóa bí mật hay còn gọi là API key và yếu tố thứ hai là phương thức GET của mỗi kênh lại khác nhau. Do đó chúng ta không thể sử dụng những đoạn javascript được viết sẵn chia sẻ trên mạng mà chúng ta phải tự làm thủ công.

Trong bài viết này mình chỉ sử dụng lấy số liệu của 4 kênh mạng phổ biến trên thế giới đó là Facebook, Twitter, Google Plus và Youtube. Nếu có thời gian mình sẽ cập nhật đầy đủ các kênh mạng khác trong bài viết này. Để cho các bạn dễ tiếp cận mình sẽ viết javascript từng kênh mạng riêng và như đã đề cập mỗi kênh mạng mình sẽ hướng dẫn hai yếu tố lấy API key và phương thức GET và điều tất yếu bạn phải đã có sẵn các kênh như đối với Facebook là Fanpage hoặc trang cá nhân, Twitter, Google Plus và Youtube.


Bây giờ mình sẽ đi vào từng kênh mạng cụ thể

1. Facebook

1.1. Lấy Facebook ID

Việc này khá đơn giản bạn chỉ cần truy cập vào trang cá nhân hoặc fanpage của bạn và hãy xem Facebook ID trên địa chỉ trình duyệt ví dụ trang của mình có địa chỉ https://www.facebook.com/blogthuthuatwin10 thì blogthuthuatwin10 chính là Facebook ID

1.2. Lấy API key (App Token)

Nếu bạn muốn lấy được API Key (có thể gọi là access token hoặc khóa bí mật, ở đây mình gọi chung tất cả là API key) của Facebook bạn phải tạo ứng dụng trước thì mới có được API Key. Nếu bạn chưa có ứng dụng thì đi tới trang https://developers.facebook.com đăng nhập bằng tài khoản Facebook của bạn và chọn Bắt đầu để tạo mới ứng dụng.

Trường hợp bạn đã có ứng dụng rồi chỉ cần truy cập địa chỉ https://developers.facebook.com/tools/access_token bạn sẽ thấy ngay access token bằng dòng hiện thị ở App Token

1.3. Tạo javascript

<script>
//<![CDATA[
       var facebookid = 'Facebook ID';
       var facebookapikey = 'App Token';
       var url = 'https://graph.facebook.com/'+facebookid+'?fields=fan_count&access_token='+facebookapikey;

       $.ajax({
         type: 'GET',
         dataType: 'json',
         url: url,
         success: function(data) {  
         var facebookfancount = data.fan_count;
            $('.facebookfancount').html(facebookfancount);
         }
      });
//]]>
</script>

Bạn hãy đặt đoạn javascript ở trước thẻ </head>. Để hiển thị số lượt thích trang sử dụng đoạn mã sau:

<span class='facebookfancount'></span>

2. Twitter

2.1. Lấy Twitter ID

Có một số cách xem được Twitter ID của tài khoản Twitter nhưng nhanh nhất bạn hãy truy cập trang http://gettwitterid.com điền tên tài khoản rồi bấm get user id. Tên tài khoản được hiển thị trên trình duyệt ví dụ trang cá nhân của mình là https://twitter.com/thuthuatwin10 thì thuthuatwin10 chính là tên tài khoản twitter hay twitter username.

2.2. Lấy API key

Hiện tại bạn phải sử dụng ứng dụng thứ ba mới lấy được số lượt theo dõi twitter hay nói cách khác bạn đăng ký ứng dụng và ủy quyền sử dụng cho ứng dụng này, đầu tiên truy cập trang https://twittercounter.com đăng ký bằng tài khoản twitter của bạn xong tiếp tục truy cập trang https://twittercounter.com/pages/api nhấn ào nút Request an API key sau đó điền vào các ô My name is: ,My email address is:, I'm going to use Twitter Counter's API to:followers_current xong nhấn vào nút Submit để gửi yêu cầu.

Sau khi gửi xong yêu cầu sẽ có một thư từ dịch vụ twittercounter trong đó có API Key gửi đến email mà bạn đã sử dụng đăng ký trong ô My email address is:

2.3. Tạo javascript

<script>
//<![CDATA[
        var twitterid = 'Twitter ID';
        var twitterapikey = 'API Key';
        var url = 'http://api.twittercounter.com/?apikey='+twitterapikey+'&twitter_id='+twitterid+'&output=jsonp&callback=myCallbackMethod';

        $.ajax({
         type: "GET",
         dataType: "jsonp",
         url: url,
         success: function (data) {
         var twitterfollowcount = data.followers_current;
            $(".twitterfollowcount").html(twitterfollowcount);
         }
      });
//]]>
</script>

Bạn hãy đặt đoạn javascript ở trước thẻ </head>. Để hiển thị số lượt người theo dõi twitter sử dụng đoạn mã sau:

<span class='twitterfollowcount'></span>

3. Google Plus

3.1 Lấy Google Plus ID

Đầu tiên bạn truy cập địa chỉ https://plus.google.com đăng nhập bằng tài khoản gmail của bạn, sau khi đăng nhập xong ở tab Hồ sơ (Profile) bên trái chuột phải chọn Sao chép liên kết (Copy Link Address) tiếp tục dán nó vào tab mới của trình duyệt bạn sẽ lấy được số Google Plus ID bao gồm 21 số ví dụ trang của mình là https://plus.google.com/107358436079093222807 thì 107358436079093222807 chính là Google Plus ID.

3.2 Lấy Google API key

Bước 1: Truy cập địa chỉ https://console.cloud.google.com/apis/dashboard chọn đăng nhập bằng tài khoản gmail muốn lấy API Key

Bước 2: Trong bảng điều khiển Dashboard bên phải nhấp chọn nút ENABLE API trình duyệt sẽ chuyển qua tab Library bên trái

Bước 3: Trong phần Social APIs bên phải tab Library nhấp chọn Google+ API tích vào ô Yes rồi chọn ACCEPT xong bấm chọn ENABLE để kích hoạt Google+ API

Bước 4: Tiếp tục trong tab Credentials bên trái ở bên phải chọn Create để tạo một project mới, đặt tên cho project mới xong chọn Create

Bước 5: Khi tạo project xong tiếp tục bấm nút Create credentials, trong hộp thoại sổ xuống chọn API key. Khi tạo xong hãy làm theo hình bên dưới


Với Name và Accept requests from these HTTP referrers (web sites) do bạn tự đặt và khung API key chính là API key mà bạn cần lấy.

3.3 Tạo javascript

<script>
//<![CDATA[
       var profileid = 'Google Plus ID';
       var googleapikey = 'API key';
       var url = 'https://www.googleapis.com/plus/v1/people/'+profileid+'?key='+googleapikey;

       $.ajax({
         type: 'GET',
         dataType: 'json',
         url: url,
         success: function(data) {  
         var googlefollowcount = data.circledByCount;
            $('.googlefollowcount').html(googlefollowcount);
         }
      });
//]]>
</script>

Bạn hãy đặt đoạn javascript ở trước thẻ </head>. Để hiển thị số lượt theo dõi Google Plus sử dụng đoạn mã sau:

<span class='googlefollowcount'></span>

4. YouTube

Xem thêm
Hướng dẫn thống kê số lượt xem, thích, không thích và nhận xét từ một video trên YouTube

4.1. Lấy Yourtube Channel ID

Việc lấy Yourtube Channel ID rất đơn giản bạn chỉ cần truy cập youtube vào kênh của bạn và xem Channel ID trên địa chỉ trình duyệt. Ví dụ kênh youtube của mình là https://www.youtube.com/channel/UCuEpSc3yitS2Gyz2XdMlSPg thì UCuEpSc3yitS2Gyz2XdMlSPg chính là Channel ID

4.2. Lấy Google API key

Google sử dụng API key chung cho tất cả dịch vụ của họ do đó nếu bạn đã tạo API key từ Google Plus bạn có thể sử dụng API key này cho Youtube. Vậy bạn chỉ cần làm từ bước một tới bước ba trong hướng dẫn lấy API key của Google Plus là được nghĩa là bạn chỉ cần bật dịch vụ YouTube Data API lên là xong.

4.3. Tạo javascript

<script>
//<![CDATA[
       var channelid = 'Youtube Channel ID';
       var googleapikey = 'API key';
       var url = 'https://www.googleapis.com/youtube/v3/channels?part=statistics&id='+channelid+'&key='+googleapikey+'';

       $.ajax({
         type: 'GET',
         dataType: 'json',
         url: url,
         success: function(data) {  
         var youtubesubscribercount = data.items[0].statistics.subscriberCount;
            $('.youtubesubscribercount').html(youtubesubscribercount);
         }
      });
//]]>
</script>

Bạn hãy đặt đoạn javascript ở trước thẻ </head>. Để hiển thị số lượt đăng ký kênh sử dụng đoạn mã sau:

<span class='youtubesubscribercount'></span>

1 nhận xét
  1. Tuyệt vời luôn bác ạ.
    trước giờ mới thấy có mỗi bác chia sẻ cái này

    Trả lờiXóa