I am currently in the process of developing a canvas application that will make use of the social plugins provided by Facebook.
The application itself allows a user to create a text file from a form, download it if they wish and also post the file to their feed using the Feed Dialog.
I have implemented the Feed Dialog and it works fine, but the problem I am getting is that if the user clicks the cancel button from the dialog that prompts them to share the file or cancel, a message is displayed on my page stating that post was successful when it did NOT post to facebook.
How can I alter this to display a message stating that the file was not posted to their feed?
Here is the js code.
function postToFeed() {
// calling the API ...
var obj = {
method: 'feed',
link: 'http://XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',
picture: 'http://XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',
name: 'Game Configuration File Creator',
caption: 'Call of Duty 4: Modern Warfare',
description: 'config_mp.cfg',
redirect_uri: 'https://XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX'
};
function callback(response) {
document.getElementById('msg').innerHTML = 'Post was successful.';
}
FB.ui(obj, callback);
}
You have to check wether the response was valid or not in your callback.
function callback(response) {
if (response && response.post_id) {
alert('Post was published.');
} else {
alert('Post was not published.');
}
}
Related
I am using FB share and like plugin on my website. Link below:
https://developers.facebook.com/docs/plugins/like-button
I would like to track a user who logged in on my website (I have the user id) and liked and shared a post through FB like and share plugin and when the user does then I would do some php coding and reward the user right after the fact that the user likes and shared my post. How am I able to track user like and share?
Thanks,
Read this -
https://developers.facebook.com/docs/javascript/reference/FB.ui
The example there is pretty clear and you have a callback in which you can do whatever based on the state of the response (they actually shared, they cancelled etc.), you can call your PHP-powered server in the callback and do whatever.
You cannot get the share callback using this like button. You can instead create a share button of yours and invoke the Feed Dialog on its click-
FB.ui(
{
method: 'feed',
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.');
}
}
);
Also see this link: https://developers.google.com/analytics/devguides/collection/gajs/gaTrackingSocial
Can I send browser notifications from server to subscribed users using PHP? I saw this tutorial today, but that work only from client side. I know there are services like pushcrew, but I want to develop my own using PHP and JavaScript.
My actual requirement is asking users to confirm if I can send them notifications using this code,
if (Notification.permission !== "granted")
{
Notification.requestPermission();
}
then show notifications when I publish new article in my website.
NB: Browser support doesn't matter.
You have to trigger these notifications on the client side, so you need to get them from the PHP server to your JavaScript:
do an ajax polling every x seconds, for example with the jQuery ajax functions, and show a message if the server returned one
push the message over WebSockets, for example with Ratchet
Web Push allows you to push notification even if the user didn’t have the site open and is supported by the recent Firefox 44. It is partially supported in Chrome. For details check out the Mozilla Hacks blog.
Example with polling
JavaScript jQuery part:
function doPoll() {
// Get the JSON
$.ajax({ url: 'test.json', success: function(data){
if(data.notify) {
// Yeah, there is a new notification! Show it to the user
var notification = new Notification(data.title, {
icon:'https://lh3.googleusercontent.com/-aCFiK4baXX4/VjmGJojsQ_I/AAAAAAAANJg/h-sLVX1M5zA/s48-Ic42/eggsmall.png',
body: data.desc,
});
notification.onclick = function () {
window.open(data.url);
};
}
// Retry after a second
setTimeout(doPoll,1000);
}, dataType: "json"});
}
if (Notification.permission !== "granted")
{
// Request permission to send browser notifications
Notification.requestPermission().then(function(result) {
if (result === 'default') {
// Permission granted
doPoll();
}
});
} else {
doPoll();
}
JSON server answer in "test.json" if there is a message:
{
"notify": true,
"title": "Hey there!",
"desc": "This is a new message for you",
"url": "http://stackoverflow.com"
}
JSON server answer in "test.json" to not show a message:
{
"notify": false
}
I have a page where you can share something.
First im logging in with FB.login()
FB.login(function(response) {
if (response.authResponse) {
sharePost(imgName,socket);
} else {
//do nothing if not logged in....
}
}, {scope: 'public_profile,email,user_friends'});
Then im using the following share
FB.ui(
{
method: 'feed',
link: 'myurl',
caption: 'mycaption',
display:'popup',
title: 'title,
picture:'myimg.png',
description:'mydescription,
name:'myname'
},
// callback
function(response) {
if (response && !response.error_code) {
if(waitedTooLong == false)
{
successfullLogin(socket);
}
console.log("shared");
} else {
successfullLogin(socket);
console.log("not shared");
}
}
)};
Sometimes it blocks the popup after logging in. Sometimes not.
I thought about removing FB.login() but I need the scope for other actions.
You need to use FB.ui dialogs on user interaction (= mouse click), not in the asynchronous callback function of FB.login. Modern browser detect it as unauthorized popup and block it. Also, it´s a bad idea to present a feed dialog right after authorization. Present a Login Button and use FB.login, then present a Share Button and use FB.ui feed or FB.ui share.
Btw, you don´t even need to authorize the user for FB.ui, so you can just skip FB.login and use it when you really need it.
When sharing some links on facebook(either programatically or manually), javascript code is being shown in the post.
Thus my question is more related to how to fix my website, so that, when posting link to facebook, javascript code doesn't show in the facebook post.
Forexample try posting this link:
http://djuice.com.pk/discounts
You'l see javascript code(which is present on the shared page) in the facebook post.
You are should set description param for sharing button. For example:
FB.ui(
{
method: 'feed',
name: 'The Facebook SDK for Javascript',
caption: 'Bringing Facebook to the desktop and mobile web',
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.'
),
link: 'https://developers.facebook.com/docs/reference/javascript/',
picture: 'http://www.fbrell.com/public/f8.jpg'
},
function(response) {
if (response && response.post_id) {
alert('Post was published.');
} else {
alert('Post was not published.');
}
}
);
I'm trying to login users automatically into my site who have already allowed our facebook app, initially I was going to use :
var cb = function(response) {
if (response.status === 'connected') {
FB.api('/me', function(response) {
$.post( url, { 'op':'facebook','name':response['name'],'id':response['id'],'email':response['email']},
function( data ) {
parent.location.reload();
});
});
} else {
alert('You are not logged in');
}
};
FB.login(cb, { scope: 'publish_actions,publish_stream,read_stream,email' });
Although using that it opens a facebook popup, blocked by many popup blockers and browsers when done in an automatic manner like this and will also display for users who have no allowed our app.
I want it to be done descretely but I'm not sure how :S
If anyone could show me how to log them in using javascript that would be great :)
Prompting a user to login should be hinged off of a user generated event, like clicking on an element. Most browsers will block attempts to automatically open new windows unless there is enough confidence that the user has requested the action.
If you want to automatically detect a visitor's login status when they load your page, you should hook onto the various auth events exposed by the Javascript SDK ("auth.authResponseChange", "auth.login", etc), or manually request the visitor's status using the "FB.getLoginStatus" method. You can read more about these events at https://developers.facebook.com/docs/reference/javascript/FB.getLoginStatus/
Managed to get it working! Read the facebook tutorial again and this is what I came up with
window.onload=function(){
var url = "http://mysite.com/";
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
FB.api('/me', function(response) {
$.post( url, { 'op':'facebook','name':response['name'],'id':response['id'],'email':response['email']},
function( data ) {
parent.location.reload();
});
});
}
});
};