自定义简单的like按钮(不是facebook)

Posted

技术标签:

【中文标题】自定义简单的like按钮(不是facebook)【英文标题】:Custom simple like button (not facebook) 【发布时间】:2013-05-31 12:53:12 【问题描述】:

我正在寻找向我的网站添加简单的赞按钮的最简单方法。基本上,一个按钮,当被点击时 - 变成一个新的图形(让你知道你点击了它),不能再次点击,并发送到一个 php 脚本,以便服务器知道你喜欢什么。

我认为一个好的技术可能是在 iframe 中放置一个like 按钮,这样您就可以单击它,并且 php 页面可能会回显“感谢您喜欢这个” - 但问题是 iframe 必须有一个来源。我不希望将大量外部文件加载到每个页面中。有什么方法可以让我只使用 iframe 标记并将 html 放入其中而不将其放在外部?

【问题讨论】:

您可以使用javascript吗?您可以使用 ajax 调用并让处理程序更改按钮的内容。 您的 iframe 来源可能是 mysite.com/like.php?id=135325 【参考方案1】:

希望这是有道理的。我不知道你的服务器结构,所以我很难构建一个完整的例子,但这应该会让你站起来!

文件:Index.php

// query the database and check to see if there is a record for this content piece and ip address
// select count() from statistics where contentId='1' and ip='0.0.0.0' limit 1;
$contentLiked = false;

?>
<html>
<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
    <script src="site.js"></script>
</head>
<body>
<? if(!$contentLiked): ?>
<a href="JavaScript:void(0);" rel="1" class="likeButton status">like</a>
<? else: ?>
<a href="JavaScript:void(0);" rel="1" class="likeButton status liked">unlike</a>
<? endif ?>
</body>
</html>

文件:site.js

$(document).ready(function() 

    $('.likeButton').click(function() 

        var contentId = $(this).attr('rel');
        var link = this;

        if(!$(link).hasClass('liked')) 
            $.post("like.php",  Id: contentId ).done(function(data)          
                if(data) 
                    $(link).addClass('liked');
                    $(link).html('liked');
                
            );
        

    );
);

文件:like.php

<?

    $contentId = $_POST['Id'];
    $timestamp = time();
    $usersIP = $_SERVER['REMOTE_ADDR'];

    // php code to update the database
    // insert: contentId, timestamp, ip address


    // if injected then echo / print true;
    echo 'true';

?>

【讨论】:

这似乎工作得几乎完美无缺,除了在 like.php 文件中,我必须将第一行从 您需要确保来自“like.php”的响应返回“true”的回显(或打印)值。如果您在 site.js 中注意到,它正在寻找“true”的响应以更新文本措辞。如果您觉得这个答案解决了您的问题,能否将其标记为有效答案?【参考方案2】:

您应该使用jquery animate。它允许您在使用 jquery 选择的 HTML 元素上创建动画。

使用 Jquery,使用 'click' 事件,您可以使用动画效果,并且有这样的效果:

$("#my-button").click(function()
    $(this).animate(
        height: 'toggle'
    , 500, function()
        $(this).animate(
            height: 'toggle'
        , 500);
    );
);

请参阅以下example 这样做

【讨论】:

以上是关于自定义简单的like按钮(不是facebook)的主要内容,如果未能解决你的问题,请参考以下文章

自定义like按钮IOS SDK

使用自定义登录按钮检索Facebook页面

我可以为自定义对象创建名为“Like”的facebook自定义图形API操作吗?

ios实现like按钮的正确方法

Facebook Like 按钮显示喜欢、分享和评论的总数 - 而不仅仅是喜欢的数量

自定义 Facebook 登录视图 Swift