Javascript 喜欢按钮-从哪里开始

我想在简单的HTML中创建一个自定义按钮，供网站管理员和网站所有者添加到他们的网站上，以显示该网页被“喜欢”的时间。就像Facebook那样，但没有身份验证

我创建了一个API

您可以发送一个URL，并可以在INT中获得like计数器（API将匹配我的SQL数据库中的URL，并返回like计数器）

您可以发送URL并设置链接计数器（API将匹配我的数据库中的URL，并将计数器增加+1）

我的API不使用身份验证，但它使用API密钥以避免被发送到服务器的不需要的请求破坏

我不知道从客户端开始，Facebook是如何做到的，查看它，传递URL返回该页面的喜欢总数

代码

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.10";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

（功能（d、s、id）{
var js，fjs=d.getElementsByTagName[0]；
if（d.getElementById（id））返回；
js=d.createElement；js.id=id；
js.src=“//connect.facebook.net/en_GB/sdk.js#xfml=1&version=v2.10”；
fjs.parentNode.insertBefore（js，fjs）；
}（文档“脚本”、“facebook jssdk”）；

HTML

结果

令人惊讶的是，它还应用了facebook CSS样式

我知道这是一个非常普通的问题，但我从哪里开始呢

---

干杯这个概念其实很简单

代码部分用于“注入”用于进行调用和显示计数器、添加CSS类等的js脚本

HTML部分用于显示“注入”js脚本中的数据

现在，“注入”脚本应该在使用它的页面上不需要任何要求的情况下工作（例如jQuery）

在您的脚本中，您可以有一个自调用函数，在浏览器下载并加载脚本后在jQuery中模拟“document ready”事件，或者您可以像Google analytics那样创建队列，并存储加载脚本时要运行的命令。

---

要进行“ajax”调用，可以使用

XMLHttpRequest

访问API方法。

不要将代码作为截图发布。将它粘贴到您的问题中（最好是作为一个工作示例，因此内置了js FIDLE ish编辑器）。您真正的问题是什么？这是“喜欢”按钮的样式吗？

我不知道从客户端开始是什么意思？你的浏览器不是你的客户吗@GeomanYabes我想为我的产品创建一个类似的按钮，所以当它被点击时——就像facebook或Google+等他们都有buttons@ManfredRadlwimmer代码添加，非常感谢你的指导，我只是在考虑API键，如果我公开了API密钥，那么拥有API密钥又有什么意义呢？如果我从API中删除了API密钥身份验证，那么我怎么知道API调用实际上是根据我提供的脚本进行的，现在是随机DDOSYeah，您可以生成“客户机密钥”并在脚本中将其用作配置设置和API调用，以验证客户端并防止恶意调用。
<div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-layout="box_count" data-action="like" data-size="small" data-show-faces="false" data-share="true"></div>