### [使用 UserPro 增强您的 WordPress 社区：集成 Google 地图和社交登录](https://www.prosaas.cn/article/5635) **Published:** 2023-09-01T04:41:01 **Author:** 5201314 **Excerpt:** 社交功能不仅仅适用于 Facebook、Twitter 和 LinkedIn 等专用社交网络。 许多受欢迎的网… 社交功能不仅仅适用于 Facebook、Twitter 和 LinkedIn 等专用社交网络。 许多受欢迎的网站都受益于一些适当的社交功能。例如，TripAdvisor、Yelp 和 Airbnb 都为访问者提供了创建个人资料并与其他用户联系的选项。即使 Envato 也具有社交功能 - 如果您注册 Envato 帐户，您将能够关注其他用户并对文章、教程或课程发表评论。 - ![](//zhiqipro.oss-cn-beijing.aliyuncs.com/2023/12/20231212124212575.jpg) WordPress - ![](//zhiqipro.oss-cn-beijing.aliyuncs.com/2023/12/20231212124212534.jpg)WordPress 插件 - ![](//zhiqipro.oss-cn-beijing.aliyuncs.com/2023/12/20231212124212678.jpg)WordPress 插件 - ![](//zhiqipro.oss-cn-beijing.aliyuncs.com/2023/12/20231212124212849.jpg)WordPress 在这个由两部分组成的系列的第一篇文章中，我们设置了 UserPro，这是一个流行的 WordPress 插件，可以轻松地向您的网站添加一系列社交功能。我们实现了发展繁荣的在线社区所需的一切，并解决了您在此过程中可能遇到的一些故障排除问题。 在后续行动中，我们将通过 Google 地图、Facebook 和 Twitter 集成来增强我们的在线社区。在本文结束时，访问您网站的每个人都将能够使用其现有的 Twitter 或 Facebook 凭据快速轻松地创建帐户，并且还可以选择将其位置显示为用户个人资料的一部分。 ![](//zhiqipro.oss-cn-beijing.aliyuncs.com/2023/12/20231212124212943.png) ### 通过 Google 地图显示用户的位置 有时，将用户的位置显示为个人资料的一部分可能会有所帮助，例如，如果您正在开发一个可以帮助人们与当地其他人联系的网站。如果您正在为跨多个办公室的企业构建员工目录，那么显示每个员工的工作地点也可能很有用。在这些情况下，UserPro 可以与 Google 地图集成，将用户的位置包含在其个人资料中。 添加 Google 地图内容是一个多步骤的过程，需要您： - 启用 UserPro 的 Google 地图功能。 - 前往 Google API 控制台并生成 API 密钥。 - 将此 API 密钥添加到您的 WordPress 帐户。 - 更新您的**修改个人资料**页面，添加一些用户可以输入地址的附加字段。 在将 Google 地图内容添加到您的网站之前，请考虑是否需要采取其他措施来帮助保护社区的隐私。例如，您可能决定将您的用户个人资料设为私有，以便访问您网站的每个人都无法看到位置信息，或者您可能会限制特定用户在共享其位置时的方式。 #### 激活 Google 地图支持 要启用 Google 地图集成，请首先从 WordPress 管理菜单中选择 **UserPro > Google 地图**。打开**启用 Google 地图**下拉菜单，然后选择**是**。 现在选择**生成您的 API 密钥**链接。 Google API 控制台现在将在新选项卡中打开。确保在下拉列表中选择**创建项目**，然后选择**继续**。 ![](//zhiqipro.oss-cn-beijing.aliyuncs.com/2023/12/20231212124212184.png) 打开随后的下拉菜单并选择**Maps JavaScript API**。选择**我需要什么凭据？** 出现提示时，为您的 API 密钥指定一个描述性名称。 为了帮助防止未经授权的访问，建议您通过选择**HTTP 引荐来源网址**，然后在随附的文本字段中输入您的域名来限制可以使用此密钥的网站。 如果您对输入的信息感到满意，请点击**创建**。几分钟后，控制台应在弹出窗口中显示您的密钥 - 复制此信息。 最后，切换回您的 WordPress 帐户，并将您的 API 密钥粘贴到 **Google 地图 API 密钥**字段中。点击**保存更改**。 #### 添加地址字段 此时，我们的网站能够在 Google 地图上显示地址，但有一个问题：用户没有任何方式输入他们的地址！ 默认情况下，UserPro 的**编辑个人资料**页面仅包含**国家/地区**字段，这对于 Google 地图来说信息不足。我们需要更新**修改个人资料**页面以包含一些附加字段，用户可以在其中输入他们的地址。 首先从 WordPress 的左侧菜单中选择**UserPro**。选择**字段**标签。这将带您进入一个新屏幕，其中所有可用字段都列在右侧，所有不同的类别都列在左侧。每个类别代表不同的 UserPro 页面，例如**注册**页面和**编辑个人资料**页面。 要向编辑个人资料页面添加更多字段，请找到**编辑个人资料字段**类别，然后点击其随附的**+**图标进行展开。您现在应该可以看到构成**修改个人资料**页面的所有字段。 ![](//zhiqipro.oss-cn-beijing.aliyuncs.com/2023/12/20231212124212282.png) 在右侧列表中，找到您要添加的字段（我使用的是**地址行1**、**地址行 2** 和**地址行 3**），然后将它们拖放到**编辑个人资料字段**列表中。请注意，每个字段的放置位置决定了它在**修改个人资料**页面中的显示位置。 ![](//zhiqipro.oss-cn-beijing.aliyuncs.com/2023/12/20231212124212637.png) 当您对所做的更改感到满意时，请点击**保存**。 当您在这里时，您可能需要对网站的以下部分进行一些更改： - **注册字段：**用户在注册时将看到的字段 - **登录字段：**用户在登录时将看到的字段 - **社交字段**：作为**修改个人资料**页面的一部分显示的社交字段 这些字段中的大多数都是相当不言自明的，因此请花一些时间浏览它们并进行必要的添加或删除。 #### 页面是否拒绝保存？ 当您点击**保存**按钮时，WordPress 可能会显示一个不停旋转的圆圈，但实际上从未保存您的更改。 如果您遇到这个不断旋转的圆圈，那么您需要启用 `mbstring`（多字节字符串）扩展。您可以在服务器的 **php 配置** 文件中编辑此内容。 打开服务器的**php 配置**文件。该文件的位置可能会有所不同，具体取决于您的操作系统。然后，找到以下行：`;extension=php_mbstring.dll`（或类似的内容，具体取决于您的操作系统）并删除 `;` 符号。您现在应该能够毫无问题地保存更改。 ## 简化注册流程 无论您网站的注册表单制作得多么简单，一定比例的人一旦看到任何类型的表单，_总是_就会退出。 通过用社交登录代替传统的注册表单，您可以消除注册体验中的一些障碍，并有望鼓励更多用户在您的网站上创建帐户。 在最后一部分中，我将向您展示如何为您的用户提供使用 Twitter 或 Facebook 创建帐户的选项。 ### Facebook Connect：使用 Facebook 登录 Facebook 用户将 Facebook 用户名和密码保存在网络浏览器中，甚至永久保持登录 Facebook 帐户的情况并不罕见。通过轻松访问这些凭据，您的访问者只需点击几下鼠标就可以创建一个帐户，这总是 比填写表单更有吸引力。 对于通过移动设备访问您的网站的用户来说，通过 Facebook 注册并登录其帐户可能是唯一可行的选择，因为没有人喜欢在 Facebook 上填写表格或输入冗长且可能复杂的密码。典型智能手机或平板电脑上可用的较小键盘。 Facebook Connect，也称为“使用 Facebook 登录”，是一款允许用户在其他网站创建帐户的应用程序。一旦有人使用 Facebook Connect 注册了您的网站，他们就可以使用其 Facebook 凭据登录该帐户，这可能为一键登录铺平道路。 如果有人选择使用 Facebook Connect 在您的网站上注册，那么您的网站可以自动检索创建其帐户所需的所有信息。您甚至可以使用此连接来收集可改善用户体验的其他信息和内容，例如根据 Facebook 个人资料图片创建头像。 如果您想使用 Facebook Connect，则必须提供服务条款 (TOS) 和隐私政策，其中指定您正在收集的数据以及计划如何使用这些数据。 您可以查看 Envato 的隐私政策来获取一些灵感，也可以在网上免费找到大量 TOS 和隐私政策模板。在您使用 Facebook Connect 之前，这两个文档必须已生效，因为 Facebook 将在设置过程中请求这些 URL。 要开始使用 Facebook Connect，请访问 Facebook for Developers 网站。如果出现提示，请登录您的 Facebook 帐户。到达那里后，选择**添加新应用**。 ![](//zhiqipro.oss-cn-beijing.aliyuncs.com/2023/12/20231212124212145.png) 为此应用指定一个描述性名称，然后点击**创建应用 ID**。选择**集成 Facebook 登录**，然后点击**确认**。 现在，在左侧菜单中，选择**Facebook 登录 > 快速入门**，然后选择**网络**。出现提示时，输入您网站的网址，然后点击**保存**。 在左侧菜单中，选择**设置 > 基本**并填写**应用域**字段。输入您的隐私政策和 TOS 的 URL。另请打开**类别**下拉列表，然后选择您的网站所属的类别。 现在点击**保存更改**。然后，在工具栏中找到**状态：开发中**滑块并将其推至**开启**位置。 ![](//zhiqipro.oss-cn-beijing.aliyuncs.com/2023/12/20231212124212884.png) 阅读警告，如果您愿意继续，请点击**确认**。导航至**设置 > 基本**屏幕，然后复制**应用 ID**。 接下来，返回 WordPress，然后从左侧菜单中选择 **UserPro**。选择**设置**标签，然后点击展开**Facebook 集成**部分。将**允许 Facebook Social Connect** 更改为**是**。将您的 ID 粘贴到 **Facebook 应用 ID** 字段中。最后，点击**保存更改**。 现在，新用户可以选择使用其 Facebook 凭据在您的网站上创建帐户，然后他们就可以使用其 Facebook 用户名和密码登录该帐户。 ![](//zhiqipro.oss-cn-beijing.aliyuncs.com/2023/12/20231212124212361.png) ### Twitter 连接 与使用 Facebook 登录类似，Twitter Connect 允许访问您网站的任何人创建帐户，然后使用其现有的 Twitter 凭据登录该帐户。 对于没有 Facebook 帐户的访问者，Twitter Connect 提供了另一种在您的网站上注册的方法，而无需填写可能很长的注册表单 - 移动用户会特别喜欢这一点！ 虽然 Twitter 帐户通常可能不像 Facebook 帐户那样包含那么多个人信息，但如果用户选择使用 Twitter 进行身份验证，那么您仍然可以访问一些有用的信息和内容，包括您可以用作的头像该人的个人资料照片。 为了设置 Twitter Connect，您需要一个 Twitter 开发者帐户。如果您尚未注册开发者帐户，请首先前往 Twitter 开发者应用程序页面。 选择最能描述您计划如何使用 Twitter 的用例，例如**构建 B2B 产品**、**探索 API** 或**学生** ，然后点击**下一步**。查看信息并进行必要的更改，然后点击**下一步**。再次检查您提供的信息，如果正确，请点击**看起来不错**。最后，阅读条款及条件，如果您愿意继续，请点击**提交**。 Twitter 现在将向与您的 Twitter 帐户关联的地址发送一封确认电子邮件；收到此电子邮件后，请点击**确认**按钮。 现在您已经拥有了开发者帐户，您需要创建一个 Twitter 应用程序并生成一些 API 密钥，我们会将其添加到我们的 WordPress 帐户中。 从 Twitter 开发者网站开始。如果出现提示，请登录您的 Twitter 帐户，然后点击**创建应用**。为您的应用程序命名，该名称将显示在面向用户的授权屏幕上。还要输入您的应用程序的描述，该描述也将是用户可见的。您还需要输入网站的 URL，该 URL 将用作网站生成的所有推文的来源属性，并且还将显示在面向用户的授权屏幕上。 选择**启用使用 Twitter 登录**。此时，您必须提供 OAuth 回调 URL，这是成功身份验证后 OAuth 将重定向到的目标。提供**服务条款网址**和**隐私政策网址**（如果有），不过您可以稍后添加此信息。 如果您对输入的信息感到满意，请点击**创建**。 Twitter 现在将创建您的应用程序。 接下来，您需要设置您的应用访问 Twitter API 的权限。选择**权限**标签，然后选择**编辑**。将**访问权限**设置为**读写**和**保存**。 接下来，选择**密钥和令牌**标签。其中包含**API 密钥**和**API 密钥**，您需要将其添加到您的 WordPress 帐户中。在新标签页中，打开您的 WordPress 帐户，然后从左侧菜单中选择**UserPro**。确保选择**设置**标签。点击展开**Twitter 集成**部分。打开**允许 Twitter Social Connect** 下拉列表，然后选择**是**。将您的 Twitter **API 密钥**复制并粘贴到 WordPress 的**消费者密钥**字段中，然后复制并粘贴您的**API 密钥**。点击**保存更改**。 现在，任何访问您网站的人都可以选择使用其 Twitter 凭据进行注册。 ## 结论 在这篇后续文章中，我们在上一篇文章中添加到 WordPress 网站的社交功能的基础上，将 Google 地图、Twitter 和 Facebook 集成添加到我们的在线社区。 如果您一直关注，那么访问您网站的任何人现在都可以使用 Twitter 或 Facebook 进行注册，创建包含 Google 地图内容的个人资料，并通过您网站的**关注 按钮或**发送连接请求**按钮。** 您可以从 CodeCanyon 购买 UserPro 插件，也可以查看 UserPro 支持部分以获取更多信息。 以上就是使用 UserPro 增强您的 WordPress 社区：集成 Google 地图和社交登录的详细内容，更多请关注知企PROSAAS其它相关文章！ **Categories:** WordPress ---