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>
Related
Using a "Poll" app on Facebook, it would post something like this to my facebook Page (Kid Task):
How can I do this using Facebook javascript SDK? As best as I can tell, this allows it https://developers.facebook.com/docs/guides/attachments/ but this says "for REST API" and that is deprecated right?
Code i've tried:
FB.api(
'https://graph.facebook.com/kidtask/feed/',
'post',
{
message: 'test question',
actions: { name: 'Vote Now', link: 'http://test.com' },
properties: { text: "test answer 1", href: "http://test.com" }
},
function(response) {
if (!response) {
alert('Error occurred.');
} else if (response.error) {
document.getElementById('result').innerHTML =
'Error: ' + response.error.message;
} else {
document.getElementById('result').innerHTML =
'<a href=\"https://www.facebook.com/kidtask/' +
response.id + '\">' +
'Story created. ID is ' +
response.id + '</a>';
}
}
);
This posts without errors, but the properties are ignored.
Figured it out finally, although i'm not sure what it was exactly. My guess is, I was trying to post as a text post and not a link post.
FB.api(
'/kidtask/feed/',
'post',
{
name: 'whatever',
link: 'http://url',
actions: { name: 'Vote Now', link: 'http://url' },
description:"\u003Cbr/\u003E",
picture:"http://imageurl",
caption:"\u003Cbr/\u003E",
properties: [{"text":"test 1","href":"http://url"},{"text":"test 2","href":"http://url"},{"text":"test 3","href":"http://url"}]
},
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 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) {} });
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);
}
I have a bug while using FB.ui, although I'm doing everything by the book.
I want to a button so users can share the page on their wall.
When I click the button, I get a facebook popup window that says:
An error occurred, Please try again later.
Can you see what's wrong?
Thanks!
Here's my code:
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init
({
appId:'MYAPPID',
status:true,
cookie: true,
xfbml:true
});
function shareProject2()
{
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) {
getPermission();
} else {
alert('Post was not published.');
}
});
return false;
}
</script>
<a href="#" onclick="shareProject2();" >Share</a>
Have you tried passing the session from the server to the client JavaScript
This would be done in php as:
<?php
require 'facebook.php';
$facebook = new Facebook(array(
'appId' => $appId, // Your App Id
'secret' => $secret, // Your App Secret
'cookie' => true,
));
$session = $facebook->getSession();
?>
<script>
FB.init
({
appId:'MYAPPID',<?php
echo (!empty($session)) ? 'session: ' . json_encode($session) . ',' : '' ?>
status:true,
cookie: true,
xfbml:true
});
...
</script>