Wordpress PHP中的动态Facebook og元标记
我正在尝试向我的Wordpress站点添加动态Facebook og元标记。我将它们添加到single.php而不是通常推荐的functions.php文件中,因为我在下面为我创建的Facebook应用程序编写了代码,该应用程序需要在每次有人查看单个博客文章时执行,因为它会在Facebook时间线上发布他们已阅读的特定文章。我不想使用一个插件,因为我的一些插件曾经互相冲突,解决这个问题是一个混乱。我最大的问题是我需要Wordpress PHP中的动态Facebook og元标记,php,facebook,wordpress,meta-tags,Php,Facebook,Wordpress,Meta Tags,我正在尝试向我的Wordpress站点添加动态Facebook og元标记。我将它们添加到single.php而不是通常推荐的functions.php文件中,因为我在下面为我创建的Facebook应用程序编写了代码,该应用程序需要在每次有人查看单个博客文章时执行,因为它会在Facebook时间线上发布他们已阅读的特定文章。我不想使用一个插件,因为我的一些插件曾经互相冲突,解决这个问题是一个混乱。我最大的问题是我需要og:url标记是动态的,尽管og:title、og:description、o
og:url
标记是动态的,尽管og:title
、og:description
、og:image
等也应该是动态的。下面是我在single.php文件顶部的代码:
编辑:这是我现在使用的工作代码。感谢大家的帮助:
<?php
$params = array();
if(count($_GET) > 0) {
$params = $_GET;
} else {
$params = $_POST;
}
// defaults
if($params['type'] == "") $params['type'] = "picture";
if($params['locale'] == "") $params['locale'] = "en_US";
if($params['description'] == "") $params['description'] = "Visit Internet LOLs for the funniest humor on the web! :)";
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# internetlolsapp: http://ogp.me/ns/fb/internetlolsapp#">
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<!-- Open Graph meta tags -->
<meta property="fb:app_id" content="378076268920252" />
<meta property="og:site_name" content="meta site name"/>
<meta property="og:url" content="<?php echo 'http://internetlols.com'.$_SERVER['REQUEST_URI']; ?>"/>
<meta property="og:type" content="internetlolsapp:<?php echo $params['type']; ?>"/>
<meta property="og:description" content="<?php echo $params['description']; ?>"/>
</head>
</html>
<script type="text/javascript">
function postView()
{
FB.api(
'/me/internetlolsapp:view',
'post',
{ picture: '<?php echo 'http://internetlols.com'.$_SERVER['REQUEST_URI']; ?>' },
function(response) {
if (!response) {
// FAIL GRACEFULLY alert('Error occurred : No Response');
} else if (response.error) {
// FAIL GRACEFULLY alert('Error occurred : ' + response.error);
} else {
// SUCCESS alert('View was successful! Action ID: ' + response.id);
}
});
}
</script>
</head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '378076268920252', // App ID
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};
// Load the SDK Asynchronously
(function(d){
var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));
</script>
</body>
<body onload='postView()'>
</html>
而不是博客文章的URL。我想知道这是否与我在“FB.api”后的第三行中输入的URL有关,但我尝试在那里输入的任何内容都会阻止应用程序在我阅读博客文章时在我的Facebook时间线上发布任何内容
有没有办法解决这个问题?好几天来,我一直在为这件事烦恼。任何帮助都将不胜感激!提前感谢。使用Wordpress,您无需通过
$\u GET
或$\u POST
传递此信息。Wordpress为您提供了所有这些
我可以理解你不想使用插件的愿望,但有些插件,如Wordpress SEO或官方Facebook,可以为你添加插件,让你的生活更轻松。如果没有,找一个简单的,把它拆开看看他们在做什么
如果你真的想自己翻滚,你应该使用设置标题。您可以通过函数检索帖子标题。您正在寻找的其他元数据点还有其他元数据点
最后一点注意:你的
og:image
文件必须至少有50px的一面,否则Facebook不会显示它。就像你尝试使用的一样,Favicon几乎总是太小。有关完整的图像规格,请参阅。要使og:url
和og:title
动态,请尝试使用此选项
<meta property="og:url" content="<?php echo get_permalink($post->ID); ?>"/>
<meta property="og:title" content="<?php echo $post->post_title; ?>"/>
我最终解决了这个问题,使用以下代码行使Facebook og:url标记动态:
<meta property="og:url" content="<?php echo 'http://internetlols.com'.$_SERVER['REQUEST_URI']; ?>"/>
{ picture: '<?php echo 'http://internetlols.com'.$_SERVER['REQUEST_URI']; ?>' },
不管它值多少钱,我使用了Ryan S.Cowles的函数来实现这一点,它工作得非常完美。它使用wp_头钩子动态插入数据,使每个页面动态加载OG meta-info。只要在FB状态框中使用您的页面链接,它就会调用与该页面相关的信息。我在我的所有页面上都使用特色图片,但如果你不这样做,你可以很容易地在默认的回退中编写
这在我的函数文件中:
/*
Plugin Name: Facebook Featured Image and Open Graph Meta Tags
Version: 1.0
Plugin URI: http://www.ryanscowles.com
Description: Automatically set the posts' Featured Image as the thumbnail and set appropriate Open Graph meta tags for sharing on Facebook.
Author: Ryan S. Cowles
Author URI: http://www.ryanscowles.com
*/
define ('pluginDirName', 'fb-featured-image');
// Allow for Facebooks's markup language
add_filter('language_attributes', 'add_og_xml_ns');
function add_og_xml_ns($content) {
return ' xmlns:og="http://ogp.me/ns#" ' . $content;
}
add_filter('language_attributes', 'add_fb_xml_ns');
function add_fb_xml_ns($content) {
return ' xmlns:fb="https://www.facebook.com/2008/fbml" ' . $content;
}
// Set your Open Graph Meta Tags
function fbogmeta_header() {
if (is_single()) {
?>
<meta property="og:title" content="<?php the_title(); ?>"/>
<meta property="og:description" content="<?php echo strip_tags(get_the_content($post->ID)); ?>" />
<meta property="og:url" content="<?php the_permalink(); ?>"/>
<?php $fb_image = wp_get_attachment_image_src(get_post_thumbnail_id( get_the_ID() ), 'thumbnail'); ?>
<?php if ($fb_image) : ?>
<meta property="og:image" content="<?php echo $fb_image[0]; ?>" />
<?php endif; ?>
<meta property="og:type" content="<?php
if (is_single() || is_page()) { echo "article"; } else { echo "website";} ?>"
/>
<meta property="og:site_name" content="<?php bloginfo('name'); ?>"/>
<?php
}
}
add_action('wp_head', 'fbogmeta_header');
/*
插件名称:Facebook特色图片和开放图形元标记
版本:1.0
插件URI:http://www.ryanscowles.com
描述:自动将帖子的特色图片设置为缩略图,并设置适当的开放图元标记,以便在Facebook上共享。
作者:Ryan S.Cowles
作者URI:http://www.ryanscowles.com
*/
定义(‘插件名称’、‘fb特色图像’);
//允许使用Facebooks的标记语言
添加过滤器(“语言属性”、“添加xml”);
函数add_og_xml_ns($content){
返回'xmlns:og='http://ogp.me/ns#“.$内容;
}
添加过滤器(“语言属性”,“添加xml”);
函数add_fb_xml_ns($content){
返回“xmlns:fb=”https://www.facebook.com/2008/fbml“.$内容;
}
//设置开放图元标记
函数fbogmeta_header(){
if(is_single()){
?>
我改编了Facebook特色图片和Open Graph Meta Tags()中的一个函数,并将其粘贴到functions.php上,效果很好!
(wordpress 3.5.1)
出于某种原因,这对我不起作用。我是用javascript制作的(随机为og:image属性选择一个图像)。但它不会更新。有机会知道为什么吗?
/*
Plugin Name: Facebook Featured Image and Open Graph Meta Tags
Version: 1.0
Plugin URI: http://www.ryanscowles.com
Description: Automatically set the posts' Featured Image as the thumbnail and set appropriate Open Graph meta tags for sharing on Facebook.
Author: Ryan S. Cowles
Author URI: http://www.ryanscowles.com
*/
define ('pluginDirName', 'fb-featured-image');
// Allow for Facebooks's markup language
add_filter('language_attributes', 'add_og_xml_ns');
function add_og_xml_ns($content) {
return ' xmlns:og="http://ogp.me/ns#" ' . $content;
}
add_filter('language_attributes', 'add_fb_xml_ns');
function add_fb_xml_ns($content) {
return ' xmlns:fb="https://www.facebook.com/2008/fbml" ' . $content;
}
// Set your Open Graph Meta Tags
function fbogmeta_header() {
if (is_single()) {
?>
<meta property="og:title" content="<?php the_title(); ?>"/>
<meta property="og:description" content="<?php echo strip_tags(get_the_content($post->ID)); ?>" />
<meta property="og:url" content="<?php the_permalink(); ?>"/>
<?php $fb_image = wp_get_attachment_image_src(get_post_thumbnail_id( get_the_ID() ), 'thumbnail'); ?>
<?php if ($fb_image) : ?>
<meta property="og:image" content="<?php echo $fb_image[0]; ?>" />
<?php endif; ?>
<meta property="og:type" content="<?php
if (is_single() || is_page()) { echo "article"; } else { echo "website";} ?>"
/>
<meta property="og:site_name" content="<?php bloginfo('name'); ?>"/>
<?php
}
}
add_action('wp_head', 'fbogmeta_header');
<?php
//function to limit description to 300 characters
function limit($var, $limit) {
if ( strlen($var) > $limit ) {
return substr($var, 0, $limit) . '...';
}
else {
return $var;
}
}
// Set your Open Graph Meta Tags
function fbogmeta_header() {
if (is_single()) {
//getting the right post content
$postsubtitrare = get_post_meta($post->ID, 'id-subtitrare', true);
$post_subtitrare = get_post($postsubtitrare);
$content = limit(strip_tags($post_subtitrare-> post_content),297);
?>
<meta property="og:title" content="<?php the_title(); ?>"/>
<meta property="og:description" content="<?php echo $content; ?>" />
<meta property="og:url" content="<?php the_permalink(); ?>"/>
<?php $fb_image = wp_get_attachment_image_src(get_post_thumbnail_id( get_the_ID() ), 'thumbnail'); ?>
<?php if ($fb_image) : ?>
<meta property="og:image" content="<?php echo $fb_image[0]; ?>" />
<?php endif; ?>
<meta property="og:type" content="<?php
if (is_single() || is_page()) { echo "article"; } else { echo "website";} ?>"
/>
<meta property="og:site_name" content="<?php bloginfo('name'); ?>"/>
<?php
}
}
add_action('wp_head', 'fbogmeta_header');
?>