Jump to content

Facebook Posts - bad formatting


djcaseanova
 Share

Recommended Posts

I ran the code trace and $FBOG gets set to 1 (which is true-like). The meta statements are present in the Foundation skin of my installation.

That suggests to me that I should be looking at the Clean skin -- which may have a 'plug-in' component with hooks that could be corrupting Smarty variables already assigned to any of the skin template files. (That's just a guess because I don't have a copy of the skin to make this actual investigation.)

 

Link to comment
Share on other sites

Hi bsmither please drop me a PM and I can send you a dev copy of the skin and if it is a skin issue then we can work together to fix it.

I am pretty sure the code for facebook was untouched when building the skin.

If anyone else believes they have found a bug or wants to raise a feature request please do so at http://bugs.davidallsop.com/

PS, there are no plugins or hooks which are needed to run alongside Clean Skin.

Edited by fldavidallsop
Link to comment
Share on other sites

Earlier, you said:

"Tried the Facebook Social, the META statements are as follows..."

What has changed between then and now?

 

Nothing has changed. Have only done what is posted. This is my only project at the moment.

HTML still reads the same meta information. See attached screenshot for the product's HTML page showing same META as previously posted.

 

Screen Shot 2016-01-02 at 5.05.41 PM.png

 

EDIT: The only things I have changed was the XML file and the MAIN.PHP file for product.facebook as seen:

Edited by djcaseanova
Link to comment
Share on other sites

The problem is that when I am using the "Like" button for a product (any product) the post to Facebook is NOT formatted properly, nor does it give a proper image size, nor does it give any of the product information. The post shows part of a larger image, (even after the modifications you suggested), and it gives the store information and URL. This is what a product post is supposed to look like in most cases. This is also very similar to how WordPress plugins also look for products and blog posts.

Attached is my post for BAD formatting to Facebook and a correct format that is commonly seen. Mine is the one for Treasure-Post.com

The Treasure Post image is actually supposed to be for a product. If you need to see the product page here is the URL: http://www.treasure-post.com/store/alaskan-raw-1-lb-raw-gold-paydirt-p12-p29.html

 

bad_format.png

Screen Shot 2016-01-02 at 7.39.10 PM.png

Quite honestly, the image itself isn't the most important thing, it's more about getting the product information present with the post instead of just the store. I want to be able to advertise the products individually and not the store as a whole.

 

EDIT: I've added another example of a good post and here's the link for the actual product as well

http://www.bhphotovideo.com/bnh/controller/home?O=&sku=1175626&gclid=CID1z__DjMoCFZY0aQodKZwAhA&Q=&ap=y&m=Y&is=REG&A=details

 

Screen Shot 2016-01-02 at 7.52.57 PM.png

Edited by djcaseanova
Link to comment
Share on other sites

Here is the information from the Debug tool, using the same URL as through this post. I am providing the URL as it displays images that copy and pasting won't work for some reason on the forum.

https://developers.facebook.com/tools/debug/og/object?q=http%3A%2F%2Fwww.treasure-post.com%2Fstore%2Falaskan-raw-1-lb-raw-gold-paydirt-p12-p29.html

There are a couple of warnings "that should be fixed" with the meta information, as well as another warning for an App ID, as follows:

fb:app_id hasn't been included in the meta tags. Specify the app ID so that stories shared to Facebook will be properly attributed to the app. Alternatively, app_id can be set in url when open the share dialog. Otherwise, the default app id( 966242223397117 ) will be assigned.

 

Link to comment
Share on other sites

There is this from the FB docs:

Minimum Image Size

The minimum image size is 200 x 200 pixels. If you try to use an image smaller than this you will see an error in the URL Debugger.

So, maybe change the 'facebook' image parameters in the skin config.xml file to be the recommended 600 pixels max.

I don't have a facebook account, so the link to your debugger analysis won't get me anywhere.

Link to comment
Share on other sites

I made the change in the XML file to max 600. I went ahead and ran the debug scan again after making the change. Here is the debug page info.

 
 
When and how we last scraped the URL
Notice
 
Like Button Warnings That Should Be Fixed
Admins And App ID Missingfb:admins and fb:app_id tags are missing. These tags are necessary for Facebook to render a News Feed story that generates a high click-through rate.
Like Button Tag Missingog:title is missing. The og:title meta tag is necessary for Facebook to render a News Feed story that generates a high click-through rate.
Like Button Tag Missingog:type is missing. The og:type meta tag is necessary for Facebook to render a News Feed story that generates a high click-through rate.
Notice
 
Warnings That Should Be Fixed
Inferred PropertyThe 'og:title' property should be explicitly provided, even if a value can be inferred from other tags.
Inferred PropertyThe 'og:description' property should be explicitly provided, even if a value can be inferred from other tags.
og:image could not be downloaded or is too small
og:image was not defined, could not be downloaded or was not big enough. Please define a chosen image using the og:image metatag, and use an image that's at least 200x200px and is accessible from Faceboo... See More
 
These are the raw tags that we found
Based on the raw tags, we constructed the following Open Graph properties
og:urlhttp://www.treasure-post.com/store/alaskan-raw-1-lb-raw-gold-paydirt-p12-p29.html
og:typewebsite
og:titleTreasure Post
og:imagesafe_image.php?d=AQDcR7fJbMFng7hd&url=htsafe_image.php?d=AQDcR7fJbMFng7hd&url=ht
og:descriptionThe Treasure Post has it all. Metal detecting to gold prospecting. Some of the best gold paydirts from around the country!
og:updated_time1451788661
 
When shared, this is what will be included
 
Warning
fb:app_id hasn't been included in the meta tags. Specify the app ID so that stories shared to Facebook will be properly attributed to the app. Alternatively, app_id can be set in url when open the share dialog. Otherwise, the default app id( 966242223397117 ) will be assigned.
Link to comment
Share on other sites

This:

og:image could not be downloaded or is too small

og:image was not defined, could not be downloaded or was not big enough. Please define a chosen image using the og:image metatag, and use an image that's at least 200x200px and is accessible from Facebook.

So, you have now set the 'facebook' image to be 600. But the image URL I am seeing on your page is still at 150. I think you should clear CubeCart's cache, the re-run the Facebook debugger -- hopefully the og:image content will get updated in the page.

Link to comment
Share on other sites

I see the HTML for your site now has:

(for og: image) /images/cache/Paydirts/AlaskanRaw/full_raw1.600.jpg

(I'm 'borrowing' someone's Facebook account) and I read this:

These are the raw tags that we found
Meta Tag	<meta property="og:image" content="http://www.treasure-post.com/store/images/cache/Paydirts/AlaskanRaw/full_raw1.600.jpg" />
Meta Tag	<meta property="og:url" content="http://www.treasure-post.com/store/alaskan-raw-1-lb-raw-gold-paydirt-p12-p29.html" />

So, Facebook is finding the appropriate link to the image. But it seems what they want to show is just a 470x275 section of the image.

Therefore, it may be a product experiment to make the 'facebook' size of 275 pixels in the skin config. This will (probably) end up being square and contain the whole of the picture.

Moving on...

There can be more stuff to add to additional meta tags. Try:

<meta property="og:type" content"product" />
<meta property="og:site_name" content="{$CONFIG.store_name}" />
<meta property="og:title" content="{$PRODUCT.name}" />
<meta property="og:description" content="{$PRODUCT.description_short}" />

 

Link to comment
Share on other sites

So I attempted to put the extra meta properties as mentioned above into the main.php file. When going to the store and viewing the products, the products description was then placed out of format at the top of the product pages. I tried tweaking it a bit but could never get the page to look right, and therefore was unable to test the actual Facebook posts. I tried exactly what you had above and then tried a few tweaks to that as well. The final attempt is below before I reverted it back to it's original state.

{if $FBOG}
		<meta property="og:image" content="{$PRODUCT.facebook}">
		<meta property="og:url" content="{$VAL_SELF}">
        <meta property="og:type" content="product" >
        <meta property="og:site_name" content="{$CONFIG.store_name}" >
        <meta property="og:title" content="{$PRODUCT.name}" >
        <meta property="og:description" content="{$PRODUCT.description_short}">
	{/if}

 

Link to comment
Share on other sites

"the products description was then placed out of format at the top of the product pages."

This might be because the 'description_short' could have HTML code in it. But I'm not sure. The images you posted above seem to be devoid of any HTML effects in the description.

I didn't go far enough in thinking this through, but if content in the <head> section (as opposed to the <body> section) has HTML code, perhaps the browser is trying to render and display it.

Try this edit:

<meta property="og:description" content="{$PRODUCT.description_short|strip_tags:false}" />

 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...