Facebook Posts - bad formatting

[djcaseanova]

When I copy a link to Facebook for a product, the thumbnail that shows up is my store logo and the information is also general site information and NOT related to the product. Can someone tell me what needs to be done so that I can post direct product links and have the information show up on Facebook? Also, the images that show up are not optimized for the posts, maybe there is a plugin for this? If there is, I have not come across one specifically solving this problem.

[Dirty Butter]

I wish I could give you good news on this issue. I have very spotty results - sometimes correct, but often wrong. And we're not alone. You can try what's suggested in this thread:

[djcaseanova]

Thanks, I am looking in to that, but mine dont even show the product information or images at all. It only shows the store logo and the store name and description, not the actual items.

[bsmither]

Disclaimer: I have zero knowledge regarding Facebook.

But, from my perspective on how I would do things, if given just a link to a page, I would need to scan the whole page and look for an image tag with a specific attribute - such as perhaps: <img facebook="use_this" src="wherever">

If someone can provide good info on what Facebook wants in regards to what to flag and how, we can try to solve this.

[djcaseanova]

I am not a programmer so I don't know if this is what you are looking for. It says something about OpenGraphs?

http://stackoverflow.com/questions/12534774/correct-html-code-for-facebook-status-posts

https://developers.facebook.com/docs/sharing/opengraph

 

 

[bsmither]

In the template main.php, there is this:

{if $FBOG}
<meta property="og:image" content="{$PRODUCT.thumbnail}">
<meta property="og:url" content="{$VAL_SELF}">
{/if}

$FBOG is set to true in the modules /social/AddThis/ and /social/Facebook/. (There may be other social modules, but these are the two I have looked at.)

In the Facebook social module, there is:

if($this->_module['status'] 
&& $this->_module['like_status'] 
&& ($this->_module['like_location']==$this->_section 
 || $this->_module['like_location']=='all')
) {
// Stuff
  if ($this->_section=='product') $GLOBALS['smarty']->assign('FBOG', 1);

This means the Facebook social module must be installed and enabled, the "Like" status enabled, and the "Where to show" location either Product or both products and documents. But, the $FBOG meta property statements will only be on the Product page.

So, get and configure the Facebook social module. When viewing a product page, have the browser show you the page HTML source code. Find the <meta property="og: statements to verify.

[djcaseanova]

Tried the Facebook Social, the META statements are as follows for the html page of the product:

<meta property="og:image" content="http://www.treasure-post.com/store/images/cache/Paydirts/AlaskanRaw/full_raw1.592.jpg">
<meta property="og:url" content="http://www.treasure-post.com/store/alaskan-raw-1-lb-raw-gold-paydirt-p12-p29.html">

 

When posting to Facebook, the image itself is oversized, the facebook title is for the store, and there is no product information. See attached. It looks as though it's just an advertisement for the actual store and not a product. This was created using the Facebook comments and like buttons app in marketplace.

[bsmither]

The image is the skin's 'thumbnail' size -- 592 pixels on it's longest side -- is full_raw1.592.jpg. Please check your skin's config.xml file and find:

  <images>
	<image reference="thumbnail" maximum="190" quality="80" default="noimage.png" />

The longest side of 190 pixels is Foundation's stock size.

It looks like more og: meta property statements are needed other than just image and url.

[djcaseanova]

In the .xml file, this is the image tag information. The defined thumbnail size is 188, but the normal image max says 592.

 

<images>
		<image reference="thumbnail" maximum="188" quality="100" default="noimage.png" />
		<image reference="category" maximum="1200" quality="100" default="" />
		<image reference="subcategory" maximum="188" quality="100" default="noimage.png" />
		<image reference="gallery" maximum="188" quality="100" default="noimage.png" />
		<image reference="normal" maximum="592" quality="100" default="noimage.png" />
		<image reference="enlarge" maximum="800" quality="100" default="" />
		<image reference="tiny" maximum="30" quality="100" default="noimage.png" />
		<image reference="small" maximum="188" quality="100" default="noimage.png" />
		<image reference="medium" maximum="592" quality="100" default="noimage.png" />
		<image reference="large" maximum="800" quality="100" default="" />
	</images>

 

[bsmither]

In the skin you are using, check the template main.php.

{if $FBOG}
<meta property="og:image" content="{$PRODUCT.thumbnail}">
<meta property="og:url" content="{$VAL_SELF}">
{/if}

You say your thumbnail size is 188, but the <meta property="og:image" says 592. So, then the template may have {$PRODUCT.medium} or {$PRODUCT.normal} in the meta statement. Or, Smarty is still using a cached copy of the rendered template when that template had these variables.

[djcaseanova]

You are correct, in main.php the skin is using the following

 

{if $FBOG}
		<meta property="og:image" content="{$PRODUCT.medium}">
		<meta property="og:url" content="{$VAL_SELF}">
	{/if}

 

[bsmither]

Feel free to change medium to whatever size you want Facebook to fetch.

In fact, we can add to the config.xml file:

 <images>
	<image reference="facebook" maximum="150" quality="80" default="facebook_default.png" />

Make the edit in main.php {$PRODUCT.facebook}. Create a new default image that is useful for Facebook viewers that suggests there is no image for this product, such as, instead of "No Image Available", have the image be of an "Under Construction" sign or "Check for this image tomorrow" street sign.

[djcaseanova]

Do I use the {$PRODUCT.facebook} in place of the {$PRODUCT.medium} for the {if $FBOG}?

Thanks for your help this far!

[bsmither]

Yes, you can, assuming you've added the new line in config.xml.

[djcaseanova]

I did both and tested. Unfortunately, no change, same issue upon testing.

[bsmither]

Maybe clear your cache?

I requested a random page and I do not see the <meta name="og: statements in the HTML I received.

Is the Facebook module enabled as detailed in an earlier post?

[djcaseanova]

Facebook Comments and Like button app is enabled in the store cart. I just attempted to clear cache in store and browser and tested again.

I requested a random page and I do not see the <meta name="og: statements in the HTML I received.

Sorry, I must have missed something, I don't see where meta name was mentioned earlier??

[bsmither]

Sorry:

{if $FBOG}
<meta property="og:image" content="{$PRODUCT.thumbnail}">
<meta property="og:url" content="{$VAL_SELF}">
{/if}

I don't see the <meta property="og: statements that would appear in the final HTML sent to my browser if $FBOG is true.

[djcaseanova]

You are correct, in the product HTML pages I do not see the {if $FBOG} tag, but it IS in the main.php file??? The Facebook plugin is also enabled. And on the product pages, the "Like" button does show up. However, when I click the "Like" button, it shows a blank textbox with my website domain at the bottom. It allows me to add the comments, but shows no images or information. When I click the submit button, it does post to my Facebook account (see facebook post images in previous posts).

[bsmither]

"in the product HTML pages I do not see the {if $FBOG} tag, but it IS in the main.php file???"

The template file, main.php, has Smarty statements and variables -- these are surrounded by {braces}. When the template is being rendered, the statements are executed and then removed.

The statement {if $FBOG} will be executed -- if $FBOG holds a true or true-like value, what follows will be included in the final rendered output -- the meta tags. Since the meta tags are not present, then $FBOG must have been other than true.

We just need to figure out why $FBOG is not getting set to true.

[djcaseanova]

I am using the Clean Skin, would it be a skin issue for some reason? I have not made any modifications to the coding for the skin.

Edited January 1, 2016 by djcaseanova

[verhoejw]

using the clean skin also, have the same issues

[bsmither]

I have looked at the main.php template of the Clean skin as it is installed at Treasure-Post, and I see the correct Smarty statements. (In both the /store/ and /custom/ installations.)

Please make this very short-term experiment:

Open the template for editing: /custom/skins/clean/templates/main.php, and add at the bottom {debug}. Save the file back.

Make a page request to the /custom/ installation. There will be a popup window with the Smarty variables that have been assigned to the template.

Find $FBOG.

If it's not in the list, then CubeCart did not assign true to this variable.

Are we all confident we are configuring the Facebook module in the correct installation?

[verhoejw]

$FBOG isnt in it and yes its correct installed

[bsmither]

Have we confirmed that for your installations of the Facebook Social Module, the use of the Foundation skin (or if using CC5, the Kurouto skin) also has these specific meta tags not appearing in the HTML source as received by the browser?

I will run a code trace on the module (I don't have a copy of the Clean skin) and see what is happening. Be back shortly.