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.
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 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.
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/
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/
In the parent page, I have a share button to call FB.ui(). I click the button and FB share modal popup as a separate window, then I close my parent page. Go back to my FB share window and share the content to fb wall. After I click the share button, the window becomes a white page(the url is https://www.facebook.com/dialog/feed). And the callback of FB.ui() is not called.
Do we have a solution? at least I want to have the callback work.
I tried to add "redirect_uri" as it is proposed in this post FB.ui feed not giving a callback, but it doesn't change anything.
/* FB init */
window.fbAsyncInit = function() {
FB.init({
appId : '',
status : false,
xfbml : false,
});
};
(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";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
shareButton.on('click', function(e) {
submitPost();
});
/* the function for share*/
function submitPost() {
FB.ui({
method: 'feed',
name: '',
link: '',
picture: '',
caption: '',
description: '',
}, function(response) {
if (response && response.post_id) {
// do something
}
});
}
Found a solution: Use an old version of FB Javascript SDK (2012), and add "redirect_uri". FB.ui feed not giving a callback
FB.ui({
method: 'feed',
name: '',
link: '',
picture: '',
caption: '',
description: '',
redirect_uri:'http://.../self.close.html'
});