I have a own page on my server where people can download a track of my own.
My idea is to put a like button on that page to my Facebook page. People must first hit the like button, and after that they can download the track. Probably this must fix with a form with name, e-mail and the like button that they have to click! After submit, there must be something that will check if the user realy hit the like button before they get the page with the special content (download link)
So the idea is if it is possible that there's a check that the page is liked before they can submit and get the download button!
Can someone tell me if this is possible and can someone help me with the code?
I have no other Facebook social plugins! I only want to use a like button!
You can check if someone clicks the like button using the Javascript SDK
You can either use the social plugin or the XFBML button,
Implementing the XFBML button and the Javascript SDK you can find here:
https://developers.facebook.com/docs/reference/javascript/
Then you can create an event listener that listens if an user clicks the like button:
FB.Event.subscribe('edge.create',
function(response) {
alert('You liked the URL: ' + response);
}
);
https://developers.facebook.com/docs/reference/javascript/FB.Event.subscribe/
Using this you can store if someone clicked the like button then save that to either your database or in a session and let the user download their track.
Your code would be something like this
<div id="fb-root"></div>
<div class="fb-like" data-href="http://www.stackoverflow.com" data-send="false" data-width="450" data-show-faces="true"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR_APP_ID', // App ID
channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
FB.Event.subscribe('edge.create',
function(response) {
alert('You liked the URL: ' + response);
}
);
};
// 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));
It is possible to do what you're asking. You may find this SO question and answer useful:
How to check if a user likes my Facebook Page or URL using Facebook's API
Related
I'm developing my first chrome extension and I'm stuck with a "session restore" problem. At the begging of the developement when a user log in to my extension and close the popup, when he open the plugin again he had to login again.
I've used chrome.storage.sync to be able to save the session infomation to make the user to be still logged in and if he close the plugin, and his session is still active he will be redirected to the welcome page. But how can I check at the extension's startup in what page of the plugin the user was and bring him back to that page?
For example, if a user is logged and was on the "choose a book" section, how can i make the plugin open at "choose a book" section and not in "welcome" section?
Angular 2 for client side
NodeJs for server side
Consider that the session object is something like:
{
logged: true,
last_section: 'books'
}
When the user visits the books section, save it.
// this code goes inside some listener for visiting a section
chrome.storage.sync.get('session', function (items) {
const session = items.session || {}
session.last_section = 'books'
chrome.storage.sync.set({ session })
})
At the beginning of the popup script, you can simply call chrome.storage.sync.get to get the last session object state.
chrome.storage.sync.get('session', function (items) {
const session = items.session
if (session && session.logged) {
if (session.last_section === 'books') {
// render books section
}
if (session.last_section === 'welcome') {
// render welcome section
}
}
})
I'm working on a chatbot with Dialogflow & Messenger. The webhook is been written in Python 3.x. I'm facing problem with how to transfer data from webview to the messenger chat window again to continue conversation with user.
Messenger chatbot is integrated with Dialogflow (v2). I've added a button for choosing date by the user. When the user clicks on the button, it redirects to an external website where I host the HTML page for datepicker.
The webhook payload button contains --> "messenger_extensions": "true
"attachment" : {
"type" : "template",
"payload" : {
"template_type" : "button",
"text":"Click button and choose",
"buttons": [{
"type": "web_url",
"url": "https://datepicker.glitch.me",
"title": "Choose Date",
"webview_height_ratio": "tall",
"messenger_extensions": "true"
}]
}
}
My HTML domain is successfully whitelisted (added HTTPS domain in FB Page --> Settings --> Messenger Platform --> white-listed domain).
This opens the webview HTML page (for mobile --> popup as chat extension, for PC --> opens webview in new browser window). I can select the dates.
On Submit, Javascript gets the input filed values as alert. Also Facebook Messenger SDK is integrated with the HTML. This helps to close the webview on click of Submit button too.
// Facebook Messener SDK Javascript
(function(d, s, id){
alert('Messenger Extension loaded'); // This alert is coming
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.com/en_US/messenger.Extensions.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'Messenger'));
// Messenger SDK loading completes
window.extAsyncInit = function() {
// the Messenger Extensions JS SDK is done loading
alert('window extAsyncInit') // This alert is coming
MessengerExtensions.getUserID(function success(uids) {
var psid = uids.psid;//This is your page scoped sender_id
alert("Getting PSID") // This alert is NOT COMING
alert("This is the user's psid " + psid); // Alert NOT COMING
}, function error(err) {
alert("Messenger Extension Error: " + err);
});
};
// This is the Javascript based onSubmit function
function sendMessage() {
alert($( "#from_field_id" ).val()) // This is coming
alert($( "#to_field_id" ).val()) // This is coming
/// DON't KNOW HOW TO RETURN DATA TO MESSENGER WINDOW
MessengerExtensions.requestCloseBrowser(function success() {
// This works too
}, function error(err) {
});
return $( "#from_field_id" ).val() //Not coming to messenger window
};
I got a few related topics but unfortunately all of them are related to node.js. But I could not find anything related to python webhook.
I went through a tons of documentation:
Tutorial
Stackoverflow topic: Datepicker data pass
Webview Guide
Stackoverflow topic 2:
And many more documents available.
Expected: With the closing of the webview window, the user selected dates should be transferred to messenger chat window to continue conversation. Otherwise the data cannot be saved to database.
Actual: User can select date. On submit, JS picks the values from input fields and close the webview window. No data is been passed on to messenger chat window.
What am I doing wrong here?
Please help.
At present, dialoglow doesn't have a callback for data passed from messenger webviews. A work around is to access the 'psid' of the user using Messenger SDK, use that to identify your user and then store the json data that you get on sumbit in your database.
I'm developing a web application using Sails and React. In this, I'm registering the user and redirecting them to home page passing id as a param. So after redirection, UserController's home action is getting called.
Here is the code 'api/controller/UserController'
home : function(req,res){
var userId = parseInt(req.params.id);
sails.log.warn('Home req.params.id :: ',userId);
if(userId && typeof userId === "number"){
User.findOne(userId)
.then(function(user){
sails.log.info('Sending user [home]:: ',user);
Router.run(routes, '/user/home/' + userId, function(Root){
return res.view("homepage",{
'body' : React.renderToString(<Root/>),
'user' : user
});
});
}).catch(function(err){
sails.log.error('Error while finding user :: ',err);
return res.negotiate(err);
})
}else{
return res.badRequest("User id must be a Integer value","400");
}
}
What should I do, to display user information using my React component?
In your controller action which handles the form submission, you should store the user's ID in your session, e.g.:
req.session.me = newlyCreatedUser.id;
// Session is saved automatically when request is sent.
return res.redirect('/');
This means that your new user is also effectively "logged in".
Then in your home controller action, instead of grabbing the user's id from the parameter, grab it from the session.
For a more thorough walkthrough, see sails101/basic-login. Good luck!
Side note: As a rule of thumb, I would suggest using an AJAX request + loading spinner + client-side redirect (window.location='/') to submit your forms instead of a traditional HTML form submission + backend res.redirect() where possible. It tends to keep things cleaner for your app down the road, and helps encourage your backend to organically develop in a future-friendly way. Plus I just tend to think it's easier to reason about.
How can an Omnibox extension create and post form data to a website and then display the result?
Here's an example of what I want to do. When you type lookup bieber into the Omnibox, I want my extension to post form data looking like
searchtype: all
searchterm: bieber
searchcount: 20
to the URL http://lookup.com/search
So that the browser will end up loading http://lookup.com/search with the results of the search.
This would be trivial if I could send the data in a GET, but lookup.com expects an HTTP POST. The only way I can think of is to inject a form into the current page and then submit it, but (a) that only works if there is a current page, and (b) it doesn't seem to work anyway (maybe permissions need to be set).
Before going off down that route, I figured that somebody else must at least have tried to do this before. Have you?
You could do this by using the omnibox api:
chrome.omnibox.onInputChanged.addListener(
function(text, suggest) {
doYourLogic...
});
Once you have you extension 'activated' due to a certain keyword you typed you can call something like this:
var q = the params you wish to pass
var url = "http://yourSite.com";
var req = new XMLHttpRequest();
req.open("POST", url, true);
req.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
req.onreadystatechange = function() {
if (req.readyState == 4) {
callback(req.responseXML);
}
}
req.send(q);
I hope you are all well!
A question for an app that uses Backbone.js and node.js.
I'm in a situation where I want to create a model, and then automatically go to a different uri that is constructed using the newly created model :
MessageView = Backbone.View.extend({
events : {
'click #button' : 'go here'
}
go here : function(model) {
var message = new Message({model : model)};
var id = message.get('id');
// go to uri '/messages/id'
Now I have set up my app using Express, and so I would like to have a real GET request to the server here invoking the data from the newly created model. So I would like to load the page and not just change the view.
One way to do this (I think) would be to just have
window.location = 'messages/'+id;
as the last line above, but I seem to have the impression this is not good practice for Backbone in general.
Otherwise, could just create the message model inside of the render method, and then write its id directly into the href of the button when the view is rendered, but this also seems messy :
render : function() {
var message = new Message({model : model)};
var id = message.get('id');
$('a #button').attr('href', '/messages/'+id);
}
Any ideas on how I could set this up in a more elegant way? Thanks in advance!
Are you sure you want to actually change the browser page to a new window location? Doing that will cause all your javascript and everything else to have to reload. if you need to invoke a GET to the server to get the information for that model id, you just need to call fetch on a model with an id attribute.
From the little code you have here, this may be more along the lines of what you're trying to do:
MessageView = Backbone.View.extend({
events : {
'click #button' : 'go_here'
},
go_here : function(model) {
//myID is the id of your message you want to get from the server
//I'll leave it up to you on how you get the id of what you
//want from that button
//I'll also assume that you have a router setup somewhere
//to handle navigation
MyApp.MyRouter.navigate("messages/"+id, {trigger: true});
}
});
Then, in your router you'd have a route setup to watch for that:
routes: {
"messages/:id" : "showMessage"
}
And in your showMessage function:
showMessage: function(id) {
var message = new Message({id: id});
message.fetch({success: function(model) {
//render view of for the message to be shown
var messageView = new MessageView({model: model});
messageView.render();
});
}
When you create the view this way, it will be created with a model that already has all the data for your message in its attributes.