wordpress文本框_如何在WordPress中添加Facebook框/粉丝框

最新推荐文章于 2021-03-09 21:37:09 发布

cumohuo9136

最新推荐文章于 2021-03-09 21:37:09 发布

阅读量721

点赞数

文章标签： java javascript php python js ViewUI

原文链接：https://www.wpbeginner.com/wp-tutorials/how-to-add-the-facebook-like-box-fan-box-in-wordpress/

版权

wordpress文本框

Facebook like box also known as Facebook fan box has become a must have element for many website. It allows website owners to provide their users with an easy way to join their facebook community and get updates right in their Facebook news feed. Recently one of our users brought it to our attention that we have not covered the topic of how to add the facebook like box in WordPress. Although we have covered how to add the facebook like button, facebook send button, and facebook comments. In this article, we will show you how to add the facebook fan box in WordPress.

Facebook like box又称Facebook fan box已成为许多网站的必备元素。它允许网站所有者为用户提供一种轻松的方式，使其可以加入其Facebook社区并在其Facebook新闻源中获取更新。最近，我们的一位用户引起了我们的注意，我们还没有涉及如何在WordPress中添加facebook like box的主题。尽管我们已经介绍了如何添加按钮之类的Facebook ， Facebook发送按钮和Facebook评论。在本文中，我们将向您展示如何在WordPress中添加Facebook粉丝框。

使用适用于WordPress的官方Facebook插件添加Like Box (Adding Like Box using Official Facebook Plugin for WordPress)

Perhaps the simplest way to add a facebook like box to your WordPress site is by using the official Facebook plugin for WordPress. First thing you need to do is install and activate the Facebook plugin. After activating the plugin, go to Appearance » Widgets. Simply drag and drop the Facebook like box widget to your sidebar. You will need to provide the URL of your facebook fan page in the widget configurations.

向您的WordPress网站添加类似Facebook的盒子的最简单方法可能是使用WordPress的官方Facebook插件。您需要做的第一件事是安装并激活Facebook插件。激活插件后，转到外观»小部件 。只需将Facebook之类的框小部件拖放到侧栏中。您需要在小部件配置中提供您的Facebook粉丝页面的URL。

Facebook like box / fan box widget settings

The widget has the same options as Facebook social plugins for websites. You can choose to show a stream, show faces, remove header, change border color. There are currently only two themes available light and dark.

该小部件具有与网站的Facebook社交插件相同的选项。您可以选择显示流，显示面Kong，删除标题，更改边框颜色。当前只有浅色和深色两个主题。

像盒子一样手动添加而不使用任何插件 (Adding like Box Manually Without using any Plugin)

It is possible to add Facebook like box manually without using any plugin. Go to Facebook Social Plugin’s Like Box page. Provide the URL of your Facebook page and configure the looks of the like box.

可以在不使用任何插件的情况下手动添加Facebook，如box。转到Facebook社交插件的“赞框”页面。提供您的Facebook页面的URL并配置“喜欢”框的外观。

Getting the code to manually add Facebook like box in WordPress

Press the Get Code button to get Like box code.

按“ 获取代码”按钮获取“赞”框代码。

Facebook provides you multiple ways to add the like box code on your website. You can choose from HTML5, XFBML, and iframe. We will show you how to add each of them but you need to choose one. In our opinion HTML5 is a reasonably good option for most WordPress powered websites. XFBML is good for people using other Facebook plugins that use XFBML to display Facebook buttons. Use iframe if the first two options don’t work for you.

Facebook提供了多种在网站上添加类似框码的方法。您可以选择HTML5，XFBML和iframe。我们将向您展示如何添加它们，但是您需要选择一个。我们认为HTML5是大多数WordPress支持的网站的不错选择。 XFBML非常适合使用其他使用XFBML来显示Facebook按钮的Facebook插件的人。如果前两个选项不适合您，请使用iframe。

Facebook like box is available in multiple code formats

在WordPress中添加HTML5 Facebook Like Box Code (Adding HTML5 Facebook Like Box Code in WordPress)

Click on the HTML5 tab from the code window and copy the first part of the code. They recommend that you paste it right after <body> tag which is usually found in your header.php file. However, it will work anywhere in the body. To make things easy on yourself, you can simply add it in the footer by using our Insert Headers and Footers plugin. The first part of the code would look like this:

从代码窗口中单击HTML5选项卡，然后复制代码的第一部分。他们建议您将其粘贴在通常在header.php文件中找到的<body>标记之后。但是，它将在人体的任何地方起作用。为了使事情变得容易，您只需使用我们的Insert Headers and Footers插件将其添加到页脚中即可。代码的第一部分如下所示：


<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_US/all.js#xfbml=1&appId=403924843027405";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

This javascript connects your website to the Facebook’s javascript library. Now copy the second part of the code, which would look something like this:

此javascript将您的网站连接到Facebook的javascript库。现在复制代码的第二部分，如下所示：


<div class="fb-like-box" data-href="http://www.facebook.com/wpbeginner" data-width="292" data-show-faces="true" data-stream="true" data-header="true"></div>

This part of the code tells the javascript that you loaded earlier to display the like box at this location and with these parameters. For the sake of this example, we will paste this code in the sidebar widgets. Go to Appearance » Widgets. Drag and drop a text widget to your sidebar and paste the code inside it. Save your widget and check your website.

这部分代码告诉您之前加载的javascript，以在此位置显示带有这些参数的like框。为了这个示例，我们将这段代码粘贴到侧边栏小部件中。转到外观»小部件 。将文本小部件拖放到侧边栏，然后将代码粘贴到其中。保存小部件并检查您的网站。

This will work in any other area of your site as well. If you are savvy with code, then you can paste this in your footer, after post, etc.

这也将在您网站的任何其他区域工作。如果您精通代码，则可以将其粘贴到页脚中，发布后等。

Don’t forget to change the facebook fan page URL to your own page URL.

不要忘记将Facebook粉丝页面URL更改为您自己的页面URL。

在WordPress中添加类似框代码的XFBML Facebook (Adding XFBML Facebook Like Box Code in WordPress)

Click on XFBML tab to get the code for XFBML Facebook like box. To add an XFBML Facebook Like Box you need to add three tiny pieces of code in WordPress.

单击XFBML选项卡以获取XFBML Facebook like框的代码。要添加XFBML Facebook Like Box，您需要在WordPress中添加三个小段代码。

Copy the first piece of code and paste it in your theme’s header.php file right after <body> tag. Similar to the last one, this code will work anywhere in the body. To make things easy on yourself, you can simply add it in the footer by using our Insert Headers and Footers plugin. This code would like something like this:

复制第一段代码，并将其粘贴到主题的header.php文件中， header.php <body>标记之后。与最后一个代码相似，此代码将在人体中的任何位置起作用。为了使事情变得容易，您只需使用我们的Insert Headers and Footers插件将其添加到页脚中即可。这段代码是这样的：


<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_US/all.js#xfbml=1&appId=403924843027405";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

This tiny javascript function connects your website to the Facebook’s javascript library.

这个很小的javascript函数将您的网站连接到Facebook的javascript库。

The second line of code is an XML namespace declaration, and you need to add it in the <html>tag of your site. The easiest way would be to open your theme’s functions.php file, paste the following code:

第二行代码是XML名称空间声明，您需要将其添加到站点的<html>标记中。最简单的方法是打开您主题的functions.php文件，粘贴以下代码：


//Adding the Open Graph in the Language Attributes
function add_opengraph_doctype( $output ) {
		return $output . ' xmlns:og="http://ogp.me/ns#" xmlns:fb="http://ogp.me/ns/fb#"';
	}
add_filter('language_attributes', 'add_opengraph_doctype');

Lastly, copy the third line of code which would look something this:

最后，复制第三行代码，看起来像这样：


<fb:like-box href="http://www.facebook.com/wpbeginner" width="292" show_faces="true" stream="true" header="true"></fb:like-box>

This code tells the javascript that you have loaded in the first step, to display the like box at this location and with these parameters. Go to Appearance » Widgets. Drag and drop a text widget to your sidebar and inside that text widget paste the third line of code. Save your changes and preview your website.

此代码告诉您第一步已加载的javascript，以在此位置显示带有这些参数的like框。转到外观»小部件 。将文本小部件拖放到侧边栏，然后在该文本小部件内粘贴第三行代码。保存您的更改并预览您的网站。

在WordPress中添加Facebook Likebox iframe (Adding Facebook Likebox iframe in WordPress)

Click on the IFRAME tab to copy the iframe code. Go to Appearance » Widgets and drag and drop a Text widget to your sidebar. Paste the iframe code inside the text widget and save changes. Open your site to preview the facebook fan box.

点击IFRAME标签，以复制iframe代码。转到外观»小部件，然后将文本小部件拖放到侧边栏。将iframe代码粘贴到文本小部件中并保存更改。打开您的站点以预览Facebook粉丝框。

We hope this article helped you add Facebook Like box / Fan box on your WordPress site. For questions and feedback please leave a comment. You can also follow us on Facebook.

我们希望本文能帮助您在WordPress网站上添加Facebook Like Box / Fan box。对于问题和反馈，请发表评论。您也可以在Facebook上关注我们。

翻译自: https://www.wpbeginner.com/wp-tutorials/how-to-add-the-facebook-like-box-fan-box-in-wordpress/

wordpress文本框

cumohuo9136

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
wordpress文本框_如何在WordPress中添加Facebook框/粉丝框

wordpress文本框Facebook like box also known as Facebook fan box has become a must have element for many website. It allows website owners to provide their users with an easy way to join their facebook co...
复制链接

扫一扫