Sorry for not posting the solution here earlier, but that very same website has been giving me major headaches....
For everybody who is looking for a solution to include proper FB sharing into one-page websites, here is the solution I came up with for my project:
First of all, this solution is really NOT a perfect solution because it uses iframes. So if you are not comfortable with this, don't use it. For my project, it really was the only way without having to restructure everything. So I am just "warning" you that this might not be a very clean solution, but it works.
The structure in my project is that I have one main page where all content is loaded into, and I do this with renderResources. First I am loading the "events container" into the main page with this code:
[[!renderResources? &resources=`67`]]
Resource ID 67 is my container for the event articles. This container uses a template, containing this code:
<div class="content">
[[!renderResources? &parents=`67` &tpl=`specialevents_tpl`]]
</div>
What this code is doing, it loads the event articles into the container, using the template chunk "specialevents_tpl", which includes the following code:
<script language="javascript" type="text/javascript">
function resizeIframe(obj) {
obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}
</script>
<iframe id="article[[*id]]" class="iframe1" width="100%" frameborder="0" scrolling="no"
marginheight="0" marginwidth="0" src="[[*id]]" onload="javascript:resizeIframe(this);">
</iframe>
Here you see the iframe solution, and the javascript was necessary because otherwise the articles wouldn't fully show but were cut off.
The template for the event articles lookks like this:
<html>
<head>
<title>[[++site_name]] - [[*articleHeadline]]</title>
<meta property="og:type" content="website" />
<meta property="og:image" content="[[++site_url]][[*roundImage]]" />
<meta property="og:title" content="[[*articleHeadline]]" />
<meta property="og:description" content="[[*articleText:strip_tags]]" />
<meta property="og:url" content="[[++site_url]][[*id]]" />
[[$specialEventsCSS]]
[[$specialEventsJS]]
[[$googleAnalyticsJS]]
[[$colorboxJS]]
[[$slideToggleJS]]
<script>
if (self == top)
{
document.location.href='http://www.pricklybaymarina.com/index.php#article[[*id]]'
}
</script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-53612514-1', 'auto');
ga('send', 'pageview');
</script>
</head>
<body>
<div class="contentLeft iframe">
<div class="roundimage">
<img class="round" src="[[*roundImage:phpthumbof=`w=200&h=200&zc=1&q=95`]]" alt="[[*articleHeadline]]" />
</div>
<a class="fbsharebutton" id="shareFB" target="_blank" href="http://www.facebook.com/sharer/sharer.php?u=[[++site_url]][[*id]]" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;" title="Share on Facebook"></a>
<h4 id="article[[*id]]" class="blue" style="margin-bottom:10px; margin-top:0;">[[*articleHeadline]]</h4>
<p class="datetext">[[*datetimeText]]</p>
[[*articleText]]
<div class="divider"></div>
</div>
</body>
</html>
To see this all in "action", go to www.pricklybaymarina.com and choose "Entertainment" and "Special Events". Voila.
Again, this is not a great solution at all, but it works, so I hope it is of help for some of you who have been looking for something similar.
Any questions, feel free to ask.
