I have the following feature where the user can share a feed. The below code gets block by pop up blockers on most browsers. I've seen several post on stack overflow about this issue. One recommended using the onclick which i've tried. I've noticed that if my facebook sdk fails i don't get the popup block. What is the best plan of attack. I'm using php.
<a class="facebook" href="#" onclick='loadSdk(); return false;'></a>
<script>
function loadSdk(){
window.fbAsyncInit = function() {
FB.init({
appId : '123', // App ID
channelUrl : 'http://mysite.com/facebook', // Channel File
// status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
if (typeof facebookInit == 'function') {
facebookInit();
}
FB.api('/me', function(user) {
if (user) {
var image = document.getElementById('image');
image.src = 'https://graph.facebook.com/' + user.id + '/picture';
var name = document.getElementById('name');
name.innerHTML = user.name
}
});
};
// 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));
}
function facebookInit(){
var publish = {
method: 'feed',
message: '',
name: '',
caption: '',
description: (
),
link: 'http://mysite.com/',
picture: 'http://mysite.com/fblogo.png',
actions: [
{ name: '123', link: 'http://www.mysite.com/' }
],
user_message_prompt: 'Share your thoughts'
};
FB.ui(publish, null);
}
</script>
Currently you are loading the SDK onclick – why?
You want to execute the function that opens a popup – facebookInit in your case – onclick.
Related
I have a Facebook app which was basically created for subscribing page for real time change notification.
Ref: https://developers.facebook.com/docs/graph-api/webhooks
https://www.facebook.com/marketingdevelopers/videos/883648801749520/
I have also make it public from the app's "App Review" tab. The user who created that app can successfully logins and the real time changes notification is working as expected.
But, when end user tries to login to that app, it does not allow. It shows following message
user is not allowed to see the application
Is there anything missing?
Update (Jun 17): Added the javascript code that I used in the aspx page.
User open that page in browser. The page just contains a login to facebook button. When it is click, it opens a pop window to login to Facebook.
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({
appId: '145141412569340',
xfbml : true,
version : 'v2.6'
}); };
(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'));
function subscribeApp(page_id, page_name, access_token) {
console.log('Subscribing page to app! ' + page_name);
FB.api('/' + page_id + '/subscribed_apps',
'post',
{'access_token': access_token},
function (response) {
console.log('Successfully subscribed page name: ' + page_name + ' , pageId: ' + page_id + ', success: ' , response);
});
}
// Only works after `FB.init` is called
function myFacebookLogin() {
FB.login(function (response) {
//alert('Successfully loggined : ' + response);
console.log('Successfully loggined : ' + response.status, response);
FB.api('me/accounts', function (response) {
console.log('Successfully retrived pages ', response);
var pages = response.data;
var ul = document.getElementById('list');
for (var i = 0, len = pages.length; i < len; i++) {
var page = pages[i];
var li = document.createElement('li');
var a = document.createElement('a');
a.href = "#";
a.innerHTML = page.name;
a.onclick = subscribeApp.bind(this, page.id,page.name, page.access_token);
li.appendChild(a);
ul.appendChild(li);
}
});
}, { scope: 'manage_pages,email,public_profile,read_page_mailboxes,user_about_me,user_birthday,user_education_history,user_events,user_friends,user_hometown,user_location,user_posts,user_relationship_details,user_relationships,user_religion_politics,user_website,user_work_history,user_likes' });
}
I am using FB Javascript SDK to check that a user like my page or not. It's works on localhost but when I upload this on Server the code does not works. My code is below:
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'My App Id', // App ID
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
FB.getLoginStatus(function(response) {
var page_id = "My Page ID";
if (response && response.authResponse) {
var user_id = response.authResponse.userID;
var fql_query = "SELECT uid FROM page_fan WHERE page_id = "+page_id+"and uid="+user_id;
FB.Data.query(fql_query).wait(function(rows) {
if (rows.length == 1 && rows[0].uid == user_id) {
alert('Liked');
} else {
alert('Not Liked');
}
});
}
});
};
// Load the 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>
It works on localhost and show an Alert but not on Server
You need to add your internet domain to your application sites whitelist.
Go to http://developers.facebook.com
Open YourApp Settings
Add Platform
Write your Site URL
Im trying to send posts to a wall of a page im an admin to through the js sdk. I have made it do i can do it for myself(my personal user) but i cannot get it to work as the "page".
<div id="fb-root"></div>
<script type="text/javascript">
function SendToFacebook()
{
window.fbAsyncInit = function () {
// init the FB JS SDK
FB.init({
appId: '**CORRECT ID**', // App ID from the app dashboard
channelUrl: '**MYPAGE**/channel.html', // Channel file for x-domain comms
status: false, // Check Facebook Login status
xfbml: true // Look for social plugins on the page
});
FB.ui(
{
method: 'feed',
name: 'MyFeed',
link: '',
// picture: '',
caption: 'My caption',
description: 'test',
message: 'MESSAGE?',
},
function (response) {
if (response && response.post_id) {
alert('Delat på facebook.');
} else {
alert('Inte delat på facebook.');
}
}
);
// 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>
This posts to my own user page, and ive tried the "to" parameter but it send the post from my personal user to the page. Is there any way to make this though the login function?
bare in mind that im fairly new to this so demos and examples are welcome.
I got it to work after a hard days work, if any1 is interested heres how i did.
<script type="text/javascript">
function SendToFacebook()
{
window.fbAsyncInit = function () {
// init the FB JS SDK
FB.init({
appId: '***', // App ID from the app dashboard
channelUrl: '***', // Channel file for x-domain comms
status: false, // Check Facebook Login status
xfbml: true // Look for social plugins on the page
});
FB.login(function (response) {
FB.api('/me/accounts', function (apiresponse) {
var data = {
message: "mymessage",
display: 'iframe',
caption: "caption",
name: "name",
description: "description",
to: **wallid**,
from: **wallid**
};
FB.api('/**wallid**/feed', 'post', data, function () {
console.log(arguments);
});
});
}, { scope: 'manage_pages' });
};
// 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>
I found this solution and I tried it, although I dont know how it was 3 years ago, now you need to append page access token you receive via /me/accounts calling (also you must be admin of that page etc.) so todays working solution could look like this:
FB.api('/me/accounts', function (apiresponse) {
console.log(apiresponse);
var data = {
message: "mymessage",
//display: 'iframe',
caption: "caption",
picture: 'www.bla.com/image.jpg',
link: 'www.facebook.com',
name: "name",
description: "description",
to: **APP IP**,
from: **APP IP**,
access_token: apiresponse.data[0].access_token
};
FB.api('/**APP IP**/feed', 'post', data, function () {
console.log(arguments);
});
});
I am having problem integrating the facebook post to wall for pages (not user).
I have already authorized the app for all the scoop.
Scoop lists:
user_about_me,user_activities,user_birthday,user_checkins,user_education_history,user_events,user_groups,user_hometown,user_interests,user_likes,user_location,user_notes,user_online_presence,user_photo_video_tags,user_photos,user_relationships,user_relationship_details,user_religion_politics,user_status,user_videos,user_website,user_work_history,email,read_friendlists,read_insights,read_mailbox,read_requests,read_stream,xmpp_login,manage_friendlists,manage_notifications,status_update,offline_access,publish_checkins,publish_stream,rsvp_event,manage_pages
I have accepted all grant access scopes and I have successfully connected and get the users data I have save into the database the info of users available pages:
page id and page access token
Whe I am posting a test message It say's : #200) The user hasn't authorized the application to perform this action
here is my login script for fb:
window.fbAsyncInit = function() {
FB.init({
appId:'MY_APP_ID', cookie:true,
status:true, xfbml:true,oauth : true
});
};
(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));
//FB.Event.subscribe("auth.logout", function() {window.location = '/logout'});
$('#facebook_login').click(function(e) {
FB.login(function(response) {
if(response.authResponse) {
parent.location ='http://mywebsite.com/users/oauth_fb';
}
},{scope: 'user_about_me,user_activities,user_birthday,user_checkins,user_education_history,user_events,user_groups,user_hometown,user_interests,user_likes,user_location,user_notes,user_online_presence,user_photo_video_tags,user_photos,user_relationships,user_relationship_details,user_religion_politics,user_status,user_videos,user_website,user_work_history,email,read_friendlists,read_insights,read_mailbox,read_requests,read_stream,xmpp_login,manage_friendlists,manage_notifications,status_update,offline_access,publish_checkins,publish_stream,rsvp_event,manage_pages'});
});
After connecting facebook account I will logout automatically my facebook account with my script:
<script>
window.fbAsyncInit = function() {
FB.init({
appId:'MY_APP_ID', cookie:true,
status:true, xfbml:true,oauth : true
});
FB.Event.subscribe('auth.authResponseChange', function(response) {
if (response.status === 'connected') {
FB.logout(function(response) {
window.location = '';
});
}
});
};
(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>
And here is my script for posting (this is for offline posting so user already logged out on facebook):
$oauth_uid = 'PAGE_ID_FROM_DB';
$oauth_token = 'PAGE_TOKEN_FROM_DB'
$post_url = '/'.$oauth_uid.'/feed';
if ($oauth_uid) {
$msg_body = array(
'access_token' => $oauth_token,
'message' => 'tesing post to my page',
);
try {
$postResult = $facebook->api($post_url, 'post', $msg_body );
} catch (FacebookApiException $e) {
echo $e->getMessage();
}
}
How to fixed this issue ? I don't see anything wrong with my script , why I can post to my personal facebook account while I can't post on my facebook page ?
Please help..
Thank you.
I am using javascript sdk to update status in facebook. This is my code
window.fbAsyncInit = function() {
FB.init({
appId : 'id', // App ID
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
// Additional initialization code heres
FB.login(function(response) {
if (response.authResponse) {
console.log('Welcome! Fetching your information.... ');
FB.api('/me', function(response) {
console.log('Good to see you, ' + response.name + '.');
});
} else {
console.log('User cancelled login or did not fully authorize.')
}
});
};
// 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 = "http://connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
</script>
but i am getting An error occurred message while opening this page.please give a solution to solve this.Or any one else can share the app id which is working fine