open graph_如何将Facebook Open Graph与WordPress集成

最新推荐文章于 2024-04-30 17:28:01 发布

cune1359

最新推荐文章于 2024-04-30 17:28:01 发布

阅读量309

点赞数

文章标签： java python javascript php html ViewUI

Facebook Open Graph协议使您不仅可以与读者共享博客内容，还可以与他们的Facebook朋友共享博客内容。最好的部分是–只要有人喜欢您的内容，它就会在他们的Facebook个人资料上发布。但这还不是全部，Open Graph允许您探索更有趣的方式来与读者互动和互动。最终-如果做对了-它可以建立您的品牌并增加网站的访问量。

在今天的帖子中，我们将在详细的分步指南中研究如何将Facebook Open Graph与自托管WordPress集成 。它将需要编辑您现有的WordPress主题并创建一个Facebook应用程序（如果您没有）。

准备？让我们启动浏览器和您最喜欢的代码编辑器。跳后的完整指南。

步骤1.创建一个Facebook App

我们需要一个应用程序ID ，要获取该ID ，您需要创建一个Facebook App。如果已经有一个，请继续执行步骤2。

创建应用程序很容易，这是您要做的：

登录到Facebook ，转到开发人员页面。
点击右上角的“ 设置新应用 ”按钮。
为您的新应用命名，同意 Facebook条款，然后点击创建应用 。
转到网站标签，填写网站URL和网站域 。
在某处记下Application ID的值，然后单击“ 保存更改 ”按钮。

就这样！您以后总是可以回来填写其余信息。

步骤2.替换<HTML>标签

在您喜欢的编辑器中打开主题的头文件（header.php） 。始终保留备份副本，以防万一出问题。

查找以下代码行，或者以<html xmlns =“http://www.w3.org/…开头的代码。

<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>

替换为：

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:fb="https://www.facebook.com/2008/fbml">

保持header.php打开，我们将在第三步中需要它。

步骤3.插入OG <Meta>标签

将以下代码粘贴在<head>标记之后或</head>标记之前。

<?php if (have_posts()):while(have_posts()):the_post(); endwhile; endif;?>
<!-- the default values -->
<meta property="fb:app_id" content="your_fb_app_id" />
<meta property="fb:admins" content="your_fb_admin_id" />

<!-- if page is content page -->
<?php if (is_single()) { ?>
<meta property="og:url" content="<?php the_permalink() ?>"/>
<meta property="og:title" content="<?php single_post_title(''); ?>" />
<meta property="og:description" content="<?php echo strip_tags(get_the_excerpt($post->ID)); ?>" />
<meta property="og:type" content="article" />
<meta property="og:image" content="<?php if (function_exists('wp_get_attachment_thumb_url')) {echo wp_get_attachment_thumb_url(get_post_thumbnail_id($post->ID)); }?>" />

<!-- if page is others -->
<?php } else { ?>
<meta property="og:site_name" content="<?php bloginfo('name'); ?>" />
<meta property="og:description" content="<?php bloginfo('description'); ?>" />
<meta property="og:type" content="website" />
<meta property="og:image" content="logo.jpg" /> <?php } ?>

这是您需要更改的一些值：

第3行：将your_fb_app_id替换为步骤1中的应用程序ID 。
第4行：您可以在Facebook Insights页面下方获得your_fb_admin_id （更多信息）。单击“ Insight for your website ”绿色按钮，获取整个代码字符串并替换第4行。
第12行：此行确定代表您帖子的图片。如果您的主题支持WordPress Post Thumbnails ，它应该可以正常工作。但是，如果没有，它将在没有图像的情况下正常失败。请查看步骤3a，以找到其他解决方法。
第19行：将logo.jpg替换为博客徽标的网址。当您的博客上的非帖子页面在Facebook上共享时，将显示该页面。

步骤3a –当“ wp_get_attachment_thumb_url”失败时

当wp_get_attachment_thumb_url()无法正常工作时，您很可能会转到一个没有值的content属性，如下所示：

<meta property="og:image" content="" />

一个简单的解决方法是将第12行替换为以下代码：

<meta property="og:image" content="<?php if (function_exists('catch_that_image')) {echo catch_that_image(); }?>" />

接下来，打开functions.php并插入以下代码：

function catch_that_image() {
	global $post, $posts;
	$first_img = '';
	ob_start();
	ob_end_clean();
	$output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
	$first_img = $matches [1] [0];
	if(empty($first_img)){
			//Defines a default image
			$first_img = "/images/default.jpg";
		}
	return $first_img;
}

此替换代码尝试使用函数调用catch_that_image()来获取并输出遇到的第一个图像的URL。如果函数无法找到第一个图像，则用URL替换第10行到默认图像。

步骤4.插入Facebook Javascript SDK

以下Javascript使您可以访问Graph API和Dialogs的所有功能。它还允许您轻松集成Facebook社交插件，例如Like按钮， Facepile ， Recommendations等。

将其放在<body>之后的header.php中

<div id="fb-root"></div>
<script>
  window.fbAsyncInit = function() {
    FB.init({appId: 'your_fb_app_id', status: true, cookie: true,
             xfbml: true});
  };
  (function() {
    var e = document.createElement('script'); e.async = true;
    e.src = document.location.protocol +
      '//connect.facebook.net/en_US/all.js';
    document.getElementById('fb-root').appendChild(e);
  }());
</script>

将第4行中的your_fb_app_id替换为之前步骤1中的应用程序ID 。

步骤5.让我们测试一下！

我们已经完成了将Facebook Open Graph集成到WordPress博客的工作。让我们进行一些测试，以确保我们正确完成了工作。

测试＃1 –查看源代码

看一下其中一篇博客文章的源代码，您应该具有以下内容：

检查属性及其值，确保它们正确。

测试2 –安装喜欢的盒子

如果您尚未安装Facebook Like Button ，那么可能是时候购买一个了。将以下代码放在single.php中的任何位置（最好在内容之前或之后）：

<fb:like href="<?php the_permalink() ?>" layout="button_count" show_faces="false" width="450" action="like" colorscheme="light"></fb:like>

接下来，让一个朋友喜欢。您应该会在他的Facebook个人资料中看到类似的内容：

额外：WordPress插件

如果您因某种原因无法安装代码，或者需要快速简便地完成此操作，则可以使用WordPress插件。

翻译自: https://www.hongkiat.com/blog/facebook-open-graph-wordpress/

cune1359

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
open graph_如何将Facebook Open Graph与WordPress集成

Facebook Open Graph协议使您不仅可以与读者共享博客内容，还可以与他们的Facebook朋友共享博客内容。最好的部分是–每当有人喜欢您的内容时，它就会在他们的Facebook个人资料上发布。但这还不是全部，Open Graph允许您探索更有趣的方式来与读者互动和互动。最终-如果做对了-它可以建立您的品牌并增加网站的访问量。在今天的帖子中，我们将在详细的分步指南中研究...
复制链接

扫一扫