I'm dynamically changing my <meta property="og:image" content="#"> and <meta property="og:title" content="#"> tags using jQuery (below). When I view the code via 'inspect' in Chrome, the tags have successfully been changed.
HTML:
<meta property="og:title" content="#">
<meta property="og:image" content="#">
jQuery:
$("meta[property='og:title']").attr("content", data.name);
$("meta[property='og:image']").attr("content", data.thumbnail.url);
But the Facebook debugger tool is still showing content="#" for each. I'm assuming this is because Facebook reads the source code, before Javascript has a chance to replace the content.
Is there a way around this?
Thank you.
Facebook does not parse JavaScript at all, you can´t use dynamic Open Graph tags. It does not really make sense to change them on the fly anyway.
You can only change the OG tags dynamically on the server - obviously. For example: https://yourdomain.com/dynamicogtags.php?title=xxx&description=xxx
<meta property="og:title" content="<?php echo $_GET['title'];?>">
Not sure if that´s what you want to do though, the URL looks pretty ugly that way. Rewrite would be nice, of course.
You also may want to try something like prerender.io, but i am not sure if it will handle dynamic og tags.
As said previously, Facebook doesn't parse JavaScript at all.
One way of doing it (the way I do it) is to use a prerendering service like prerender.io to prerender your pages and redirect requests coming from web crawlers to that prerendering server based on the user-agent (you can easily find how to do that with your Nginx/Apache server on google).
Prerendering services produce an HTML/CSS render of your page, but they wait until the page is fully loaded and the JavaScript is executed before doing so. That way, Facebook gets a render of your website where the JavaScript has been executed and the OpenGraph tags are set correctly!
Prerender is open-source so you can run your own prerender server for free!
Try this it worked for me.
<?php
$params = array();
if(count($_GET) > 0) {
$params = $_GET;
} else {
$params = $_POST;
}
// defaults
if($params['type'] == "") $params['type'] = "restaurant";
if($params['locale'] == "") $params['locale'] = "en_US";
if($params['title'] == "") $params['title'] = "default title";
if($params['image'] == "") $params['image'] = "thumb";
if($params['description'] == "") $params['description'] = "default description";
?>
<!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# MY_APP_NAME_SPACE: http://ogp.me/ns/fb/MY_APP_NAME_SPACE#">
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<!-- Open Graph meta tags -->
<meta property="fb:app_id" content="MY_APP_ID" />
<meta property="og:site_name" content="meta site name"/>
<meta property="og:url" content="http://URL/index.php?type=<?php echo $params['type']; ?>&locale=<?php echo $params['locale']; ?>&title=<?php echo $params['title']; ?>&image=<?php echo $params['image']; ?>&description=<?php echo $params['description']; ?>"/>
<meta property="og:type" content="MY_APP_NAME_SPACE:<?php echo $params['type']; ?>"/>
<meta property="og:locale" content="<?php echo $params['locale']; ?>"/>
<meta property="og:title" content="<?php echo $params['title']; ?>"/>
<meta property="og:image" content="http://URL/img/<?php echo $params['image']; ?>.png"/>
<meta property="og:description" content="<?php echo $params['description']; ?>"/>
</head>
</html>
Related
For a Facebook game, I want to have Open Graph picture objects with titles in multiple languages (specifically, English and German). I did everything as described in Facebooks open graph internationalization document, but somehow the objects (and actions) are always shown with English titles in the newsfeed and activities - and the app is definitely localized in its configuration.
Here's the URL of one of the objects: http://apps.facebook.com/spot-it/opengraph/picture/pictures.1A24.html
If I get it through Facebook's object debugger using the fb_locale parameter set to German, I see:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# spot-it: http://ogp.me/ns/fb/spot-it#">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta property="og:locale:alternate" content="de_DE">
<meta property="og:locale:alternate" content="en_US">
<meta property="og:locale" content="de_DE">
<meta property="fb:app_id" content="419035224820013">
<meta property="og:type" content="spot-it:picture">
<meta property="og:url" content="http://apps.facebook.com/spot-it/opengraph/picture/pictures.1A24.html">
<meta property="og:title" content="Beißerchen">
<meta property="og:description" content="Findest du die Fehler in 'Beißerchen'?">
<meta property="og:image" content="http://d2tv32y5kdvj8c.cloudfront.net/assets/pictures/1A24_potd.jpg">
</head>
<body>
<script type="text/javascript">
self.location.href = "";
</script>
</body>
</html>
So why doesn't Facebook use the German version when displaying actions involving that object to German users? Am I doing something wrong, or does internationalization for open graph simply not work?
in the app settings at developers.facebook.com > your app > "Localize" you can add support for additional languages.
you can set:
display name
tagline
description
detailed description
explanation for permissions
and all images like logo, icon, web banner, cover image…
i hope this is what you're looking for ;)
This is the url that I want the user to be able to share:
http://dealsfortherich.com/product/6379316
So my application (PHP) constructs this URL:
https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fdealsfortherich.com%2Fproduct%2F6379316
If you check out that link, you will see that the product number has been truncated.
Sharer.php is ignoring the number after the slash (%2F)
If I make that number alpha-number, it works:
https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fdealsfortherich.com%2Fproduct%2F6379316X
or
https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fdealsfortherich.com%2Fproduct%2FX6379316
or
https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fdealsfortherich.com%2Fproduct%2F637X9316
Adding the trailing slash doesn't help:
https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fdealsfortherich.com%2Fproduct%2F6379316%2F
Obviously, I can write a condition in my application to handle a url like:
http://dealsfortherich.com/product/6379316X
But then I have duplicated content as far as search engines are concerned.
Should I just give up and do it without using sharer.php?
Figured it out!
The problem was that facebook was not scraping the page:
http://dealsfortherich.com/product/6379316
The facebook object debugger was showing that the scraper was seeing a canonical name of:
http://dealsfortherich.com/product/
This was happening even though I issued:
remove_action('wp_head', 'rel_canonical');
before calling wordpress' get_header() (which in turn calls wp_head()), which should have been removing the wrong canonical link.
The problem was that the filter fb_meta_tags (from a plug-in) was adding a bunch of OG tags before the OG tags that I thought I was setting!
Sure enough, one of the tags beting set was:
<meta property="http://ogp.me/ns#url" content="http://dealsfortherich.com/product/" />
This is how I solved it, in my php, before get_header() is called:
add_filter( 'fb_meta_tags', 'remove_og_tags' );
function remove_og_tags( $meta_tags )
{
$meta_tags['http://ogp.me/ns/fb#app_id'] = null;
$meta_tags['http://ogp.me/ns#type'] = null;
$meta_tags['http://ogp.me/ns#title'] = null;
$meta_tags['http://ogp.me/ns#image'] = null;
$meta_tags['http://ogp.me/ns#description'] = null;
$meta_tags['http://ogp.me/ns#url'] = null;
return $meta_tags;
}
That prevented the wrong OG tags from getting added before I added mine:
<link rel="canonical" href="<?php echo $page_path; ?>"/>
<meta property="fb:app_id" content="xxxxxxxxxxxxx" />
<meta property="og:type" content="product" />
<meta property="og:title" content="<?php echo $the_title; ?>" />
<meta property="og:image" content="<?php echo $image_url; ?>" />
<meta property="og:description" content="<?php echo $tweet_text.$the_title; ?>" />
<meta property="http://ogp.me/ns#url" content="<?php echo $page_path; ?>" />
Everything is now working beautifully.
could someone help me with my problem? I would like to change facebook meta tags according to actual page. I tried something like that but it doesn't works...
<head>
<script type="text/javascript">
window.document.write('<meta property="og:title" content="actual page title"/>');
</script>
<meta property="og:image" content="http://foto.mrsoft.cz/main.php?g2_view=core.DownloadItem&g2_itemId=10843&g2_serialNumber=2"/>
</head>
Thanks.
Enable PHP for your server and capture your page's title into a variable like $actual_page_title.
Then echo that using a PHP statement:
<meta property="og:title" content="<?php echo $actual_page_title; ?>" />
I'm having a problem that I can't seem to figure out, though I'm not sure if I'm on the right track. Can anyone please advise?
I've just created a wordpress website, that post's will be shared on facebook.
I'm using featured images and I would like my featured image facebook thumbnail to be used.
It seems when I post a link to facebook, facebook just picks up images on the page and you can choose a thumbnail.
I'm not really up for that because the images are landscape and don't look good. So I started looking into meta tag with the open graph property to see if I could dynamically populate the content that facebook captures when posting a link to the wall.
This is what I tried...
<meta name="description" content="" />
<meta name="author" content="" />
<meta charset="utf-8" />
<meta property="fb:app_id" content="0000000000000000" />
<?php if ( is_single() || is_page() ) { ?>
<meta property="og:title" content="<?php echo get_the_title(); ?>" />
<meta property="og:type" content="article" />
<meta property="og:url" content="<?php echo get_permalink(); ?>" />
<meta property="og:image" content="<?php $fbthumb = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'facebook-thumb' ); echo $fbthumb[0]; ?>" />
<meta property="og:site_name" content="myblog.co.uk"/>
<meta property="og:description" content="<?php echo get_the_excerpt(); ?>" />
<?php } ?>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
But all of this is ignored!!!
Can anyone help me understand how to control the content facebook draws in via a link being posted to a wall. I would appreciated your help very much.
Thanks
I had this problem the other day. Facebook wants og:images to be larger than 200px in both directions, or it will ignore them. I found I got the best result when I used wp_get_attachment_image_src($img.ID, 'large')
Have you tried looking at your site with the Facebook Debugger to see what it has to say about your site? https://developers.facebook.com/tools/debug
We run a blog in the UK and have recently noticed that Facebook stopped pulling our post descriptions and images when an article is liked, shared etc.
Running the Facebook Object Debugger I get the following messages:
Response Code: 200
Errors That Must Be Fixed
Can't Download: Could not retrieve data from URL.
(In case you wish to see it for yourself, here is a link: https://developers.facebook.com/tools/debug/og/object?q=http%3A%2F%2Fwww.heruni.com%2F)
Below is a copy of our code -- what are we doing wrong?
<?php
function is_facebook(){
if(!(stristr($_SERVER["HTTP_USER_AGENT"],'facebook') === FALSE)) {
return true;
}
}
?>
<!DOCTYPE html>
<html dir="ltr" lang="en-US"<?php if(is_facebook()){echo ' xmlns:fb="http://www.facebook.com/2008/fbml" xmlns:og="http://opengraphprotocol.org/schema/"';}?>>
<head>
<title><?php wp_title(''); ?></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="msvalidate.01" content="374D59D3C3F26F6EFC410429D512A98C" />
<?php if(is_facebook()){ ?>
<meta property="og:title" content="<?php single_post_title(''); ?>"/>
<meta property="og:type" content="article"/>
<meta property="og:image" content="<?php echo wp_get_attachment_thumb_url( get_post_thumbnail_id( $post->ID ) ) ?>"/>
<meta property="og:url" content="http://<?php echo $_SERVER["HTTP_HOST"].$_SERVER["REQUEST_URI"];?>"/>
<meta property="og:site_name" content="<?php bloginfo('name'); ?>"/>
<meta property="fb:app_id" content="256997234347344"/>
<?php }?>
Check if you use gzip in your page, disable it and try again. That fixed it for me.
This is the markup which Facebook sees for your page:
https://developers.facebook.com/tools/debug/og/echo?q=http%3A%2F%2Fwww.heruni.com%2F
You don't need to do any is_facebook() conditional stuff here - the tags, and the namespace should just be made visible on the web to all HTTP clients, not just the Facebook scraper.
Remove all these conditionals, and you code should work.