Jump to content

Facebook Posts - bad formatting


djcaseanova

Recommended Posts

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Screen Shot 2015-12-29 at 12.19.11 PM.png

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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>

 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Screen Shot 2015-12-29 at 4.48.18 PM.png

Screen Shot 2015-12-29 at 4.50.59 PM.png

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??

Link to comment
Share on other sites

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).

Link to comment
Share on other sites

"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.

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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.

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.

×
×
  • Create New...