如何创建一个Facebook风格的“喜欢”系统？

我一直在试图找到一个Facebook风格的“喜欢”按钮在线示例，但一直未能找到像这样的东西。我想要做的是，在用户可以按下的图像下方放置一个按钮。一旦按下，它将增加图像记录的数据库中的值，然后通过将+1添加到现有数量来反映页面上的添加。我可以猜测这需要PHP，SQL和jQuery来完成。问题是我不知道从哪里开始。我已经创建了一个PHP脚本，通过给图像ID添加到我的Like的特定图像。我创建了一个jQuery发布按钮，发布到PHP并喜欢图片。我坚持的事情是更新页面以反映类似。如何创建一个Facebook风格的“喜欢”系统？

对于初学者来说，我认为我迄今为止所做的代码完全是恶心的大声笑。

这是我所有的代码。 PHP输出喜欢计数和喜欢按钮，加上代码。 $信息是我的整个图像文件表的结果数组：

Echo "<b>Likes:</b> ".$info['likes'] . "</span>"; 
Echo '<script src="http://code.jquery.com/jquery-latest.js"></script><script  type="text/javascript">function test() {$.post("http://stormstorm.com/like.php? id='.$info['fileid'].'")</script>'; 
Echo '<br /><img onClick="test();" src="img/like.jpg"></p>';

的PHP对于像like.php递增：

$id = $_GET['id']; 
mysql_query("UPDATE files SET likes=likes+1 WHERE fileid=".$id) or die(mysql_error());

为喜欢的PHP工作正常了，我我很高兴。但表现出喜欢的东西只是糟透了，我想。事情是我有一个list.php将打印数据库的内容一个接一个打印所有列出的图像。因此它会一遍又一遍地打印相同的脚本副本，通常会将当前图像ID硬编码到发布中。我对此很新，但觉得这段代码很糟糕，再加上它不会更新图像部分。

我想用JavaScript来简单地得到喜欢的元素和++它，但是，然后它打我。我的列表将有超过100个这些相同的元素。你或许可以告诉我可能会以错误的方式接近，我希望有人能帮助我解决这个问题。

来源

2012-03-05 Linkandzelda

它看起来像你有一般的想法，只是一个粗略的实施。

您可能要指定为每个图像对应元件，并按下按钮后更新的内部内容...

<img src="xxx.jpg"> 
<p> 
    <a href="javascript:test({image_id});">Like</a> <span id="{image_id}_count">150</span> 
</p>

其中{} image_id显然是唯一的每个图像。传递测试（{} image_id），然后更新计数总成功的HTML ...

function test(id) 
{ 
    $.ajax({ 
     url: 'http://stormstorm.com/like.php', 
     method: 'get', 
     data: {id: id}, 
     dataType: json, 
     success: function(data) 
     { 
      $('#' + id + '_count').html(data.total); 
     } 
    }); 
}

在你的PHP

你会做你所做的事，除了返回一个JSON编码阵列回JS更新...

$id = mysql_real_escape_string($_GET['id']); 
mysql_query("UPDATE files SET likes=likes+1 WHERE fileid=".$id); 
if(mysql_affected_rows() > 0) 
{ 
    $sql = mysql_fetch_assoc(mysql_query("SELECT `likes` FROM `files` WHERE `fileid` = ".$id)); 

    echo json_encode(array('total' => $sql[0]['likes'])); 
}

请记住，这是一个非常不好的实现。真正的系统肯定是一个不允许人们一遍又一遍地重复点击按钮来增加一些东西的地方。根据您的需要，当然，您应该通过登录来限制它，甚至记录相对于他们喜欢的文件的用户信息，而不仅仅是增加数据库中的数字。因此，您将拥有一个存储每个类似信息的关系表。这样，您可以查询数据库，以确保用户在增加数字之前还没有喜欢该文件。

希望是有道理的。

来源

2012-03-05 22:49:00

谢谢，正是我所需要的。 – Linkandzelda 2012-06-29 18:19:11

我认为你是正确的方向。您可以在php中更新调用后返回喜欢的数量，并让jquery更新类似的数量。作为例子，我添加了一些代码。

HTML：

<form name="like_form"> 
    <input type="hidden" name="id" value="<?php echo $info['fileid']; ?>" /> 
    Likes: <span class="like_count"><?php echo $info['likes']; ?></span> 
    <img src="img/like.jpg" class="like_click" /> 
</form>

的Javascript：

$(document).ready(function() { 
    $('img.like_click').click(function() { 
    var form = $(this).closest('form[name=like_form]'); 
    var id = $(form).find('input[name=id]').val(); 
    $.post("http://stormstorm.com/like.php?id='" + id + "', function(data) { 
     $(form).find('span.like_count').html(data); 
    }); 
});

PHP：（*注：我没有检查语法，但希望这将是足够的代码来理解的想法）

$id = $_GET['id']; 
mysql_query("UPDATE files SET likes=likes+1 WHERE fileid=".$id) or die(mysql_error()); 
$result = mysql_query("SELECT likes from files where fileid=" . $id) or die(mysql_error()); 
$row = mysql_fetch_assoc($result); 
echo $row['likes'];

来源

2012-03-05 22:46:19 adidasadida

如何创建一个Facebook风格的“喜欢”系统？

回答

相关问题