Trying like hell getting something awkwardly simple as a Facebook share button to work on my Sage site, but when share button is clicked, the image nor description shows up.
However; when the URL is pasted directly into Facebook, everything is OK and rendered correctly. At first I thought it was something with my logic, but I’ve dumbed it down to this:
Under the body tag:
<div id="fb-root"></div>
<script>
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.4";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
In the footer (where ever):
<div class="fb-share-button" data-href="https://www.mypage.no" data-layout="link"></div>
Right above head:
<meta property="og:url" content="http://www.mypage.com/" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Your Website Title" />
<meta property="og:description" content="Your description" />
<meta property="og:image" content="http://www.mypage.com/image.jpg" />
Used resources:
- https://developers.facebook.com/tools/debug/
- https://developers.facebook.com/docs/plugins/share-button#configurator
Why I ask
I need to know if there’s something with Sage I don’t know about that can cause this? main.js stuff? Caching? Something hookin’ in somewhere? This is getting ridiculous
I also noticed the Sage Social Share Plugin: https://roots.io/plugins/roots-share-buttons/
So. I hope you understand me asking.
Cheers!