JavaScript « Свой аналог кнопок Like, +1, Мне нравится

Хочу для своего сайта сделать аналог сабжевых кнопок. Кнопка отображается в iframe и все работает хорошо, но вот вопрос: как сделать event tracking? Дело в том, что включаться код кнопки будет на другом домене (что естественно) и вызвать callback из iframe напрямую я не могу.
Как это делает Facebook, Google и все остальные???

Уточнение: я знаю, что можно навесить onLoad на iframe и менять window.location.href внутри него, но мне это не подходит - хочу делать без перезагрузки iframe
0
facebook google iframe like plus

1 ответов

В общем, в конце концов, по совету с Хабры решил проблему с использованием easyXDM

0

http://yoursite.com/LikeButton.js
----------------------------------------------


LikeButton = function(id, app, click, ctx) {
  ctx = ctx || document;
  this.el = ctx.getElementById(id);
  this.el.onClick = function() {
    var i = ctx.createElement('iframe');
    i.src = 'http://yoursite.com/LikeButton.php?app=' + app;
    i.onreadystatechange = function() {
      if(i.readyState == 'complete') {
        click(eval('(' + (i.contentWindow.name || '{}') + ')');
        i.parentNode.removeChild(i);
      }
    }
  }
}
 

http://yoursite.com/LikeButton.php
----------------------------------------------

<?php
  $user = empty($_SESSION['CurrentLoginedUserInfo']) ? null : $_SESSION['CurrentLoginedUserInfo'];
  $app = empty($_GET['app']) ? null : $_GET['app'];
  $domain = empty($_SERVER['HTTP_X_FORWARDED_HOST']) ? null : $_SERVER['HTTP_X_FORWARDED_HOST'];
  if($user && $app && $domain)
  {
    //проверить app & domain
    //UPDATE table Set like=like+1 where `app`=$app limit 1;
    //INSERT INTO `user_id` = $user['id']
    $data = array('error' => 0, 'message' => 'Ваш голос учтен.');
  }
  else
  {
    $data = array('error' => 1, 'message' => 'Вы не вошли на сайте: <a href="http://yoursite.com/login.php">yoursite.com</a>');
  }
  echo "<html><head><script type='text/javascript'>window.name='" .
    json_encode($data) . "';</script></head></html>";
?>
 
пользовательский сайт http://test.com/test.html
----------------------------------------------

<html>
  <head>
    <script type='text/javascript' src="http://yoursite.com/LikeButton.js"></script>
    <script type='text/javascript'>
      window.onload = function() {
        var likemsg = document.getElementById('likemsg'),
        like = new LikeButton('like', 'aplicationID', function(data) {
          likemsg.innerHTML = data.message;
          likemsg.className = 'msg' + data.error;
        });
    </script>
    <style type="text/css">
      .msg0{color:#0FFF0F}
      .msg1{color:#FF0F0F}
    </style>
  </head>
  <body>
    <input id="like" type="button" style="padding:7px;background:#069;color:#fff;border:none" value="нравиться!"/>
    <span id="likemsg"></span>
  </body>
</html>
 

что-то вроде этого, признаюсь честно - написал но не проверял.
1

Ну вот вариант с разными доменами:


$(document).ready(function() {
$('#like').click(function () {
dataString = 'тут id к примеру';
//можно добавить еще параметры
$.getJSON('http://domain.ru/like.php?'+dataString+'&jsoncallback=?', function(json) {
$("#like").html(json.like_push);
$('#like').fadeIn(4000);
});
 });
});
 

HTML элемент страницы:


 <span id="like">I like</span>
 

Его можно размещать на каком угодно домене

Ну и like.php который может лежать на другом домене.


<?php
 if($_REQUEST['like_push']) {
  $vers = mysql_escape_string($_REQUEST['like_push']);  
  $jsoncallback = mysql_escape_string($_REQUEST['jsoncallback']);
  $ip_adress = $_SERVER['REMOTE_ADDR'];
  $referer = htmlspecialchars($_SERVER['HTTP_REFERER']);
              $request = $_SERVER['REQUEST_URI'];
  тут проверка голоса и запись
}
?>
 

1

Лови готовый код:


<script type="text/javascript">
$(document).ready(function () {
        $(".vis").click(function () {
         like = $(this).attr('rel');
          var my_name_is = 'тут кто голосовал';
         $.post("./like.php", {
            like: like,
      my_name_is: my_name_is      
        }, function (data) {
            $(".visitNumb_"+i_want_this_party).html(data);
      $(".visitNumb_"+i_want_this_party).slideDown(1000);
        });
        return false;
    });
});
</script>
 

На странице:
<a href="" rel="ТУТ ID LIKE" class="vis">Like</a>

Код файла like.php

if (isset($_REQUEST['like'])) {
$like = htmlspecialchars(mysql_escape_string($_REQUEST['like']));
$my_name_is = htmlspecialchars(mysql_escape_string($_REQUEST['my_name_is']));  
       $select = "SELECT * FROM `like` WHERE `page_id`=".$like." AND `user_id`=".$my_name_is." AND `like_show`='1'";
       $rs = mysql_query($select) or die(mysql_error());
       if(mysql_num_rows($rs) > 0)
       {
       echo '<span class="like">Вы уже нажимали</span>';
     } else {
            $like_date = date("Y-m-d H:i:s");
              $sql = "INSERT INTO `like` VALUES ('NULL',  '".$like."', '".$my_name_is."', '".$like_date."', '1')";
              $rs = mysql_query($sql) or die(mysql_error());
        $qiwont = "SELECT COUNT(*) FROM `like` WHERE `page_id`=".$like." AND `i_want_show`='1'";
        $countiwont = mysql_query($qiwont);
        while($ciwont = mysql_fetch_array($countiwont))
        echo '<span class="i-wont-this2">+'.$ciwont[0].'</span>';
        }
}

В идеале проверка не голосовал ли этот человек уже. Если голосовал то выводить кол-во голосов. Если нет то дать возможность нажать. После этого записать в базу голос и вывести ответ. Не факт что код идеален, но работает

Если делать для разных доменов то наверное лучше кросдоменный код писать.
0

Тогда делать через json и все работает на любом домене.

0