像按钮 - 从哪里开始

Question

我想用简单的HTML创建一个自定义按钮，网站管理员和网站所有者可以在他们的网站上添加，这将显示网页的时间长度＆＃34; LIKED＆＃34;。就像Facebook做的那样，但没有认证。

我创建了一个

的API

1. 您可以发送一个URL，并且可以在INT中获取类似的计数器（API将匹配我的SQL数据库中的URL并返回类似的计数器）
2. 您可以发送一个URL并设置链接计数器（API将与我的数据库中的URL匹配，并将计数器增加+1）

http://localhost:88899/api/V2/HITS/GET?URL=https://forum.xda-developers.com/ http://localhost:88899/api/V2/HITS/SET?URL=https://forum.xda-developers.com/

我的API没有使用身份验证，但它确实使用API​​密钥不会受到对服务器的不必要请求的抨击。

我不知道从哪里开始与客户端，Facebook如何做到这一点，看着它，传递URL返回该页面的总喜欢。

CODE

<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>

HTML

<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>

结果



令人惊讶的是它也适用于facebook CSS样式。

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

干杯

Answer 1

这个概念实际上非常简单。

1. 代码部分用于“注入”用于进行调用的js脚本并显示计数器，添加CSS类等...
2. HTML部分用于显示“注入”js脚本中的数据。

现在，“注入”脚本应该对使用它的页面没有要求（例如jQuery）。

在您的脚本中，您可以使用自调用函数在浏览器下载并加载脚本后在jQuery中模拟“文档就绪”事件，或者您可以创建像Google Analytics一样的队列并存储您要运行的命令加载脚本时 要进行“ajax”调用，您可以使用XMLHttpRequest访问API方法。