Menu
I am trying to add dynamic Facebook og meta tags to my Wordpress site. I am adding them to single.php instead of the usually recommended functions.php file because I have code below that for a Facebook app I've created that needs to execute every time someone views an individual blog post because it then posts to their Facebook timeline that they've read that particular post. I don't want to use a plugin because some of my plugins used to conflict with each other and it was a mess to get that straightened out. My biggest problem is that I need the og:url tag to be dynamic, though the og:title, og:description, og:image, etc. should be as well. Here is the code I have at the top of my single.php file:
EDIT: HERE IS THE WORKING CODE I AM NOW USING. THANKS FOR EVERYONE'S HELP:
<?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>
I am trying to follow the code located here: Generating Facebook Open Graph meta tags dynamically and it DOES post to my Facebook timeline whenever I read a blog post, but for the title it of course posts "default title" and when I click the "default title" link on my Facebook timeline, it sends me to the URL for single.php with a bunch of nonsense at the end of the URL
http://MYSITE.com/wp-content/themes/twentyeleven/single.php?fb_action_ids=10151048340001514&fb_action_types=internetlolsapp%3Aview&fb_source=other_multiline
instead of the blog post URL. I'm wondering if it has anything to do with the URL I put in the 3rd line after "FB.api", but anything else I've tried putting there prevents the app from posting anything at all on my Facebook timeline when I read a blog post.
Any ideas how to fix this? I've been pulling my hair out for days with this. Any help would be most appreciated! Thanks in advance.
309
For what its worth, I use a function from Ryan S. Cowles to do this and it works perfectly. It inserts the data dynamically with the wp_head hook making every page load the OG meta info dynamically. Anytime one of your page links is used in the FB status box, it calls the info relating to that page. I use Featured Images on all of my pages but if you don't you could easily write in a default fallback.
This is in my functions file:
/*
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');
I adapted a function from Facebook Featured Image and Open Graph Meta Tags(http://www.ryanscowles.com) and pasted it on functions.php, it works! (wordpress 3.5.1)
<?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');
?>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
