How do I create a custom Facebook share dialog box passing parameters? - facebook

I've seen a few posts here and around the interwebs explaining how to create a custom Facebook share dialog box for my website.
But I have found a few differences from the average situation to mine:
1- I want a custom area in my page to open and close when people click on a button (the share button)
2- I want share the content in a lightbox, not the page's content. For example, we have a list of products, each product will open in a lightbox. I want to share information about this product that is now open in a lightbox
I saw someone talking about the Javascript SDK, but it the installation guide it tells me to set the APP_ID, but don't have any App create for my website. Do I have to create one to use this SDK?
I also found this pattern
http://www.facebook.com/sharer.php?s=100&p[title]=a title&p[summary]=a description &p[url]=http://www.linkhere.com&p[images][0]=http://www.linkhere.com/image.jpg
If I copy and paste this to the address bar it works. but the user is redirected to a new page. that is not nice.
and I tried this with the pattern said above, but couldnt make it work
<a href="#"
onclick="
window.open(
'https://www.facebook.com/sharer/sharer.php?u='+encodeURIComponent(location.href),
'facebook-share-dialog',
'width=626,height=436');
return false;">
Share on Facebook
</a>
It doesn't accept the parameters I am trying to pass.
Do any of you know how to solve this problem? Will it be by changing the 'content' of metatags? What are your solutions?
#EDIT
Just answered with the solution I used
#EDIT 2
Updated with v2.2

This is an old question, but here is what works for me:
window.open(
'http://www.facebook.com/sharer.php?s=100&p[title]=a title&p[summary]=a description &p[url]=http://www.linkhere.com&p[images][0]=http://www.linkhere.com/image.jpg',
'facebook-share-dialog',
'width=626,height=436'
);
basically all I had to do was remove the /sharer/ from the facebook url. I am guessing it is a typo in the documentation.

This is what I did to solve the problem in my website:
First I added the tools Facebook provides me:
<script>
window.fbAsyncInit = function() {
// init the FB JS SDK
FB.init({
appId : 'YOUR APP ID GOES HERE', // App ID from the app dashboard
status : true, // Check Facebook Login status
xfbml : true // Look for social plugins on the page
});
// channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel file for x-domain comms
// Additional initialization code such as adding Event Listeners goes here
};
// 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/en_US/all.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
Then I created a function shareOnFacebook that opens the sharer and the button that will call this function
var globalFacebookShareObject = {} //will be set when I click on a product, on a picture, on a comment or post, or whatever I want to share on Facebook or when I load the page
function shareOnFacebook(){
FB.ui({
method: 'feed',
name: globalFacebookShareObject.name,
link: globalFacebookShareObject.link,
caption: 'R$ '+globalFacebookShareObject.caption,
picture: globalFacebookShareObject.picture,
description: globalFacebookShareObject.description
}, function(response) {
if(response && response.post_id){}
else{}
});
}
<button onclick='shareOnFacebook()'>Share it!</button>
#edit at 10/01/2015
Still working for v2.2
Refere to Feed method to understand how to create the share dialog (I am using the feed method that seems to be more flexible)
And to Quickstart
To understand how to import the Javascript SDK to your page

December 2017: Custom object sharing is being deprecated. Your best bet from now on is to create another page for that object and have the respective meta tags facebook looks for in there. More info here: developers.facebook.com/docs/sharing/reference/share-dialog

Related

Facebook like button https issue: protocol mismatch from http and https

I'm running an error very similar with this one: Facebook Login API HTTPS Issue.
I have a website use facebook authentication, the Facebook login is no problem. But the Facebook like-button get troubled when been clicked (test fail on Chrome, Safari, Firefox, in OSX), the error message is:
Blocked a frame with origin "https://www.facebook.com" from accessing a
frame with origin "http://static.ak.facebook.com". The frame requesting
access has a protocol of "https", the frame being accessed has a protocol
of "http". Protocols must match.
I've searched all over and find no solutions.
It seems like that when the like-button is clicked, it pop out a frame from https://facebook.com callback and trying to request http://static.ak.facebook.com thus cause protocol mismatch?!
Here's what I put right after <body> tag
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
// init the FB JS SDK
FB.init({
appId : 'appid', // App ID from the app dashboard
channelUrl : '//mydomain/channel.html', // Channel file for x-domain comms
status : true, // Check Facebook Login status
xfbml : true // Look for social plugins on the page
});
// Additional initialization code such as adding Event Listeners goes here
};
// 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/zh_TW/all.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
and the channel file at http://mydomain/channel
<script src="//connect.facebook.net/zh_TW/all.js"></script>
and here's how I use the like-button
<div class="fb-like" data-href=url data-send="true" data-width="450"
data-show-faces="true"></div>
Really needs help, please!
In your first script tag you can tell Facebook explicitly to use HTTPS...
Add the line:
FB._https = (window.location.protocol == "https:");
Add it before the FB.init function call, just below or in place of the comment:
// init the FB JS SDK
This will ensure that Facebook's servers load any required libraries their end over https.
Hope this helps.
Reviewing the js code on Facebook there are multiple urls containing hard coded strings for
http://static .../rsrc.php
it's possible those are the files triggering the error.
This may be something Facebook needs to update.
On a side note, it may be possible to download that js file from Facebook and store it on your server and remove the hard coded http string. I would test this further but I am on my phone at the moment.

Facebook Share Feed Dialog only working for Admins

After creating a Facebook App, leaving it in Sandbox and attempting to setup a Share button using the Feed Dialog, it seems only FB accounts I've added as Admins are able to use the Share button - all other non-Admins are able to see the Feed Dialog popup, but are then seeing "An error occurred, please try again.".
I thought it was a browser specific issue but seems to be dependant on your FB accounts relationship with the App. A person who is a non-Admin has been testing the App and is unable to Share at all.
I am using Wordpress as a CMS backend for this App. As far as I can tell the App ID and App URL are all correct, the only difference is that being on my dev environment it will be moved to a clients production FB page once this is all working.
I find it very bizarre that it works excellent provided you are an Admin of the page. Could it be possible this is simply a Sandbox thing?
I also checked that trying to use the Share button when logged in as a Page as opposed to yourself was the issue, and it is not (if anyone was wondering).
I believe I am using the SDK/API and Feed Dialog correctly, but my code for reference:
header.php
<div id="fb-root"></div>
<script src="https://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript">
// Called when FB SDK has been loaded
window.fbAsyncInit = function () {
// Auto resize FB Canvas
FB.Canvas.setSize({height:600});
setTimeout("FB.Canvas.setAutoGrow()",500);
};
// Load the FB SDK Asynchronously
(function (d) {
var js, id = 'facebook-jssdk'; if (d.getElementById(id)) { return; }
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
d.getElementsByTagName('head')[0].appendChild(js);
} (document));
</script>
footer.php
<script type="text/javascript">
FB.init({
appId: '515010801895800',
status: true,
cookie: true,
xfbml: true
});
function postToFeed() {
var obj = {
method: 'feed',
display: 'popup',
picture: '<?php echo get_template_directory_uri(); ?>/images/app/app-icon-75.png',
name: 'Suncorp Brighter Futures Heroes',
caption: '',
link: 'https://www.facebook.com/aaronlepikdev/app_515010801895800',
description: 'Suncorp Brighter Futures Heroes is a place where our people come together to share their stories, raise money, volunteer and apply for grants for causes close to their hearts.',
actions: {name: 'Suncorp Brighter Futures Heroes', link: 'https://www.facebook.com/aaronlepikdev/app_515010801895800'}
};
function callback(response) {
document.getElementById('msg').innerHTML = "Post ID: " + response['post_id'];
}
FB.ui(obj, callback);
}
</script>
Any help at all is much appreciated.
It seems I indeed may have answered my own question - I have removed Sandbox and it seems to be working. I did stumble across this though: Sandbox Mode - Please note that when your app is in Sandbox Mode, you cannot call any API calls on behalf of users who cannot see your app.

Application Error while loading the facebook SDK

Code on my web page:
<body class="popup">
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
// init the FB JS SDK
FB.init({
appId : '476947702378530', // App ID from the app dashboard
channelUrl : '//www.majorforms.com/fb_channel.php?_lang_id=1',// Channel file for x-domain comms
status : true, // Check Facebook Login status
xfbml : true // Look for social plugins on the page
});
// Additional initialization code such as adding Event Listeners goes here
};
// 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/en/all.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
After loading that page with a browser, I get this error in firebug console:
Application Error: There was a problem getting data for the application you requested. The application may not be valid, or there may be a temporary glitch. Please try again later.
I don't really understand. I do not have a real app, I just used the identifier of a facebook (company) account. I do not want to create a new facebook app, I just want to use credentials of a specific facebook account. How do I do that?
I'm not hundred percent sure but you need to create an app to use the facebook sdk because in the FB.init method it obviously asks for the Facebook App Id.
Creating a Facebook App doesn't necessarily mean that you actually have an app on facebook, the app configuration screen on Facebook Developers page has a specific section for "Website With Facebook Login" , so I think thats the way you should go.
I found I was getting this error when testing my application because I was signed into Facebook as a test account user. When I tried to access the live environment it would generate that error as it was already authenticated to the developer user. The error message is kind of generic and doesn't really spell out the issue in black and white.

Fan Gate and Liking an App

I'm trying to figure out how to do something, and I've tried searching Stack Overflow, but I'm honestly not 100% sure what I'm looking for, so I'm not coming up with anything great.
Here is what I need to do:
We have an app, and you're supposed to like the page to see the app. Great that works.
The client wants us to put a facebook share button on the site, so that when you're finished using the app, you can click the "Share" button and post something to your wall saying, "I just used XXX and you should too!" or whatever. The problem is that the Share button is deprecated. Everything on the facebook developer site says I need to use the like button, but, since you've already LIKED the page to get in, you're going to see that you've already liked the page and not be allowed to click it again to share content on your news feed.
It seems like I'm missing something here. Can you have a like button for a page AND a specific app inside that fan page? It doesn't seem like I can do that. Is what I'm asking even possible?
Yes, you can use the Javascript SDK to post to the wall... this uses jQuery to detect a click on an id which is the share button so make sure you add this before any facebook javascript:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
You will also need to load the FB Javascript SDK if you haven't already:
<script>
window.fbAsyncInit = function () {
FB.init({
appId: 'INSERT APP ID',
status: true, // check login status
cookie: true, // enable cookies to allow the server to access the session
oauth: true // enable OAuth 2.0
});
};
// Load the SDK Asynchronously
(function (d) {
var js, id = 'facebook-jssdk',
ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {
return;
}
js = d.createElement('script');
js.id = id;
js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
</script>
Then add the following code:
$("#shareclick").click(function () {
FB.ui({
method: 'feed',
name: 'The Post Title',
caption: 'skruffymedia testing caption post',
description: (
'Testing the description of the skruffymedia app post!'),
link: 'http://www.skruffymedia.com',
picture: 'http://www.skruffymedia.com/facebook.jpg'
}, function (response) {
if (response && response.post_id) {
alert('posted');
} else {
alert('not shared');
}
});
}); //End Share Click
I'll be including this answer on the next step of my blog
http://www.skruffymedia.com/blog/creating-a-facebook-like-gate-competition/
It is now against Facebook's policies to gate an app or content within an app based on if someone has liked your page.
See the announcement here: https://developers.facebook.com/blog/post/2014/08/07/Graph-API-v2.1/

Do I need an appId for a XFBML version of the Facebook Like button?

I'm really confused.
I'm trying to use some of the very simple Facebook plugins on my site, specifically the basic "Like" button.
I already know how to use the limited version with an iFrame.
However, now I'm trying to figure out the XFBML method and the online documentation seems to make a lot of assumptions about what you already know and really short on working examples. For example, they show you how to call the JavaScript Init and give you the single line of HTML code for element fb:like... but I could not see any examples of how to show/hide faces, set the default font, etc. like in the iFrame code.
I've since figured out that you need to add them as attributes to the element but that was thanks to StackOverlfow and no thanks to the Facebook documentation which simply takes you in circles.
<fb:like href="http://mydomain.com" show_faces="true" action="recommend" colorscheme="light" width="400" height="35" />
Ok, so now when using the XFBML code, it's height should expand/contract automatically depending on being logged in or not I assume.
I do not know if I'm supposed to initially set the height to "80" or if that happens automatically.
And I have no idea what I'm supposed to use for 'your app id' in the Init script. There is no App... just a Facebook Company Page... so why would I need an App Id when I'm just putting a Like button on a website?
<script>
window.fbAsyncInit = function() {
FB.init({
appId: 'your app id',
status: true,
cookie: true,
xfbml: true
});
};
Any enlightenment on these issues would be appreciated.
Thank-you!
Answering my own question, after pulling out all my hair...
http://developers.facebook.com/docs/guides/web/
"The JavaScript SDK requires that you register your website with Facebook to get an App ID (or appId). The appId is a unique identifier for your site that ensures that we have the right level of security in place between the user and your website. The following example shows how to load the JavaScript SDK once you have your appId:"
http://developers.facebook.com/setup/
The title of that page/form is Create an App. I still don't understand why they don't use more generic terminology. I'm not "creating an app" and I don't consider my website to be an app.
I don't have an appId but just got this code from the like code generator and it seems to work in my local environment (which uses localhost:8000 yet still has 136 likes). When I press the buttons I get the facebook login popup as expected.
<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/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<fb:like href="url here (optional)" send="true" width="450" show_faces="true"></fb:like>
you can do...
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://ogp.me/ns/fb#" >
...
window.fbAsyncInit = function() {
FB.init({
// appId : 'none', // App ID
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
FB.Event.subscribe('edge.create', function(href, widget) {
var ss=href;
if (ss.match(/myWebSite/i)) {
alert('You just liked me');
}
});
};
(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_GB/all.js#xfbml=1";
//js.src = "https://connect.facebook.net/en_GB/all.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
...
<fb:like ref="core" class="fb-like" data-href="http://www.mySite.com"
data-send="false" data-layout="button_count"
data-width="50" data-show-faces="false" data-colorscheme="dark"></fb:like>
the above works, but Like yourself, and and note how Facebook divides up real Likes with Facebook registered sites (giving a spash page, #followers, #talking, etc), from Liked urls it does not know. (the site does, at least, get a increasing counter). It kinda defeats the purpose of being Liked at all. I might be wrong, but I think it does not even post messages about the latter.
this is too bad, because I am running out of phone numbers for Facebook :)
Then, for me at least, there is a bigger problem. If you are going to reward someone for Liking you, you can't really be sure they did, because this is js. If you try to js redirect to a reward page, a user can just cut paste that url. You could set a rnd session var, pass it to js, and redirect js to a php page with it, but a user could figure that out too.
You cant seem to (or commented out appId) ...
require 'face_sdk/face/src/facebook.php';
$facebook = new Facebook(array(
'appId' => '',
'secret' => '',
));
$user = $facebook->getUser();
so there seems no direct php way. I was playing with passing the iframed Like button url to php, parsing it with simple_html_dom.php, and finding which of the two main divs has the class 'hidden_elem'. But in the end, it just isn't worth it because Facebook will treat you like a second class citizen.