When pasting a link from a custom tab on the wall, i noticed that the description is taken from the info tab instead of the custom tab. I would like to change the description to something that relates to the custom tab. Does anybody know how to do this?
The desciption under the posted link is not from this source: http://www.facebook.com/commerzbankcareer?sk=app_265085363536247 but form this http://www.facebook.com/commerzbankcareer?sk=info
i tried to add the FB.ui feed dialog in the Facebook SDK in the PHP file of the custom tab, however this did not work:
<div id="fb-root"></div> <script type="text/javascript"> window.fbAsyncInit = function() { FB.init({appId: '265085363536247', status: true, cookie: true, xfbml: true}); window.setTimeout(function() { FB.Canvas.setAutoResize(); }, 250); }; (function() { var e = document.createElement('script'); e.async = true; e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js'; document.getElementById('fb-root').appendChild(e); }());function postToFeed() {
// calling the API ...
var obj = {
method: 'feed',
link: 'https://www.facebook.com/commerzbankcareer?sk=app_265085363536247',
picture: '',
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);
}
Related
I've been working on this for a few days and I can't find what's missing. Does anyone have any advice?
It seems like its missing something but I have no idea what it would be.
I'm not receiving any errors. The share button works (to share to your own wall) but the invites don't appear to do anything at all.
I've replaced my appid with X's.
<html>
<head>
<title>App Name</title>
</head>
<body>
<div id="fb-root"></div>
<script>
var publish = {
method: 'stream.publish',
display: 'popup', // force popup mode
attachment: {
name: 'Connect',
caption: 'The Facebook Connect JavaScript SDK',
description: (
'A small JavaScript library that allows you to harness ' +
'the power of Facebook, bringing the user\'s identity, ' +
'social graph and distribution power to your site.'
),
href: 'http://app-address.com/'
}
};
function publish1() {
FB.ui(publish);//, Log.info.bind('stream.publish callback'));
}
</script>
<button class="btn" id="send-to-many">Send to Many</button>
<button onclick="publish1()">Click</button>
</body>
<script>
window.fbAsyncInit = function() {
console.log('Initing facebook...');
FB.init({
appId: 'xxxxxxxxxxxxxxx',
status: true,
frictionlessRequests: true,
cookie: true,
xfbml: true
});
console.log('... done');
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
document.getElementById('send-to-many').onclick = function() {
FB.ui({
method: 'apprequests',
message: 'This is a test of the App-Name invite.'
}, requestCallback);
function requestCallback(response)
{
if(response && response.request_ids) {
// Here, requests have been sent, facebook gives you the ids of all requests
//console.log(response);
location.href='home';
} else {
// No requests sent, you can do what you want (like...nothing, and stay on the page).
}
}
}
</script>
</html>
Your code is looking fine. There must be a error in your facebook app setting. For invite function you have to give 'Canvas URL' & 'Secure Canvas URL' in your facebook app setting.
You can also try with my codes below. This is a very simple code to implement.
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId:'APP_ID',
cookie:true,
status:true,
xfbml:true
});
function FacebookInviteFriends()
{
FB.ui({
method: 'apprequests',
message: 'Your Message diaolog'
});
}
</script>
//HTML Code
<div id="fb-root"></div>
<a href='#' onclick="FacebookInviteFriends();">
Facebook Invite Friends Link
</a>
Here you have to write one more javascript code for breaking the iframe. So that the link 'll not open inside the facebook. You also have to write this same js code in your home page or any other page of your website, that you want your app to redirect.
<script type='text/javascript'>
if (top.location!= self.location)
{
top.location = self.location
}
</script>
For any further doubt feel free to write here.
I had a similar problem and found that you have to click the DONE button. This is a form and the DONE button submits the form.
I am trying to make a hidden download box div appear after a visitor shares a link.I've tried here something http://jsfiddle.net/trefu/qNDJB/4/ but is not working. I don't know how to define FB so it can be called. Can someone help me?
<div id='fb-root'></div>
<div id="download_box" style="display: none;">
Download Box (whatever that means) goes here
</div>
FB.init({appId: "437410746335629", status: true, cookie: true});
function postToFeed() {
// calling the API ...
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) {
if (response && response.post_id) {
document.getElementById('download_box').style.display = 'block';
} else {
alert('You must share your post before you can download.');
}
}
FB.ui(obj, callback);
}
on having a look at wowvi.blogspot.ro:
var cc = '<iframe allowfullscreen='true' frameborder='0' height='410' src='embed.php?id=http://www.youtube.com/watch?v=Zcg8xscHkXM' width='640'></iframe>';
Change this to
var cc = "<iframe allowfullscreen='true' frameborder='0' height='410' src='embed.php?id=http://www.youtube.com/watch?v=Zcg8xscHkXM' width='640'></iframe>";
You are using single quotes inside single quotes..
I am editing this question so that it makes more sense than what I originally wrote.
I am implementing the code below in order to add a Facebook "Share" button to my website. My problem is that this script calls for actual values for 'link', 'picture', 'name', 'caption', and 'description' directly in the script.
How can I change this code so that it pulls this information from my website automatically. For example, I need it to pull the URL from the current and assign it to 'link'. Another example: instead of providing the URL for the picture, I want to point the code to a certain class.
<script>
FB.init({appId: "YOUR_APP_ID", status: true, cookie: true});
function postToFeed() {
// calling the API ...
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);
}
</script>
This is from http://developers.facebook.com/docs/reference/dialogs/feed/
window.location.pathname will only return the path portion of a URL, you also need to add your domain also. window.location.href will return this. Pretty easy to change your code to do this:
<script>
FB.init({appId: "YOUR_APP_ID", status: true, cookie: true});
function postToFeed() {
// calling the API ...
var obj = {
method: 'feed',
link: window.location.href,
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);
}
</script>
I want my users to be able to share dynamic content on their Facebook news feed. There's no other Facebook integration (e.g. Facebook login or other server-side integration) so I want this to be as light as possible.
This is where I got, but how does it looks like? It seems to work, but I'm not sure if I've thought of everything.
<button id="fb-publish">Share to Facebook</button>
<script type="text/javascript">
(function() {
FB.init({
appId: MY_FACEBOOK_APP_ID, cookie: true, status: true, xfbml: true, oauth: true
});
var fbAuth = null;
var fbShare = function() {
FB.ui({
method: "feed",
display: "iframe",
link: "http://example.com/",
caption: "Example.com",
description: "Here is the text I want to share.",
picture: "http://example.com/image.png"
});
};
$("#fb-publish").click(function() {
if (!fbAuth) {
FB.login(function(response) {
if (response.authResponse) {
fbAuth = response.authResponse;
fbShare();
}
}, {scope: 'publish_stream'});
} else {
fbShare();
}
});
})();
</script>
Also, if I want to attach an image from a URL (bigger than just the 50x50 pixel image defined in the picture field), how can I do that with just JavaScript? Or can I?
I decided to leave out authResponse caching and call FB.login() every time. It briefly opens a popup window, but at least there's no case where user has logged out in another tab or window and the cached authResponse has gone stale. The briefly flashing popup window is not that big of an issue, since I don't think users will share the same page multiple times, anyway.
Here's my final code which is even simpler than the original one:
<button id="fb-publish">Share to Facebook</button>
<script type="text/javascript">
(function() {
FB.init({
appId: MY_FACEBOOK_APP_ID, cookie: true, status: true, xfbml: true, oauth: true
});
var fbShare = function() {
FB.ui({
method: "feed",
display: "iframe",
link: "http://example.com/",
caption: "Example.com",
description: "Here is the text I want to share.",
picture: "http://example.com/image.png"
});
};
$("#fb-publish").click(function() {
FB.login(function(response) {
if (response.authResponse) {
fbShare();
}
}, {scope: 'publish_stream'});
});
})();
</script>
And as mentioned by Tolga Arican, if it's ok to you that the sharing dialog opens in a popup window, you don't even need to call FB.login() and ask for the publish_stream permission; just call FB.ui({ method: "feed" }) directly and you're good to go:
<button id="fb-publish">Share to Facebook</button>
<script type="text/javascript">
(function() {
FB.init({
appId: MY_FACEBOOK_APP_ID, cookie: true, status: true, xfbml: true, oauth: true
});
$("#fb-publish").click(function() {
FB.ui({
method: "feed",
link: "http://example.com/",
caption: "Example.com",
description: "Here is the text I want to share.",
picture: "http://example.com/image.png"
});
});
})();
</script>
1) Make sure appId defined.
2) In FB.login , response.authResponse may not work. I'm not pretty sure but just throw console.log, it may response.session
3) in method:feed , you can put larger images for picture, but it wil downsize. There is no way to put big images as a feed thumbnail. It is just a thumb of a feed..
For the lightest method:feed js, you don't need display:iframe i guess.
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.' }, function(response) {} });
This bit of documentation has not been as helpful as you might think. I understand that I have to hang a display parameter on the end of the URL, but I'm not sure how to invoke a login window like that. Here's what I have now:
<script src="http://connect.facebook.net/en_US/all.js" type="text/javascript"></script>
<script type="text/javascript">
// initialize the library with the API key
FB.init({ apiKey: '{{ facebook_api_key }}', status: true, cookie: true, xfbml: true});
function facebookConnect(form){
function handleResponse(response){
form.submit();
}
FB.login(handleResponse,{perms:'publish_stream,user_about_me,status_update,email,offline_access'});
}
</script>
This works fine in a desktop browser, but I can't figure out how to get the 'touch' or 'wap' modes for dialogs.
I'm using django-socialregistration if that's of any relevance.
Logging into Facebook using a touch dialog used to work a while ago, but that same old code doesn't seem to work anymore.
However,
You can redirect a user to the login URL, and facebook will do the rest depending on the platform. The following snippet will login the user, and redirect back to your current page if set.
Update: You also need to edit your 'Basic App Settings' > 'Select how your app integrates with Facebook' and check 'Mobile Web' for this to work.
window.location = "http://www.facebook.com/dialog/oauth/"
+ "?" + "scope=" + "publish_stream,user_about_me,status_update,email,offline_access"
+ "&" + "client_id=" + YOUR_APP_ID_GOES_HERE
+ "&" + "redirect_uri=" + YOUR_CURRENT_PAGE_URL
+ "&" + "response_type=token";
The display:touch property can still be used in FB.ui() as follow (for instance, posting on a wall):
// Make sure you call FB.init() before FB.ui()
FB.ui({
app_id: YOUR_APP_ID_GOES_HERE,
method: 'feed',
name: "post title",
link: "http://link-to-what-you-are-sharing/",
picture: "your_image.jpg",
description: "post description",
display: 'touch'
},
function callback(r){
if ( (r && r.id) || (r && r.post_id) ){ alert('posted');}
else{ alert('failed'); }
});
Why are you wrapping the response handler inside a function?
Do something like :
function handleStatusChange(response) {
if (response.authResponse) {
console.log(response);
}
}
window.fbAsyncInit = function() {
FB.init({ appId: 'YOUR_APP_ID',
status: true,
cookie: true,
xfbml: true,
oauth: true
});
FB.Event.subscribe('auth.statusChange', handleStatusChange);
};
Taken from https://developers.facebook.com/docs/guides/mobile/web/