I need to share a result of a quiz on facebook containing a custom title, picture and description. Wich worked perfect before update to version 2.9 on April 18.
But it isn't working with Version 2.9. So am I missing out something there? Or does Facebook don't want us to share custom Facebook Feeds of our websites in 2017?
For my Setup for a test facebook feed I coded strictly with Facebook Developers Documentation.
Facebook Changelog v2.9 says parameter picture, name, description and caption are not supported anymore.
My fb api init:
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '*APP-ID*',
xfbml : true,
version : 'v2.9'
});
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'));
</script>
My fb-share call:
<script>
$(document).ready(function() {
$('#fbButton').click(function() {
FB.ui({
method: 'feed',
link: '*URL*',
caption: 'An example caption',
picture: '*URL*/img/content4.jpg',
name: 'An example name',
description: 'An example description'
}, function(response){});
});
});
</script>
As a result I get a facebook feed without any picture or description. The only thing is a title (the title of page defined in the <head> with <title>).
Obviously, the usual procedure isn't working anymore.
So is there any way to share custom texts with custom pictures with the new facebook API version 2.9?
Is there any workaround? Or is it just impossible with v2.9, because facebook doesn't want us to share custom feeds like this? (for whatever reason..)
(and no, I cannot use og:tags)
I just tried to use open graph method instead of feed and override og properties, see below:
FB.ui({
method: 'share_open_graph',
action_type: 'og.shares',
action_properties: JSON.stringify({
object : {
'og:url': 'http://astahdziq.in/', // your url to share
'og:title': 'Here my custom title',
'og:description': 'here custom description',
'og:image': 'http://apps.investis.com/Dharmendra/fbPOC/south.jpg'
}
})
},
// callback
function(response) {
if (response && !response.error_message) {
// then get post content
alert('successfully posted. Status id : '+response.post_id);
} else {
alert('Something went error.');
}
});
this worked for me as I am able to post custom image with title and description.
Just encounter with this problem myself.
After some research I found this solution:
www.facebook.com/sharer.php?caption=[caption]&description=[description]&u=[website]&picture=[image-url]
you can use JavaScript window.open to simulate the behavior like this:
Here is a working example:
https://jsfiddle.net/ovidiu_turean/mhuexvjL/
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
window.open('https://www.facebook.com/sharer.php?title=ThisIsAtitle&description=ThisIsAdesc&u=https://www.google.ro&picture=https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-526588.jpg', 'Share', 'scrollbars=yes,resizable=yes,toolbar=no,menubar=no,scrollbars=no,location=no,directories=no,width=300, height=300, top=300, left=300' );
}
</script>
https://developers.facebook.com/docs/apps/changelog#v2_9
Custom parameters are not possible anymore, shared URLs only take their data from the Open Graph Tags on the website, Open Graph Tags need to be static for each URL. Else, you could share ANY URL with ANY title/description, which could be misleading.
Related
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 have this code ->
window.fbAsyncInit = function () {
FB.init({
appId: 'AppId',
xfbml: true,
version: 'v2.1'
});
};
(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'));
EDIT: The next code part is being called upon after document is ready and an element is clicked on ->
FB.ui({
method: 'share_open_graph',
action_type: 'og.likes',
action_properties: JSON.stringify({
"og:url": url,
"og:title": settings.pageName,
"og:description": description
})
}, function (response) { });
and get an error where it says I have to define an object. All I want to do is to decide myself what to set as title, description, url and image. Without making a lot of configuration in the app-settings page. Is this possible?
As I understand I have to create a story object of some sort but that seems a bit overkill for my siuation.
Thanks!
EDIT: Error message added, english translation after.
Action Requires At Least One Reference: Åtgärden som du försöker publicera är inte giltig eftersom det inte finns något referensobjekt angivet. Åtminstone en av följande egenskaper måste specificeras: object.
Action Requires At Least One Reference: The action you are trying to publish is invalid because there is no reference object set. At least one of the following must be specified: Object.
Error code is 1611072.
the JavaScript SDK is not initialized when you try to use FB.ui. You need to call FB.ui after FB.init. But i suggest calling FB.ui only directly on user interaction (mouse click), else it may get blocked in the browser.
You have to think asynchronous.
About the parameters: According to the docs, you can´t dynamically set title and description, there is only the URL and i assume it will take the Open Graph data from that URL:
FB.ui({
method: 'share_open_graph',
action_type: 'og.likes',
action_properties: JSON.stringify({
object:'https://developers.facebook.com/docs/',
})
}, function(response){});
Source: https://developers.facebook.com/docs/sharing/reference/share-dialog
And yes, you would need to create an "Action Type" in the Developer Settings (Open Graph > Action Types) for that, and you would need to go through a review process with og.likes. So if you just want to share something, this would be the easiest way:
FB.ui({
method: 'share',
href: 'https://developers.facebook.com/docs/',
}, function(response){});
But even with that solution, you can´t define custom title/description, it will always take the Open Graph tags.
I was just about to test something so I made 2 buttons with 2 links:
1.) using the facebook sharer.php functionality which works fine
2.) triggering the send ui using the URL redirect I took from the FB developers homepage:
http://www.facebook.com/dialog/send?app_id=123050457758183&link=http://www.nytimes.com/2011/06/15/arts/people-argue-just-to-win-scholars-assert.html&redirect_uri=https://www.bancsabadell.com/cs/Satellite/SabAtl/
I replaced the app id and both links with my own. My app is set up so it point to the links, since I know I had it running once before, where that was the problem.
Now as said the share button works perfectly fine but when I click one the other button I just see a white screen. The URL is in the address bar. Firebug shows no console errors and an empty head and body tag.
Any suggestions?
Thanks,
Gerd
UPDATE: I also implemented the regular javascript ui.send method. The window popsup. I am connected with facebook as the ssl seal shows but again nothing but white.
As far as the URL is concerned the URL is fine it is just a matter of time until Facebook allows to share a URL it has not indexed before. When I changed the link to my main domain instead of subfolder it worked.
As far as the JS SDK is concerned I forgot to check whether the user is logged in or not so this is how it works:
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'YourId',
xfbml : true,
version : 'v2.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 = "//connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<button onclick="sendFb()">Recommend JS</button>
<script type="text/javascript">
function sendFb(){
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
FB.ui({
method: 'send',
link: 'yourlink.com',
});
}
else {
FB.login(function(response) {
if (response.authResponse) {
FB.ui({
method: 'send',
link: 'yourlink.com',
});
}
else
alert('Not Authenticated!');
});
}
});
}
</script>
</body>
</html>
I am currently writing a website and I need some help about facebook integration.
I need a function (PHP or JS, both will help) that can check if a given user shared my website,
and I couldn’t find out how to write one.
Could you please point me at the right direction?
First you have to load the Facebook SDK right after your tag:
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : "YOUR APP ID",
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : false, // parse XFBML
perms : 'read_stream',
access_token : "USER ACCESS TOkEN",
frictionlessRequests : true
});
};
// Load the SDK Asynchronously
(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/pt_BR/all.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
Then you can use the callback function to do what you want:
<script type="text/javascript">
function shareOnFacebook() {
FB.ui(
{
method : 'feed',
display : 'iframe',
name : 'name',
link : 'http://www.linktoshare.com',
picture : 'http://www.linktoshare.com/images/imagethumbnail.png',
caption : 'txt caption',
description : 'txt description',
access_token : 'user access token'
},
function(response) {
if (response && response.post_id) {
// HERE YOU CAN DO WHAT YOU NEED
alert('OK! User has published on Facebook.');
} else {
//alert('Post was not published.');
}
}
);
}
</script>
Then you should use it like this:
Share on facebook
Using the JavaScript SDK, FB.ui() and the feed dialog, you can prompt your users to share a URL on Facebook. This dialog provides a callback function so that you can tell if the post was made successfully.
Code sample lifted from the above link...
var obj = {
method: 'feed',
link: 'https://developers.facebook.com/docs/reference/dialogs/',
picture: 'http://fbrell.com/f8.jpg',
name: 'Facebook Dialogs',
caption: 'Reference Documentation',
description: 'Using Dialogs to interact with users.'
};
function callback(response) {
document.getElementById('msg').innerHTML = "Post ID: " + response['post_id'];
}
FB.ui(obj, callback);
This is the easiest way to accomplish what you need.
It will not, however, allow you to test if someone shared your website's URL outside of your feed dialog.
A more complex alternative not requiring the dialog callback could be accomplished by utilizing the read_stream permission. Once you have that permission, you can scan the users past posts to see if he has ever shared your website on his wall...
Keep in mind that this will not work if the user shared your website on some one else's wall or on a page...
I have implemented facebook and twitter share to my website. The users are redirected to the following URLs when they click on the twitter or facebook share button.
http://www.facebook.com/sharer.php?u='+encodeURIComponent(location)+'&t='+encodeURIComponent(text)
http://twitter.com/share?url='+location+'&text='+text
I want to store the username and tweet link if possible in my database when someone the content through twitter and I want to store facebook profile url and name when someone shares it through facebook. Is it possible to retrive that data when someone has successfully completed the share process?
The facebook javascript API allows you to share and gives you a callback
http://developers.facebook.com/docs/reference/javascript/FB.ui/
FB.ui(
{
method: 'feed',
name: 'Facebook Dialogs',
link: 'http://developers.facebook.com/docs/reference/dialogs/',
picture: 'http://fbrell.com/f8.jpg',
caption: 'Reference Documentation',
description: 'Dialogs provide a simple, consistent interface for applications to interface with users.',
message: 'Facebook Dialogs are easy!'
},
function(response) {
if (response && response.post_id) {
alert('Post was published.');
} else {
alert('Post was not published.');
}
}
);
To use this you need to have set up a facebook application and put the following code directly after the opening body tag
<div id="fb-root">
</div>
<script src="http://connect.facebook.net/en_US/all.js" type="text/javascript"></script>
<script type="text/javascript">
FB.init({
appId: YOUR_API_KEY,
status: true,
cookie: true,
xfbml: true
});
FB.Canvas.setAutoResize();
</script>
If you ask for basic permissions, you could then get the users facebook id and use this to store which users had shared.
For Twitter call with callback, that is how I did it in Javascript:
// Include the Twitter Library
window.twttr = (function (d,s,id) {
var t, js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return; js=d.createElement(s); js.id=id;
js.src="https://platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js, fjs);
return window.twttr || (t = { _e: [], ready: function(f){ t._e.push(f) } });
}(document, "script", "twitter-wjs"));
// On ready, register the callback...
twttr.ready(function (twttr) {
twttr.events.bind('tweet', function (event) {
// your callback action here...
});
});
The twitter link is like this:
Share on Twitter
Reference: https://dev.twitter.com/docs/intents/events
Once you open the FB share window, is up to the user to publish the content or not. There is no callback function and it's not possible to know if he has completed the proccess.
You may want to implement a FB connect and create your own form to publish into the user's wall once he has filled the fields (and also you have the option to save them in your DB).
I don't know if Twitter offers the feature that you are requesting, but I would go for the same solution as above.
For Facebook, there is an updated Share Dialog with callback (Source: https://developers.facebook.com/docs/sharing/reference/share-dialog)
https://www.facebook.com/dialog/share?
app_id=145634995501895
&display=popup
&href=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2F
&redirect_uri=https%3A%2F%2Fdevelopers.facebook.com%2Ftools%2Fexplorer
You must provide an app_id, and the redirect_uri must be whitelisted in your App domains.