I tried to use the code from http://www.pricetapestry.com/node/4043 but it doesn't display the URL correctly and says invalid. How can we use a like button within the plugin for each product?
Thanks,
Tommy
Hi David,
I was playing around with another method which is working so far. I went to http://developers.facebook.com/docs/reference/plugins/like/ and inserted the code as asked by facebook (below the opening body tag) and then put the actual button code at the ENDing of my product HTML box of the wp-admin > Settings > PriceTapestry plugin. So far it works great but I am trying to figure out how to pull in the correct image for the page still.
Thanks,
Tommy
Hi Tommy,
First and foremost; double check that any canonical header in the page is pointing to the correct product page URL and not to the container permalink. If you view > source in your web browser when viewing a product page; look within the <head> section for any canonical tag, and make sure that it is showing the product page URL. If not - try enabling the Header Exclusivity setting in wp-config > Settings > PriceTapestry.org - that should ensure that the canonical tag is pointing to your product page URL which may well be used by external scripts such as this...
Cheers,
David.
--
PriceTapestry.com
It pulls in the correct URL but I need to figure out how to tell it which picture is the "products" picture. Currently it's skipping everything and pulling in a Firefox image that gets pulled in at the very end of my page. I tried your method as well with the same results (btw you left out the trailing / for closing the iframe).
Here is what lint says.
Inferred Property: fb:admins and fb:app_id missing. fb:admins or fb:app_id is necessary for Facebook to render a News Feed story that generates a high clickthrough rate.
Inferred Property: og:title missing. og:title meta tag is necessary for Facebook to render a News Feed story that generates a high clickthrough rate.
Inferred Property: og:type missing. og:type meta tag is necessary for Facebook to render a News Feed story that generates a high clickthrough rate.
Inferred Property: og:image missing. og:image meta tag is necessary for Facebook to render a News Feed story that generates a high clickthrough rate.
Since title is missing it pulls in the pages title which is fine as it's the products title. But do you know of any way to code in these properties so they display correctly? Either way it's at least functioning :)
There are some good plugins I use for my other WP sites but they are based off the actual "post" function in wordpress.
Thanks again!
Hi Tommy,
iframe closing tag correct in previous post - thanks!
The content of your post makes sense; in order to inform Facebook what image URL to use the page is required to generate an og:image meta tag. At the point at which the plugin generates the page header (which is where meta tags should be output) the product record is not yet in context but that can be worked out - it's a little more than a one line mod so if you could bear with me; I'll work that out for you first thing tomorrow...
Cheers,
David.
--
PriceTapestry.com
Hi David,
It's no rush just when ever you can get to it. I don't program php very well but is there a way to pull in the paths from the PT script to the header meta tags? Something like below maybe? The example doesn't work but it got me thinking.
<meta property="og:image" content="<?php print $mainProduct["image_url"]; ?>" />
<meta property="og:title" content="" />
<meta property="og:type" content="product" />
<meta property="og:url" content="" />
<meta property="og:site_name" content="" />Thanks,
Tommy
Hi Tommy,
The above code is close in terms of stand-alone Price Tapestry; however $mainProduct is not in context at the point at which html/header.php is called; so instead of $mainProduct["image_url"] you would use $product["products"][0]["image_url"].
With regards to the plugin; this is where a query to load the product record will need to be made earlier than it is currently in order to get the image_url for use in the header. To do this; look for the following code at line 228 of pto.php
$description = trim($description);...and REPLACE with:
global $pto_config_databaseTablePrefix;
global $wpdb;
$sql = "SELECT * FROM `".$pto_config_databaseTablePrefix."products` WHERE name = '".$wpdb->escape($pto_productName)."' ORDER BY price LIMIT 1";
$wpdb->query($sql);
$product = $wpdb->last_result[0];
print "<meta property='og:image' content='".$product->image_url."' />";
$description = trim($description);Cheers,
David.
--
PriceTapestry.com
Hey David,
I had some issue with my host and ended up losing the site files that I had my working facebook like button code in. Since then I am trying to get it working again but keep running into an issue.
If I use this code it works fine:
If I replace it with this code facebook will not parse the page:
The error given is:
Object at URL 'http://www.XXXXXXXXXXXXXX.com/' of type 'article' is invalid because a required property 'og:title' of type 'string' was not provided.
If I try to define the custom Image URL also it does the exact same thing.
What am I doing wrong that the meta tags can't pull in
<?php
print $mainProduct["name"];
?>
All the files have been modified as you instructed above.
Typo in my last reply. I am actually using $product["products"][0]["image_url"] & $product["products"][0]["name"] but it doesn't work.
Hi Tommy,
This would be standalone Price Tapestry (referring to html/product.php rather than plugin but it sounds like you just need to re-introduce the og:title and og:image property tags into your page. Try adding the following immediately before your like button code:
<meta property="og:title" content="<?php print $product["products"][0]["name"]; ?>" />
<meta property="og:image" content="<?php print $product["products"][0]["image_url"]; ?>" />Cheers,
David.
--
PriceTapestry.com
Is the coding different if I wanted to pull values with the plugin installed?
When I insert into my Header.php file, of my WP template, I get the following output:
<meta property="og:title" content="">
<meta property="og:image" content="">Hi Tommy,
To add the Facebook "Like" meta tags with the plugin, first look for the following code beginning at line 389 in pto.php
$sql = "SELECT name FROM `".$pto_config_databaseTablePrefix."products` WHERE normalised_name='".$wpdb->escape($pto_product)."' LIMIT 1";
if ($wpdb->query($sql))
{
$pto_productName = $wpdb->last_result[0]->name;
}...and REPLACE with:
$sql = "SELECT name,image_url FROM `".$pto_config_databaseTablePrefix."products` WHERE normalised_name='".$wpdb->escape($pto_product)."' LIMIT 1";
if ($wpdb->query($sql))
{
$pto_productName = $wpdb->last_result[0]->name;
global $pto_imageURL;
$pto_imageURL = $wpdb->last_result[0]->image_url;
}Next, look for the following code at line 232:
print "<meta name='description' value='".htmlentities($description,ENT_QUOTES,get_settings("blog_charset"))."' />\n";...and REPLACE with:
print "<meta name='description' value='".htmlentities($description,ENT_QUOTES,get_settings("blog_charset"))."' />\n";
print "<meta name='og:title' value='".htmlentities($description,ENT_QUOTES,get_settings("blog_charset"))."' />\n";
global $pto_imageURL;
print "<meta name='og:image' value='".htmlentities($pto_imageURL,ENT_QUOTES,get_settings("blog_charset"))."' />\n";Hope this helps!
Cheers,
David.
--
PriceTapestry.com
Thanks! it's pulling in the correct meta tags now :)
Hi David,
I'm trying to add the above code to my pto.php but my version seems to be different, so not sure where to add the extra code.
In fact, all I'm trying to do is add the meta for OG:image. I use the All In One SEO plugin which adds an OG:image meta but the share button I have pulls the wrong (default) image, instead of the main product image.
Thought maybe adding another meta, turning off the AIO one, might force the correct image.
How could I achieve showing the correct image ?
Thanks.
Hi Richard,
Just a single addition in version 2 to add OG:image tag, edit pto.php and look for the following code at line 366:
print "<meta name='description' content='".htmlentities($description,ENT_QUOTES,get_settings("blog_charset"))."' />\n";...and REPLACE with:
print "<meta name='description' content='".htmlentities($description,ENT_QUOTES,get_settings("blog_charset"))."' />\n";
if ($pto_productResults[0]->image_url)
{
print "<meta property='og:image' content='".htmlentities($pto_productResults[0]->image_url,ENT_QUOTES,get_settings("blog_charset"))."' />";
}Hope this helps!
Cheers,
David.
--
PriceTapestry.com
Thanks for that David, now I have another meta OG:image on the page.
Trouble is, FB is still seeing the default image as the main image!
Tried turning off AIO SEO, which just leaves the new image meta on the page but still get same results.
In All In One SEO I see there is a setting to control which image to show:
"Use Custom Field For Image" but I don't know what field name to enter.
Any ideas ?
Thanks.
Hi,
To resolve the duplicate og:image tag with AIO SEO enabled, try re-instating the method of a setting that existed in version 1 of PriceTapestry.org for WordPress which "unhooks" any other plugin hooks for header, title or canonical URL leaving PriceTapestry.org responsible for everything for the dynamic plugin genreated pages...
To do this, edit pto.php and look for the following code at line 167:
switch($pto_action)...and REPLACE with:
if ($pto_module || $pto_q)
{
unset($GLOBALS['wp_filter']["wp_head"]);
unset($GLOBALS['wp_filter']["wp_title"]);
unset($GLOBALS['wp_filter']["redirect_canonical"]);
add_action('wp_head','pto_head');
add_filter('wp_title','pto_title');
remove_action('wp_head', 'rel_canonical');
}
switch($pto_action)That _should_ leave you with the single, PriceTapestry.org generated og:image tags for the virtual product pages even with All In One SEO enabled.
Regarding it making no difference within Facebook, this may be a caching issue, so if you have been testing with the same product page it would be worth testing a different product page once the og:image issue is resolved.
Also bear in mind that, as I understand it, the og:image tag is only _advisory_, even if it exists Facebook may decide that it would prefer to use an alternative image from the page. It's also possible that Facebook will only use an image from your domain (or a sub-domain) which is something else to bear in mind...
Cheers,
David.
--
PriceTapestry.com
Gave that a go, broke the layout of the page !
Is there anyway we can get the meta's (OG:xxxx) to the top of the page along with the ones created by AIO SEO ? That way they should be read first when the page loads and then maybe it will pick up the right image.
Thanks.
Ah, ok revert the previous suggestion!
> Is there anyway we can get the meta's (OG:xxxx) to the top of the page
Try increasing the priority value of the plugin's pto_head() action, the distribution actually sets a high value (low priority) but this may not be the best approach - to do this, edit pto.php and look for the following code at line 606:
add_action('wp_head','pto_head',999);...and REPLACE with:
add_action('wp_head','pto_head',1);Hope this helps!
Cheers,
David.
--
PriceTapestry.com
OK, so now I have the relevant OG:xxxx meta's at the top of the page, but they are all still being totally ignored by FB.
Using facebook's sharing debugger, I can clearly see they are being ignored as the entries are empty, but the meta's can be seen using "view source" on webpage.
The meta's inserted on the webpage below these, generated by AIO SEO, seem to be pulled into FB debugger, no problem.
Now, I have noticed something different about the meta's I have added and the ones generated by AIO SEO, mine are using single quotes like
<meta property='og:image' content='and the ones that work are double quotes like this
<meta property="og:url" content="According to what I've been reading this could be the cause of the problem, what do you think ?
How do we change the code to generate these double quotes ?
Thanks.
Hi,
You can use double-quotes if you like; alternative replacement to the above;
print "<meta name='description' content='".htmlentities($description,ENT_QUOTES,get_settings("blog_charset"))."' />\n";
if ($pto_productResults[0]->image_url)
{
print "<meta property=\"og:image\" content=\"".htmlentities($pto_productResults[0]->image_url,ENT_QUOTES,get_settings("blog_charset"))."\" />";
}As this will be a product image, I'm wondering if Facebook is not accepting it because the domain is different? You could try a test, by manually uploading a test image to your website and then hard coding the above using:
print "<meta name='description' content='".htmlentities($description,ENT_QUOTES,get_settings("blog_charset"))."' />\n";
if ($pto_productResults[0]->image_url)
{
print "<meta property=\"og:image\" content=\"/testimage.jpg\" />";
}Cheers,
David.
--
PriceTapestry.com
Hi David, gave both ideas a shot, no luck!
According to FB Debugger, it just doesn't see the meta's we are adding.
Tried re-scraping several times in case it was a caching issue.
Here is a "view source" of the actual page:
{code saved}
Notice, the only OG:meta's are the ones from the AIO SEO plugin !
Any ideas ?
Thanks.
Hi,
That's strange - are you sure Facebook is making a fresh request and not using a cached (from somewhere along the line) version?
One thing to do is to put a random variable in the URL e.g. if submitting page;
http://www.example.com/product/Blue-Widget.html
...try:
http://www.example.com/product/Blue-Widget.html?foo=bar
Cheers,
David.
--
PriceTapestry.com
Hi,
yes I agree it's definitely strange!
Tried your suggestion, indicates that the scrape was done 2secs ago, and shows the new random url.
I'll send you a screen-dump .pdf of the debugger results for reference, maybe it will give a clue.
Thanks David.
Hi,
Received - I'll follow up by email with you.
Cheers,
David.
--
PriceTapestry.com
Hi David, thought I'd carry this one on from here as we never got it resolved and others may still find it useful.
Now I have the latest PTO Beta3 in place on the new site, I've tried to get Facebook share working from the virtual product pages again. Managed to get the OG:image tag to show but still not being picked up from Facebook!
This time though, I've actually had some success with other pages on the site. Facebook picks up the shares perfectly.
Something that I have noticed, the pages that do work ok all have meta tags that define the size of the image, something we never tried before. As Facebook shares only work with minimum sized images (600 x 315)approx. maybe that was the problem ? Not sure how we would get round that one though as the images on the site aren't that big! Maybe use the image cache/resize mod and pull the larger images from the cached directory?
Here are the tags that I see on the working pages:
<meta property="og:image" content="https://example.com/wp-content/uploads/path/to/image.jpg" />
<meta property="og:image:width" content="600" />
<meta property="og:image:height" content="315" />Could this be the missing link ?
Thanks.
Hi,
It doesn't look as if the width/height properties are required so I just wanted to check, did you manage to have the og:image meta tag appear within the <head> section of your imported product pages, or is it appearing only within the main HTML body e.g. inserted by way of additional content added to the Product / Main template?
Cheers,
David.
--
PriceTapestry.com
Hi David
As you know the code
global $pto_config_databaseTablePrefix;
global $wpdb;
$sql = "SELECT * FROM `".$pto_config_databaseTablePrefix."products` WHERE name = '".$wpdb->escape($pto_productName)."' ORDER BY price LIMIT 1";
$wpdb->query($sql);
$product = $wpdb->last_result[0];
print "<meta property='og:image' content='".$product->image_url."' />";
$description = trim($description);Fingers crossed :)
Many thanks
BR
Richard
Hello Richard,
Sure - line numbers have changed quite a bit since the above modification so if you edit pto.php and look for the following line towards the top of the pto_head() function:
global $pto_headDone;...and REPLACE with:
global $pto_headDone;
if ($pto_q)
{
global $pto_config_databaseTablePrefix;
global $pto_searchWhere;
global $pto_q;
global $wpdb;
$sql = "SELECT * FROM `".$pto_config_databaseTablePrefix."products` WHERE ".$pto_searchWhere." LIMIT 1";
$wpdb->query($sql);
$product = $wpdb->last_result[0];
print "<meta property='og:image' content='".$product->image_url."' />";
}That would select a relevant image from the search result set to use as the og:image URL...
Hope this helps!
Cheers,
David.
--
PriceTapestry.com
Hi David
Many thanks, yes it works.
It does not work first time when pasting url in FB, but if the post is not posted and the url is pasted in again FB retrieves all the images.
I guess there is no way around that?
Best regards
Richard
Hello Richard,
I believe this is down to Facebook not knowing the image dimensions on the first share, meaning that it cannot be rendered until it has fetched the image and discovered the dimensions.
OpenGraph does support og:image:width and og:image:height and if these are supplied I think the image will be displayed first time, however in this instance the dimensions are not known.
However, for a niche site working with a single merchant where image dimensions are known, then the tags can be included - so within the modification where you have:
print "<meta property='og:image' content='".$product->image_url."' />";...for 300x300 images, REPLACE with:
print "<meta property='og:image' content='".$product->image_url."' />";
print "<meta property='og:image:width' content='300' />";
print "<meta property='og:image:height' content='300' />";Hope this helps!
Cheers,
David.
--
PriceTapestry.com
Hi David,
Thank you for the solution. Unfortunately not a niche site :(
I did try solution as I do resize all images to 300 but I guess it is the image url that is dictating dimensions for FB.
Thanks again for helping.
Best regards
Richard
Hi Tommy,
Have a go as follows; first of all; the Facebook Like code would need to be added to your PriceTapestry.org product page template HTML. If you go to wp-admin > Settings > PriceTapestry.org and then scroll down to HTML > Product / Main and then add the following:
<iframe src="http://www.facebook.com/plugins/like.php?href=%PRODUCT_HREF%" scrolling="no" frameborder="0" style="border:none; width:450px; height:80px"></iframe>Finally, in pto_product.php look for the following code at line 290:
$html_product = str_replace("%BUY_URL%",pto_common_buyURL($product),$html_product);...and REPLACE with:
$html_product = str_replace("%BUY_URL%",pto_common_buyURL($product),$html_product);$html_product = str_replace("%PRODUCT_HREF%",pto_common_productHREF($product),$html_product);
Cheers,
David.
--
PriceTapestry.com