modX add og:image and og:description dynamically - facebook

Question

I am trying to create a Facebook share option for my blog articles, and it works but it doesn't take the article text or image, but the first image and text on the (single page) website. How can I change my share code so that it will use the article's image and text from where I click the FB share button?
This is the template for the blog article, with the FB share code included:
<div class="contentLeft">
<div class="roundimage">
<a href="[[+roundImage:phpthumbof=`h=750&zc=1`]]" class="colorbox" title="[[+roundImageCaption]]"><img class="round"
src="[[+roundImage:phpthumbof=`w=170&h=170&zc=1&q=95`]]" alt="[[+roundImageCaption]]" /></a>
</div>
<script type="text/javascript">function fbs_click() {u=location.href;t=document.title;window.open('http://www.facebook.com/sharer.php?u='+encodeURIComponent(u)+'&t='+encodeURIComponent(t),'sharer','toolbar=0,status=0,width=626,height=436');return false;}</script>
<h4 class="blue" style="margin-bottom:10px; margin-top:0;">[[+articleHeadline]]</h4>
<p class="datetext">[[+datetimeText]]</p>
<p class="readmoretext">[[+articleText]]</p>
<div class="divider"></div>
</div>
I hope you can help! Thank you!

Answer 1

It should be enough to make sure that the article page, ie the link that you are sharing, embeds the correct og:image and og:description. You only share the link with the share button, and facebook will embed the link and look in it for the proper data.
Update:
I guess you're not using the articles package to create the blog? If you are you already have individual pages even if you're not using them =) If you're not i assume you're using some sort of resource loop to create your entries.
After looking around in the facebook docs it seems you can specify the image (https://developers.facebook.com/docs/opengraph/using-actions/v2.0#params) when creating your share button using the javascript sdk (https://developers.facebook.com/docs/sharing/reference/share-dialog). Each article will need to call something like this instead of the current javascript share url functionality.
FB.ui({
method: 'share_open_graph',
action_type: 'og.likes',
action_properties: JSON.stringify({
image: "YourImageForThisRespectiveShare",
})
}, function(response){});
If you prefer to explore the method i mentioned in the comments it would go something like this:
Look in your code at u=location.href;, you'd want to try modifying that to u=location.href+'?articleid=[~[*id*]~]';. When you share you should hopefully see the appended article ID for each article.
You'll then need to make sure you can specify og:image and description for each article, i assume you somehow have resources set up that represent each article, in that case just create a couple of template variables for that resource type.
In your header you could then use the getResourceField package for example to retrieve the correct TV from the correct resource, as specified by the ?articleid= parameter in your URL.
To retrieve the parameter you'll need a simple snippet like return (!empty($_GET['articleid']) ? $_GET['articleid'] : $default);. Lets name the snippet: "getArticleId". I left the option to decide a default image when there is no &articleid specified.
You're using modx evolution from the look of your [~[*id*]~] tag, but there should be some equivalent of the getResourceField package for evolution. This is the revolution version of the code needed:
<meta property="og:image" content="[[!getResourceField?
&id=`[[!getArticleId? &default=`[[*id]]`]]` //Take the blog page's own image as a default
&field=`imageTV` //you'll of course have to change "imageTV" to whatever you call it
&isTV=`1`
]]" />
Repeat for og:title and og:description, with their respective TV names.