I tried to use the Articles package, but this never worked, some kind of bug I think, so I implemented those articles into the main page with an iframe. I know, it's an awful solution, but since the article needs to be on a separate page in order for the FB share to work properly, and take the meta tags, this is what I came up with.
So I have a container page for the special events articles, which is being loaded into the main page (= single page website). This is the template chunk:
<div id="specialeventsContainer">
<div class="contentslideshow">
[[!getImageList? &tvname=`contentSlider` &tpl=`tpl_contentSlider`]]
</div>
<div class="goHome"><a href="#homeContainer" id="goHomeBtn" title="Home"></a></div>
<h1 class="contentheader"><span>Entertainment</span></h1>
<h2>[[*pagetitle]]</h2>
<div id="specialeventsContent">
<div class="content">
[[!renderResources? &parents=`67` &tpl=`specialevents_tpl`]]
</div>
</div>
</div>
The template chunk (specialevents_tpl):
<script language="javascript" type="text/javascript">
function resizeIframe(obj) {
obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}
</script>
<iframe class="iframe1" width="100%" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="[[*id]]" onload="javascript:resizeIframe(this);">
</iframe>
The template for the articles:
<html>
<head>
<base href="[[!++site_url]]" />
<title>[[++site_name]] - [[*articleHeadline]]</title>
<meta property="og:image" content="[[*roundImage]]" />
<meta property="og:title" content="[[*articleHeadline]]" />
<meta property="og:description" content="[[*articleText:strip_tags]]" />
<meta property="og:url" content="[[++site_url]]index.php#specialeventsContainer" />
[[$fbshare]]
[[$specialEventsCSS]]
[[$specialEventsJS]]
[[$googleAnalyticsJS]]
[[$colorboxJS]]
[[$slideToggleJS]]
</head>
<body>
<div class="contentLeft iframe">
<div class="roundimage">
<img class="round" src="[[*roundImage:phpthumbof=`w=170&h=170&zc=1&q=95`]]" alt="[[*articleHeadline]]" />
</div>
<a class="fbsharebutton" id="shareFB" href="https://www.facebook.com/sharer/sharer.php?u='http://aaa.com/#/project/xbox-branding'&t=TITLE"
onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;" target="_blank" title="Share on Facebook">Share on Facebook</a>
<script type="text/javascript">document.getElementById("shareFB").setAttribute("href", "https://www.facebook.com/sharer/sharer.php?u=" + document.URL);</script>
<h4 class="blue" style="margin-bottom:10px; margin-top:0;">[[*articleHeadline]]</h4>
<p class="datetext">[[*datetimeText]]</p>
[[*articleText]]
<div class="divider"></div>
</div>
</body>
</html>
So as you see, I included the og tags into the article pages, so it should work (at least from my way of understanding).
But it doesn't use the meta tags at all, so I don't know what the problem is. I didn't use the FB app.
