如何在 Ajax 驱动的页面中添加脸谱网“喜欢”按钮-JavaScript中文网-JavaScript教程资源分享门户

随着社交媒体的不断发展，脸谱网已经成为了许多网站必备的社交化工具之一。在我们的网站上添加脸谱网的“喜欢”按钮，可以方便用户快速分享和推广我们的内容。本文将介绍如何在使用 Ajax 技术的页面中添加脸谱网“喜欢”按钮。

准备工作

首先，在使用脸谱网“喜欢”按钮之前，我们需要创建一个脸谱网开发者账户，并且注册一个应用程序。在注册应用程序时，我们需要获取一个应用程序 ID（App ID），这个 ID 将会在后续的代码实现中用到。

接下来，我们需要引入脸谱网的 JavaScript SDK 。该 SDK 可以通过以下代码片段加载：

<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId      : 'your-app-id',
      cookie     : true,
      xfbml      : true,
      version    : 'v11.0'
    });
  };

  (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 = "https://connect.facebook.net/en_US/sdk.js";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));
</script>

请注意将 your-app-id 替换为您的应用程序 ID。

添加“喜欢”按钮

在页面中添加脸谱网的“喜欢”按钮非常简单。我们只需要使用以下代码片段即可：

<div class="fb-like" data-href="https://www.example.com" data-width="" data-layout="standard" data-action="like" data-size="small" data-share="true"></div>

其中，data-href 属性应该设置为您想要用户分享的网址。例如，如果您希望用户分享当前页面的网址，可以将 data-href 属性设置为 window.location.href 。

添加回调函数

当用户点击“喜欢”按钮时，我们可能希望执行一些特定的操作，例如跟踪用户行为或向用户显示相关内容。为了实现这些功能，我们可以添加一个回调函数来处理点击事件。以下是一个示例回调函数：

function likeCallback(response) {
  console.log('User liked the page!');
}

然后，我们需要将回调函数注册到“喜欢”按钮上：

<div class="fb-like" data-href="https://www.example.com" data-width="" data-layout="standard" data-action="like" data-size="small" data-share="true" data-callback="likeCallback"></div>

总结

在本文中，我们介绍了如何在 Ajax 驱动的页面中添加脸谱网“喜欢”按钮。我们首先需要准备一个脸谱网开发者账户和应用程序 ID，然后加载脸谱网的 JavaScript SDK，并添加“喜欢”按钮并注册回调函数。通过这些步骤，我们可以方便地在我们的网站上集成脸谱网的社交功能。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/12704