Quản lý nút Like, +1, Comment của Facebook và Google +1

Sau 1 đêm nghiên cứu và research thì cuối cùng mình cũng làm được 1 cái ví dụ cho việc quản lý action Like, +1, Comment của Facebook và Google.
Đối với Google +1 thì việc tạo đoạn code để add vào website tương đối vì Google đã cung cấp 1 tool tương tự như Facebook vậy. http://www.google.com/webmasters/+1/button/. Ngoài ra để tìm hiểu thêm về các thuộc tính khác của button Google +1 thì có thể tham khảo tại link này http://code.google.com/intl/en/apis/+1button/#plusonetag-parameters


Để tạo được button Google +1 trước tiên ta phải add script từ Google vào trước

<link rel="canonical" href="http://www.thanhlongcandy.com.vn" />
    <script type="text/javascript" src="https://apis.google.com/js/plusone.js">
      {"parsetags": "explicit"}
    </script>

Giải thích 1 chút:
Tag link ở đây để chỉ cho Google +1 biết là mình sẽ +1 cho URL nào, như ta thấy ở vd trên thì là cho URL www.thanhlongcandy.com.vn. Còn tag script ở bên dưới thì đơn giản chỉ là load đoạn code js của Google về, đối với tham số parsetag có thể tham khảo ở link bên trên.
Bước kế tiếp chúng ta sẽ add Google +1 vào như sau:

<div id="content">
      <g:plusone count="true" callback="plusClick"></g:plusone>
    </div>
    <script type="text/javascript">
gapi.plusone.go("content");

function plusClick(data){
  if(data.state=="on"){
   alert('it is on');
  }else{
   alert('it is off');
  }
   }
</script>

Tag "g:plugsone" này khi hiển thị sẽ được thay thể bằng hình của Google +1 như ta thường thấy. Tham số "callback" nhằm chỉ định hàm javascript sẽ được gọi sau khi xử lý xong việc +1 hoặc -1. Ta có thể thấy bên dưới có 1 funciton là "plusClick", function này được chỉ định sẽ được gọi khi người dùng click vào +1 hay -1.
Trong function "plusClick" có 1 tham số là "data", tham số này cho ta biết được là user click +1 hay -1. Như ta thấy trong code thì +1 chính là "on" và ngược lại là "off".
Với ví dụ ở trên ta có thể áp dụng như thế nào?
1. Khi user click vào +1 hay -1 chúng ta có thể chèn thêm 1 số đoạn code nhằm xử lý riêng dành cho website của mình như lưu database ai đã +1 hoặc ai đã -1.
2. Hoặc giả như nếu user click -1 mình sẽ popup lên 1 window hỏi rằng "Hey, seo mày -1 teo zị?".
3. Hoặc khi click +1 sẽ hiện lên "Thank you" hay "Bạn đã trúng thưởng 1 chiếc dép" :))
Nói chung là tùy theo sự tưởng tượng mà ta sẽ có những thứ thú vị khác nhau.
Với Facebook cũng tương tự như vậy và ta có thêm cái comment nữa. Do đó mình sẽ chỉ post code lên thôi

<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
 <fb:like></fb:like>
 <div id="fb-root"></div>
 <fb:comments href="www.thanhlongcandy.com.vn" num_posts="2" width="500"></fb:comments>
<script type="text/javascript">
 FB.Event.subscribe('edge.create', function(targetUrl) {
  alert('fb like');

 });
 
 FB.Event.subscribe('edge.remove', function(targetUrl) {
  alert('fb unlike');

 });
 
 FB.Event.subscribe('comment.create', function(targetUrl) {
  alert('comment create:'+targetUrl.href);
 });
 </script>

Đây là source code của toàn bộ những gì được diễn giải bên trên