I want to get URL of users who share from my links, I have got the post_id but when I try to get full post URL, facebook asking for my access token, can I have the access token after users share?
This is my Code [UPDATED]:
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'MYAPPID',
xfbml : true,
status : true,
cookie : true,
version : 'v2.3'
});
};
(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>
<script>
function shareonfacebook(){
FB.ui(
{
method: 'feed',
name: 'Example',
link: 'https://www.example.com',
picture: 'Example.jpg',
caption: 'Example',
description: 'Example',
},
function (response) {
if (response && response.post_id) {
alert('Thanks!');
console.log( response );
} else {
alert('Oops!');
}
}
);
};
</script>
The post ID will only be there if you authorize a user with the publish_actions permission:
Only available if the user is logged into your app using Facebook and
has granted publish_actions. If present, this is the ID of the
published Open Graph story.
Side Note: If you need help with the Login part, here's an article about that: http://www.devils-heaven.com/facebook-javascript-sdk-login/
Related
My Send-to-messenger plugin is not appearing on my website.
Here is my config:
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'xxxxx',
autoLogAppEvents : true,
xfbml : true,
version : 'v3.0'
});
};
(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 = "https://connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div class="fb-send-to-messenger"
messenger_app_id="xxxxx"
page_id="vvvvv"
color="blue"
size="large">
</div>
The html generated by this code on this page: https://www.weekendr.eu/bonsplans seems ok, but the button would still not appear.
Some elements which may help :
I'm on prod env
My website has https: https://www.weekendr.eu
My app is published and online
I'm admin and connected to FB besides
I allow third-party cookies
Thanks !
I can see your code and found you are missing to subscribe event.
FB.Event.subscribe('send_to_messenger', function(e) {
// callback for events triggered by the plugin
});
Please find full code below :
<script>
window.fbAsyncInit = function() {
FB.init({
xfbml : true,
version : 'v3.2'
});
FB.Event.subscribe('send_to_messenger', function(e) {
// callback for events triggered by the plugin
console.log(e);
});
};
(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 = 'https://connect.facebook.net/en_US/sdk/xfbml.customerchat.js';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div class="fb-send-to-messenger"
messenger_app_id="<Your App ID>"
page_id="<Your Page ID>"
data-ref="1"
color="blue"
size="large">
</div>
In extra, you need to follow below steps before you write above code:
1) Add your domain into the white list (Go to your facebook page -> setting)
2) Create webhook in your server and write below code (Code is in PHP. You can use any language)
For node js: https://developers.facebook.com/docs/messenger-platform/getting-started/webhook-setup
<?php
if($_SERVER["REQUEST_METHOD"] == "POST") {
//Write code to listen webhook request
} else {
$VERIFY_TOKEN = '1234';
$mode = $_REQUEST['hub_mode'];
$token = $_REQUEST['hub_verify_token'];
$challenge = $_REQUEST['hub_challenge'];
if ($mode && $token) {
// Checks the mode and token sent is correct
if ($mode === 'subscribe' && $token === $VERIFY_TOKEN) {
// Responds with the challenge token from the request
console.log('WEBHOOK_VERIFIED');
echo $challenge;
http_response_code(200);
} else {
// Responds with '403 Forbidden' if verify tokens do not match
http_response_code(403);
}
} else {
http_response_code(403);
}
}
?>
3) Goto apps settings and verify your webhook
Setting URL :
https://developers.facebook.com/apps/<Your App ID>/messenger/settings/
Now you should be able to view the "Send to Messenger" button
Note: If app is in development then Admin, developer & tester can only see this button.
You need to whitelist your domain (https://www.weekendr.eu) in the Messenger Profile for your page:
https://developers.facebook.com/docs/messenger-platform/reference/messenger-profile-api/domain-whitelisting
I'm assuming you are replacing all the xxx and vvv with your actual app ID and Page ID, as well.
In my case, the issue is because my Ad blocker (uBlock) blocks the call to facebook. Disabling uBlock solve the issue.
I want to add Facebook login to my website, My script is working fine but I am not sure this way is correct or not, can you someone verify and suggest If I am doing wrong. And I have few questions.
Script:
function statusChangeCallback(response)
{
if (response.status === 'connected') {
testAPI();
} else if (response.status === 'not_authorized') {
console.log('still not authorized!');
} else {
console.log("not connected, not logged into facebook, we don't know");
}
}
window.fbAsyncInit = function() {
FB.init({
appId : 'APP_ID',
cookie : true,
xfbml : true,
version : 'v2.8'
});
checkLoginState();
FB.AppEvents.logPageView();
};
(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'));
function checkLoginState() {
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});
}
function testAPI() {
console.log('Welcome! Fetching your information.... ');
FB.api('/me', { fields: 'name,email,gender' }, function(response) {
console.log('Successful login for: ' + response.name);
document.getElementById('status').innerHTML =
'Thanks for logging in, ' + response.name + '!';
window.location.replace('http://www.example.com');
});
}
Button display:
<div class="fb-login-button" data-onlogin="checkLoginState()" data-max-rows="1" data-size="medium" data-button-type="login_with" data-show-faces="false" data-auto-logout-link="false" data-login-text="Sign in with Facebook"></div>
After successful login, I want to redirect to members-only.php by passing id, email. In the above script I have written window.location.replace('http://www.example.com'); instead example.com, can i give my php file name?
appId can be seen by every body, will that be fine? or we need to keep it as secret?
If the user is coming for the first time, what details we need to register in our database? and from second time how can we identify that user?
Thanks in advance.
window.location.replace('http://www.example.com/members-only.php');
It is no problem to make the App ID public. Just be careful with Access Tokens and the App Secret. They are not meant to be public.
You only need the ID to identify the user. The rest is up to you, if you want to cache it.
Is there a parameter to change the bold black text (text "Google" in the example below) in Facebook's sharing dialog? If yes, which one?
My code:
window.fbAsyncInit = function() {
var locationArray = window.location.href.split("/");
FB.init({
channelUrl: locationArray[0] + '//' + locationArray[2] + '/channel.php', //custom channel
xfbml : true,
version : 'v2.6'
});
}
function test(){
alert("test");
FB.ui(
{
method: 'share',
name: 'Sharing Test Name',
caption: 'Sharing Test Caption',
//picture: 'http://4.bp.blogspot.com/-8BR3- K0b_lI/VlZ6b3WCM5I/AAAAAAAARmA/ATbes06U8oU/s1600/mustache-smiley.jpg',
description: "Post to test the sharing funtion available via Facebook's js sdk",
href: 'https://google.de',
},
// callback
function(response) {
if (response && !response.error_message) {
alert('Posting completed.');
} else {
alert('Error while posting.');
}
}
);
}
<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/de_DE/sdk.js#xfbml=1&appId={{ fbAppId }}&version=v2.5";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div onclick="test()">share</div>
Research didn't return anything for me (Facebook's docs, here, Google). Is Facebook not allowing to change that part of the dialog text?
There used to be parameters to control this, I may be mistaken however currently I think the only way to do this is using the Open Graph meta tags.
I tried the following code for facebook share
<p>
<a rel="nofollow" target="_blank" class=" icon_facebook ">Share</a>
</p>
jQuery(document).ready(function($) {
window.fbAsyncInit = function() {
//SDK loaded, initialize it
FB.init({
appId : 'your-app-id',
xfbml : true,
version : 'v2.5'
});
};
//load the JavaScript SDK
(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'));
jQuery('.icon_facebook').click(
function(){
FB.ui(
{
method: 'share',
name: 'Facebook Dialogs',
link: 'https://developers.facebook.com/docs/dialogs/',
picture: 'http://fbrell.com/f8.jpg',
caption: 'Reference Documentation',
description: 'Dialogs provide a simple, consistent interface for applications to interface with users.'
},
function(response) {
if (response && response.post_id) {
alert('Post was published.');
} else {
alert('Post was not published.');
}
}
)
});
}
);
then it showing error .
Given URL is not allowed by the Application configuration: One or more
of the given URLs is not allowed 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.
And the share url in both facebook all ready logined and logout condition is like https://www.facebook.com/v2.5/dialog/share?app_id=MY APP ID ,.....
But in other websites the working share page url format is different . When not login then it shows like
https://www.facebook.com/login.php?skip_api_login=1&api_key=..
when some one already login to the faccebook it shows like https://www.facebook.com/v2.3/dialog/share?redirect_uri=https%3A%2F%2Fwww.facebook.com%2Fdialog%2Freturn%2Fclose&display=popup&href=
Why my facebook share url is different ? is am missing any code part ?
Is there any mistake in my code ? please help .
From the comments:
Make sure you have the correct appId in FB init; and
The shared URL must be listed in the App Domains input under App Settings on your Dveloper console in Facebook.
Having issues getting the Share Dialog to work properly. My code is as follows (in slim):
doctype html
html
head
title test page!!!
javascript:
window.fbAsyncInit = function () {
FB.init({
appId: 'xxx',
xfbml: true,
version: 'v2.2'
});
};
(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'));
body
h1 Facebook custom share button test
a href='#' Testing!!
javascript:
document.getElementsByTagName('a')[0].addEventListener('click', function() {
FB.ui({ method: 'share', href: 'http://www.washingtonpost.com' }, function(resp) {});
return false;
});
My app setting on Facebook (development app) are setup correct (Site URL is set to http://localhost:3000/).
In summary, everything works except for the message that the user can type into the dialog here:
That value never shows up when the post reaches the user's timeline feed:
I think I'm following the documentation correctly. What am I missing?
This appears to be a bug in sdk!
https://developers.facebook.com/bugs/395435640603415/