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){});
});
Related
i am starting a website which provides ayurvedic home made solutions to treat the diseases on which i have different pages with different home based remedies.
i have a piece of code which has a button of "this tip was helpful for me" which opens admin fb messenger where user can send direct message to fb page / web page admin..so i want to load a default message when the facebook messenger opens which says "thanks for this tip and it was really helpful for me " along with "current page url " and then user needs only to click send button without writing anything and it directly goes to admin messenger.
here is the code
<html>
<head>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '95100348886',
xfbml : true,
version : 'v2.6'
});
};
(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>
</head>
<body>
<div class="fb-messengermessageus"
messenger_app_id="95100348886"
page_id="xyz"
color="blue"
size="large">
</div>
<a href="https://m.me/xyz">
Message us on Facebook
</a>
</body>
</html>
replace xyz with facebook page name .
thanks in advance ..
I know Facebook changes their algorithms all the time, so I'm not even sure this is feasible anymore. But I want to be able when I create a FB share button using OpenGraph, that the message area of the post is dynamically populated with the text of a message I want to display. And I need to do it for four share buttons I plan to place on my HTML page. So I start off with the meta tags in the head like this:
<meta property="og:url" content="https://www.whatever.com/somepage.html" />
<meta property="og:type" content="website" />
<meta property="og:title" content="My Website" />
<meta property="og:description" content="I just watch this webpage from #Stack" />
<meta property="fb:app_id" content="012345678901234" />
Of course, some of these properties are fillers for the actual id and url, as you might expect.
Then I add this is the 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#xfbml=1&version=v2.3";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
and finally the code to generate one of the buttons:
<div class="fb-share-button" data-href="ttps://www.whatever.com/somepage.html" data-layout="button"></div>
That works to bring the share dialog popup up, but the message area is blank and I need it filled. So what am I doing wrong?
I have a simple code that I can't get to work. My website is asaphot.com and I have different images based on id and the url sample is http://asaphot.com/photos/14. Now my codes are:
<meta property="og:url" content="http://asaphot.com/photos/14" />
<meta property="og:type" content="website" />
<meta property="og:title" content="ASAPHOT" />
<meta property="og:description" content="Asaphot image" />
<meta property="og:image" content="{{ baseUrl() }}/assets/uploads/test.jpg" />
<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_GB/sdk.js#xfbml=1&version=v2.5&appId=696480183784974";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-share-button" data-href="http://asaphot.com/photos/14" data-layout="button_count"></div>
Whenever I click share, I only get the Canonical Url which is http://asaphot.com/login but Fetched Url is http://asaphot.com/photos/14.
The homepage shows up when I click share:
Am I missing something here?
I think you have to login to go that page.
When facebook is parses your URL, its encountering login page. So its going to login.
Solution:
Url Shared to facebook should not have any login.
Keep things to be shared without login.
EDIT
I dont think ots safe to do this,
But you can try this,
$host = gethostbyaddr($_SERVER['REMOTE_ADDR']);
if (substr($host, (strlen($host)-13)) == 'facebook.com' ){
//set a variable in session.or set login
}
Here is my simple html:
fb_driver.html
<!DOCTYPE html>
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<title>Facebook Driver</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="fb_driver.css">
</head>
<body>
<script>
window.fbAsyncInit = function() {
alert("why can i not see this?");
FB.init({
appId: 'my-app-id',
xfbml: true,
version: 'v2.0'
});
FB.ui({
method: 'feed',
name: 'The Facebook SDK for Javascript'
});
alert("hi");
};
(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'));
alert("hello");
</script>
<div id="fb-something" class="fb-like" data-send="true" data-width="450" data-show-faces="true">
</div>
</body>
</html>
It is essentially copied directly from https://developers.facebook.com/docs/javascript/quickstart/v2.0. The "hello" alert at the end of the script shows, but the "why can i not see this?" and the "hi" do not (they are inside window.fbAsyncInit = function() {...}). "why can i not see this?" is literally the first thing inside the fbAsyncInit block but still fails to show. Can someone help me with why this is not working?
One thing I can think of is that, even though the above link says nothing needs to be imported or downloaded and just need regular javascript, perhaps there is something in earlier instructions that I missed.
It ended up being that the '//' before 'connect.facebook.net/en_US/sdk.js' is no good for just opening the html file locally (which is what I'm doing just for playing around right now). I added 'http:' so it reads 'http://connect.facebook.net/en_US/sdk.js' and that got me to a different bug, which is progress.
I previously asked about making a custom like message on a users page and was directed to use open graph. I have tried the tutorial and can't seem to get it to work with my like button, can anyone help or offer some advice?
i have used the debug tool and get no errors and am a little confused as to what i should do next. My app uses a fixed php header and the body content is changed dynamically using AJAX. what i am trying to do is get a user to 'like' a coupon and it shows up on their site with my custom message, something like "someone has used coupon A from www.somesite.com"
Below is what is in my head;
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
<head prefix="og: http://ogp.me/ns# <?php echo APP_NAME;?> fb: http://ogp.me/ns/fb/<?php echo APP_NAME;?># test: http://ogp.me/ns/fb/test#">
<meta property="fb:app_id" content="xxxxxxxxxxxxxxx" />
<meta property="og:type" content="<?php echo APP_NAME;?>:coupon" />
<meta property="og:url" content="http://somesite.com/" />
<meta property="og:title" content="Sample Coupon" />
<meta property="og:description" content="Some Arbitrary String" />
<meta property="og:image" content="http://ogp.me/logo.png" />
and here is my like script, which currently works, but for the page and not the coupon.
<!-- Code for FB like button -->
<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_GB/all.js#xfbml=1&appId=xxxxxxxxxxxxxxx";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div class="fb-like" data-href="http://apps.facebook.com/test/" data-send="false" data-width="450" data-show-faces="false"></div>
Using the open graph tags only enable you to post stories like this:
User XYZ likes ABC on website.com
If you would like to specify your own actions (e.g. use) and objects ('coupon') you also need to create an application that will allow you to do this.
You can find a step by step tutorial on how to do this here:
https://developers.facebook.com/docs/opengraph/tutorial/