Facebook share - image in share | MODX Community Forums

342 Posts

Willi Waizenegger Reply #1, 11 years, 2 months ago

I'm creating a Facebook share link. What I want to do is utilize a TV to add a particular image to the share link, within the <meta property="og:image...

In addition, if I choose not to add an image, I want the system to use a placeholder image instead. So, this is what I have so far, with partial success:

My Facebook link looks like this:

<a href="http://www.facebook.com/share.php?u=[[++site_url]][[~[[*id]]]]&title=[[*meta_title]]" target="_blank" class="facebook-share" title="Share This Article on Facebook"></span></a>

In the head of the site, my social media code looks like this:

<meta property="og:url"                content="[[++site_url]][[~[[*id]]]]" />
<meta property="og:type"               content="article" />
<meta property="og:title"              content="[[*meta_title]]" />
<meta property="og:description"        content="[[*meta_description]]" />
[[If? &subject=`[[*article_social_media_image]]` &operator=`empty` &then=`<meta property="og:image"              content="[[++site_url]]assets/images/common/facebook-share.jpg" />` &else=`<meta property="og:image"              content="[[++site_url]][[*article_social_media_image]]" />
]]

Notice the use of the If snippet. I'm trying to make it so that it sees whether or not I've added an image in the [[*article_social_media_image]] TV and if not, then show the "assets/images/common/facebook-share.jpg" placeholder image.

The link works great but only ends up showing the placeholder image on Facebook. I tried clearing site cache (both through the control panel and by emptying core>cache) and browser cache. It still only shows the placeholder image.

Has anyone experienced this and done something to remedy this? Could the problem be manifesting from Facebook?

Thank you in advance.

Revo v. 2.3.5-pl

This question has been answered by frogabog. See the first response.

discuss.answer

☆ A M B ☆
1,780 Posts

Frogabog Reply #2, 11 years, 2 months ago

[[If? &subject=`[[*article_social_media_image]]` &operator=`empty` &then=`<meta property="og:image" content="[[++site_url]]assets/images/common/facebook-share.jpg" />` &else=`<meta property="og:image" content="[[++site_url]][[*article_social_media_image]]" />
]]

The If snippet is missing the &operand parameter, which is actually where `empty` should be.

[[If? &subject=`[[*article_social_media_image]]` &operator=`is` &operand=`empty` &then=`<meta property="og:image"  content="[[++site_url]]assets/images/common/facebook-share.jpg" />` &else=`<meta property="og:image" content="[[++site_url]][[*article_social_media_image]]" />
]]

I have these Facebook and Twitter OG tags working with a default and a "social" image if in use. Also note the FB app ID associating the site first. It's using std output filters). FB also caches your site and if you want to change or make sure the correct article image is sent with shares you'll want to get cozy with the FB debugger tool https://developers.facebook.com/tools/debug/

I pulled this out and just realized the filters should be mosquitoed.

<meta property="fb:app_id" content="[[++fbAppID]]" /> 

[[*socialType:notempty=`
<meta property="og:type" content="[[*socialType]]">
`]]

[[*socialType:isequalto=`article`:then=`
<meta property="article:author" content="[[*socialAuthorUrl]]">
`]]
<meta property="og:title" name="twitter:title" content="[[*pagetitle]]">
<meta property="og:url" name="twitter:url" content="[[~[[*id]]]]">
<meta property="og:description" name="twitter:description" content="[[*socialDescription:empty=`[[*introtext]]`]]">
[[*socialTwitterCardType:notempty=`
<meta name="twitter:card" content="[[*socialTwitterCardType]]">
`]]
[[*socialTwitterName:notempty=`
<meta name="twitter:creator" content="[[*socialTwitterName]]">
`]]
[[*socialImage:empty=`
<meta name="twitter:image" property="og:image" content="[[!++site_url]][[*socialImage]]"`:else=`<meta name="twitter:image" property="og:image" content="[[!++site_url]]assets/site/graphics/header_logo.png" />
`]]

Frogabog- MODX Websites in Portland Oregon
"Do yourself a favor and get a copy of "MODX - The Official Guide" by Bob Ray. Read it.
Having server issues? These guys have MODX Hosting perfected - SkyToaster

342 Posts

Willi Waizenegger Reply #3, 11 years, 2 months ago

Thank you Frogabog, the missing &operand thing did the trick. I appreciate the quick response, too. You rock!

Not sure why that would work (I don't recall ever using it before) but I'm not going to look a gift-horse in the mouth..

☆ A M B ☆
1,780 Posts

Frogabog Reply #4, 11 years, 2 months ago

You're welcome! I'm glad to know it's working out.

Although, having used If a number of times, I always include &operand as the documentation shows. If is a finicky snippet, if &operand isn't there, pretty sure it chokes every time.

Frogabog- MODX Websites in Portland Oregon
"Do yourself a favor and get a copy of "MODX - The Official Guide" by Bob Ray. Read it.
Having server issues? These guys have MODX Hosting perfected - SkyToaster

Answered Facebook share - image in share