I am trying to make a custom Facebook Share button, by providing my own img and applying FB.ui() to it, but the method opens the dialogue stating:
Given URL is not permitted by the Application configuration: One or more of the given URLs is not permitted by the App's settings. It must match the Website URL or Canvas URL, or the domain must be a subdomain of one of the App's domains.
Can anyone tell me what I am doing wrong?
index.php:
<head>
<meta property="og:url" content="http://www.example.com" />
<meta property="og:title" content="Why can't I" />
<meta property="og:description" content="get this thing to work" />
<meta property="og:image" content="http://www.example.com/images/whyaretherenoexamplesanywhere.jpg" />
</head>
<body>
<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";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
// more div's
</body>
in a div on index.php, the file ajaxPage.php is loaded, by means of an ajax call. this in itself and everything in it works perfectly.
In this file an image exists as a button, bound by a .click() method, which together prompt the dialogue for sharing:
ajaxPage.php:
// In de DOM:
<img class="customFacebookIcon" src="enoughwiththefunnynames.jpg"/>
// In the <script>:
$('.customFacebookIcon').click(function(){
FB.ui({
method: 'share',
appId: '12345678901234567890',
href: 'http://www.example.com',
}, function(response){});
});