Via the Facebook javascript API, you can subscribe to the 'event.create' event to listen for when users "Like" something on a page via the Like Plugin. Is it possible to respond to the same user un-liking it as well? I don't see any events documented, wondering if this is a hidden feature.
You can now subscribe to the “edge.remove" event to know when a user unlikes a page. For example:
FB.Event.subscribe('edge.remove', function(href, widget) {
alert('You just unliked '+href);
});
Announcement: http://developers.facebook.com/blog/post/446/ documented at http://developers.facebook.com/docs/reference/javascript/FB.Event.subscribe
Recently added:
http://bugs.developers.facebook.net/show_bug.cgi?id=10796
The javascript sdk does not have an event for this. I have run into this problem before. The only way to check if a user has unliked an item is to do a Graph or Rest query to determine if they currently like the item.
Unfortunately "edge.remove" won't get triggered when you dislike a facebook-page via "liked"-button (on the top right) and click on "unlike". -.-
This event is very useful to create a vote system. The js-script below does an ajax-call to a PHP-page that updates a database.
var _paq = _paq || [];
FB.Event.subscribe('edge.create', function(response) {
var page = $("#pageid").val();
$.post("ajax_vote.php", { page: page },
function(data) {
//alert("voted : " + data);
});
});
FB.Event.subscribe('edge.remove', function(response) {
var page = $("#pageid").val();
$.post("ajax_unvote.php", { page: page },
function(data) {
//alert("unvoted : " + data);
});
});
Related
This question already has an answer here:
Facebook ignoring OG image on first share
(1 answer)
Closed 6 years ago.
First of all hi and thanks in advance to anyone who can help with this because I've been going crazy over this for weeks now.
So I've got a website which lists gif taken from my mobile application (which are then stored on AWS and my visitors ( I haven't found a use for me to have users) can share these gifs on facebook using the facebook sdk.
The problem appears when I try sharing an image for the first time
This is what the share dialog shows the first time I click on my sharing button:
http://i.stack.imgur.com/lNVNF.png
and then I close and reclick the same button and now it works:
http://i.stack.imgur.com/YsDUm.png
Now I've been trying to find a way to make this work on the first sharing attempt but to no avail.
I am using meteor in combination with biasport:facebook-sdk and Amazon S3 for the hosting of my files.
Edit here is the code used:
FRONT SIDE
HTML
<div class="facebook share">
<img src="/gallery/fb.png">
</div>
Javascript
Template.*templateName*.events({
'click .facebook': function(e){
e.preventDefault();
e.stopPropagation();
// this is in a modal so I store the data I need
// (events have photos which in turn contain a url to the gif
var url = Session.get('event').photos[Session.get("id")].url;
FB.ui({
method: 'share',
href: url
});
}
SERVER SIDE
JAVASCRIPT
if(Meteor.isClient) {
window.fbAsyncInit = function() {
FB.init({
appId : 'APP_ID',
status : true,
xfbml : true,
version : 'v2.5'
});
};
}
Edit: I found a manual solution using exec future and curl
so first I added a call to a meteor method on the share that updates the facebook crawler
JAVASCRIPT
Template.*templateName*.events({
'click .facebook': function(e){
e.preventDefault();
e.stopPropagation();
// this is in a modal so I store the data I need
// (events have photos which in turn contain a url to the gif
var url = Session.get('event').photos[Session.get("id")].url;
Meteor.call('updateCrawler', url, function(){
FB.ui({
method: 'share',
href: url
});
});
}
Then I defined my meteor method as such
JAVASCRIPT
Meteor.methods({
updateCrawler: function(url){
var future = new Future();
cmd = 'curl -X POST -F "id=' + url + '" -F "scrape=true" -F "access_token={my_access_token}" "https://graph.facebook.com"';
exec(cmd, function(error){
if (error){
console.log(error);
}
future.return();
});
future.wait();
}
});
it's ugly but since I'd have to wait for the crawler to update and it works I'll leave this here for future use for someone maybe
Edit2:
I did not use og tags at all since I was simply sharing a url to aws directly and not a url to my website
I worked around this problem by calling the Facebook API direct from the server to make it scrape the og data by requesting info on the page. First time round it doesn't have the image cached but second time it does so this workaround does the initial call before sharing.
Use an access token for your facebook app and call the below in an ajax call and await the response before opening share dialog. Replace Google address with your own uri encoded address https://graph.facebook.com/v2.5/?id=http%3A%2F%2Fwww.google.co.uk&access_token=xxxxx
EDIT:
As per comments, here is my server side method for calling this which I use when posts etc are inserted to make the initial call and prompt a scrape from fb:
var getTheOGInfo = function (link)
{
if (!link || link.slice(0, 4).toLowerCase() != "http"){
throw new Meteor.Error("og-info-bad-url", "Function requires an unencoded fully qualified url");
return false;
}
var url = "https://graph.facebook.com/v2.5/{{{{id}}}}?access_token={{{{token}}}}&fields=og_object{id,description,title,type,updated_time,url,image},id,share";
var token = Meteor.settings.private.fb.token;
if (!token){
throw new Meteor.Error("og-info-no-token", "Function requires a facebook token in Meteor.settings.private.fb.token");
return false;
}
var link_id = encodeURIComponent(link);
url = url.replace('{{{{token}}}}', token).replace('{{{{id}}}}', link_id);
var result = HTTP.get(url, {timeout:1000});
return result;
}
Or for your purposes you may not want anything that might be blocking so you could change the last two lines to be aynchronous:
var result = HTTP.get(url, {timeout:1000});
return result;
//Replace with non blocking
HTTP.get(url, {timeout:1000}, function(err, result){console.log('something asynchronous', err, result);});
return true;
I am trying to allow users of my app to notify multiple Facebook friends that they need them to vote for their favorite item on a web page. I have been using the FB send method (https://developers.facebook.com/docs/reference/dialogs/send/) and it has been working fine on desktop (code is below) but I just realized that I overlooked where it says in the docs that this dialog is "not supported on mobile devices."
Are there any alternatives to the send method that would allow a user to send a private message to their friends from mobile browsers? Perhaps a way to trick the api into thinking it's desktop?
I'm also open to using another FB dialog so long as it: 1) is functional from mobile browsers 2) allows pre-populating of recipients and 3) is private between the sender and the recipient such as a private message or notification.
Any ideas would be much appreciated. Thanks
Code for FB send method:
function resetSelector(){
$('#fs-user-list').empty();
$(".mutual-friends-link").fSelector({
max: 5,
excludeIds: exclusions,
facebookInvite: false,
lang: {
title: "Pick your mutual friends who will vote on the gifts (Last step)",
buttonSubmit: "Add Accomplices",
selectedLimitResult: "Limit is {5} people."
},
closeOnSubmit: true,
onSubmit: function(response){
var accompliceUid;
accomplices = response;
$('#index-accomplices').empty()
var i = 0
var FB_notification = function(accomplice, poll_id){
FB.api('https://graph.facebook.com/', 'post', {
id: "http://giftadvisor.herokuapp.com/polls/" + poll_id,
scrape: true
}, function(response){
FB.ui({
method: 'send',
to: [accomplice],
link: "http://giftadvisor.herokuapp.com/polls/" + poll_id,
}, fbCallback)
})
}
var fbCallback = function(){
console.log(i++)
if (i === accomplices.length){
window.location = "/polls/" + poll.id
}
}
_.each(accomplices, function(accomplice){
$('#index-accomplices').append('<img class="accomplices" src="http://graph.facebook.com/' + accomplice + '/picture?type=large">');
user = new User({uid: accomplice});
user.save(null,
{success: function(response){
console.log("users saved")
console.log(response.attributes.uid);
vote = new Vote();
vote.save({
user_id: response.attributes.id,
poll_id: poll.id,
image_url: "http://graph.facebook.com/" + response.attributes.uid + "/picture"
},{success: function(response){
FB_notification(accomplice, poll.id);
}
}
);
}});
});
// }});
},
onClose: function(){
// FB_notification(accomplices, poll.id);
}
});
}
The only thing I've seen approximating this is to use the now-deprecated Chat API. See, for example, what Grouper does.
Send dialog is really what I want, but failure on mobile web makes it useless. Have you found any other approaches that may work?
I'm trying to use the FB api for login on an app built with angularjs. I'm using the angular-facebook library. It works, but the issue is that once the user authorized the app, the callback is not called. So the popup window is not closed, and the only solution for the user is to reload the page. How can I fix this?
$scope.login = function() {
Facebook.login(function(response) {
// this is never called ;_;
if (response.status == 'connected') {
// I need to do stuff here
}
}, {scope: 'email,user_birthday,user_likes'});
};
IF you want more detail information on how to use AngularJS with FacebookAPI, this might be helpful:
http://www.boynux.com/angularjs-facebook-integration/
Regards,
Based on the angular-facebook documentation shouldn't your code look like this?
$scope.login = function() {
Facebook.login(function(response) {
// Do something with response. Don't forget here you are on Facebook scope so use $scope.$apply
});
};
With the Facebook.login function wrapped within a $scope.login function?
I use ga_social_tracking.js to track Likes done via the Facebook Fan Box (HTML5).
That works fine, but I also want to track clicks on the link to the Page itself. I think many go to the Page and [i]then[/i] like the Page, instead of liking directly using the box...
How can I achieve this?
Using Jquery and Google custom event tracking you can do something like this:
$(document).ready(function(){
$('a').click(function(e){
link_url = $(this).attr('href');
recordOutboundLink(link_url, 'Title of event', 'Description of the event');
});
function recordOutboundLink(link, category, action) {
try {
var pageTracker = _gat._createTracker("{{google_analytics_code}}");
pageTracker._trackEvent(category, action);
} catch (err) { }
}
});
Facebook recently notified they are deprecating support for app profile pages.
Apps created after Dec 10th no longer have the app page option, together with the
"add to my page" functionality, and must use the new Add page tab dialog.
After the user selects which page to add the application to, is there any way to
redirect the user to the selected page?
Similar functionality existed in the "old" add to page dialog, e.g.
https://www.facebook.com/add.php?api_key=MY_ADD_ID&pages=1
Activating the dialog with a response function seems to bring no result.
`
// Add app to page
function addToPage() {
// calling the API ...
FB.ui({
method: 'pagetab',
redirect_uri: 'MY_URL',
},function(response) {
alert(response);
});
}
`
So, two questions:
a) Is there any possibility for the app using the dialog to "know" which page was selected?
b) Is there any way to redirect the user to the selected page.
Thx!
<script type="text/javascript">
function addToPage() {
// calling the API ...
FB.ui(
{
method: 'pagetab'
},
function(response) {
if (response != null && response.tabs_added != null) {
$.each(response.tabs_added, function(pageid) {
alert(pageid);
});
}
}
);
}
</script>
Use above code...you will get page id of pages selected by the user
but what if the user has a custom name for its page.
i modify devson.. code a bit
FB.ui(
{
method: 'pagetab',
redirect_uri: '',
},
function(response) {
if (response != null && response.tabs_added != null) {
$.each(response.tabs_added, function(pageid) {
FB.api(pageid, function(response) {
alert('redirect to ' + response.link);
});
});
}
}
);
This used to be simple, using the facebook UI.("Add to My Page") Unfortunately facebook removed this.
You can add it using www.facebook.com/dialog/pagetab?app_id=YOUR_APP_ID&next=YOUR_URL
I put this an html and publisched it below. Just visit, enter your app params, hit submit, and our done.
http://www.jibecompany.com/2012/add-a-facebook-page-tab-application-to-your-page