I've set up a custom Facebook share button for a website. When I click that button in Firefox it serves me a nice share dialog (popup) with all var's I've defined. Posts to my wall in Facebook, all nice! But the same code fails in Chrome, Safari, IE. It throws me an error in the popup: "An error occurred. Please try again later."
The javascript I'm using (alongside OG meta-tags in the head of course): The website where I use this script: http://www.henkeningrid.org (the Like button gets activated when a quote is clicked)
el.find('a.facebook-feed').click(function() {
var quote = $(this).parents().find('h1').html();
var url = $(this).parents('article').attr('data-url');
var publish = {
method: 'feed',
message: '',
name: 'Henk en Ingrid',
caption: '“'+quote+'”',
description: ('De wereld volgens Henk en Ingrid.'),
link: 'http://www.henkeningrid.org/nl/quote/'+url,
picture: 'http://www.henkeningrid.org/site/gfx/fb_preview.png',
actions: [{name: 'Henk en Ingrid', link: 'http://www.henkeningrid.org/'}],
user_message_prompt: ''
};
FB.ui(publish);
//return false;
});
We were having this problem with the new version of the JavaScript SDK as well - it's odd that it only happens on Chrome but the solution was, indeed, to remove the synchronous version of the SDK as well. We kept the asynchronous code and it fixed the issue we were seeing across all browsers.
<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/all.js#xfbml=1&appId=XXXXXX";
fjs.parentNode.insertBefore(js, fjs);
} (document, 'script', 'facebook-jssdk'));
</script>