I develop a quiz that needs from users to log in to Facebook and like my Facebook page. How can I check if user already likes the page?
`
<?php header('Access-Control-Allow-Origin: *'); ?>
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<style>
#fblikebutton { display: none; }
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>
</head>
<body>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_EN/sdk.js#xfbml=1&version=v15.0" nonce="oLBFXWMb"></script>
<section class="main">
<div class="container">
<div id="status"></div>
<div id="fbloginbutton">
<div data-scope="public_profile,email" data-onlogin="checkLoginState();" class="fb-login-button" data-width="" data-size="large" data-button-type="continue_with" data-layout="default" data-auto-logout-link="false" data-use-continue-as="false"></div>
</div>
<div id="fblikebutton">
<div class="fb-like" data-href="https://www.facebook.com/{MyFbPage}" data-width="" data-layout="standard" data-action="like" data-size="large" data-share="false"></div>
</div>
<div id="quiz_container"><!-- here is the quiz --></div>
</div>
</section>
<script>
function statusChangeCallback(response) { // Called with the results from FB.getLoginStatus().
console.log('statusChangeCallback');
console.log(response); // The current login status of the person.
if (response.status === 'connected') { // Logged into your webpage and Facebook.
$('#fbloginbutton').fadeOut();
$('#fblikebutton').fadeIn();
afterLogin();
} else { // Not logged into your webpage or we are unable to tell.
$('#fblikebutton').fadeOut();
$('#fbloginbutton').fadeIn();
$('#status').html('For fill the quiz, please login and follow our page:<br><br>');
}
}
function checkLoginState() { // Called when a person is finished with the Login Button.
FB.getLoginStatus(function(response) { // See the onlogin handler
statusChangeCallback(response);
});
}
window.fbAsyncInit = function() {
FB.init({
appId : '{MyAppID}',
cookie : true, // Enable cookies to allow the server to access the session.
xfbml : true, // Parse social plugins on this webpage.
version : 'v15.0' // Use this Graph API version for this call.
});
FB.getLoginStatus(function(response) { // Called after the JS SDK has been initialized.
statusChangeCallback(response); // Returns the login status.
});
};
function afterLogin() { // Testing Graph API after login. See statusChangeCallback() for when this call is made.
FB.api('/me', function(response) {
$('#status').html('Thank you for login, ' + response.name + '!');
if (user does not like our page yet) {
$('#status').html('Please follow our page to fill the quiz.<br><br>');
} else {
afterFollow();
}
});
}
function afterFollow() {
$('#quiz_container').fadeIn(); // Show the quiz
};
</script>
</body>
</html>
`
And a smaller problem, this Facebook login button parameter doesn't work:
data-scope="public_profile,email"
How can I fix this? Thank you!
I'ver tried /user/likes/ method, but returns nothing, and I think this is not the solution...
`
FB.api(
"/{user-id}/likes",
function (response) {
if (response && !response.error) {
alert('So you like this');
}
}
);
`
Related
I just started to learn using Vue. I wrote really simple code like the following.
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<script src="https://unpkg.com/vue"></script>
<div id="app">
<h2>{{number}}</h2>
<h2>Here it is!</h2>
</div>
</body>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
number:0
}
})
</script>
</html>
However, there is no number value.
But, when I open that code just by Ctrl+O on chrome, it shows succefully!
I definitely checked network by chrome dev tool and I got successfully vue.js from https://unpkg.com/vue#2.5.22/dist/vue.js What's wrong with it?
Loading the framework in the head is a good way to start.
See the example below, it works fine in here.
<!DOCTYPE HTML>
<html>
<head>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="app">
<h2>{{number}}</h2>
<h2>Here it is!</h2>
<button #click="clk">click</button>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
number: 0
},
methods: {
clk(){
this.number++;
}
}
})
</script>
</body>
</html>
I thought you should return an object from a function for data.
data : function() {
return {
number : 0
};
}
Im trying to send information using a post request of Vue, but every time i try i get an error 403 58
my django service is ok , i think that the problem is for the csrf token but i dont know how to send it with vue
var vue = new Vue({
el:"#app",
data: {
nombre:"",
apellido:"",
password:""
},
methods:{
enviar:function () {
data = {
"nombre":this.nombre,
"apelldio":this.apelldio,
"password":this.password
};
this.$http.post("http://localhost:8000/usuarios\\",data).then(function (data, status, request) {
if(status ==200){
console.log(data);
}
},function () {
console.log("Error");
});
}
}
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="https://bootswatch.com/4/flatly/bootstrap.min.css">
</head>
<body>
<h1>Insertar un nuevo usuario </h1>
<table id = "app">
<tr><td>Nombre:</td><td><input type="texte" class="form-control" v-model="nombre"></td></tr>
<tr><td>Apellido:</td><td><input type="texte" class="form-control" v-model = "apellido"></td></tr>
<tr><td>Password:</td><td><input type="texte" class="form-control" v-model="password"></td></tr>
<tr> <td> <button type="button" id = "enviar" class="btn btn-info" #click="enviar">Enviar</button></td></tr>
</table>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/0.1.13/vue-resource.min.js"></script>
{% csrf_token %}
<!-- here goes the scripts of vue and vue resource!>
You could use a method that involves fetching the csrf token with javascript and then passing it to the POST request as a header as mentioned here in Django documentation. In that link there is also examples about fetching the csrf token value.
Also, if the endpoint does not require this kind of protection you can disable it like in this example.
You can use something like this:
{% csrf_token %}
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/0.1.13/vue-resource.min.js"></script>
<script>
var csrf = document.querySelector('[name="csrfmiddlewaretoken"]').value;
Vue.http.interceptors.push(function (request, next) {
request.headers['X-CSRF-TOKEN'] = csrf;
next();
});
// Or maybe
Vue.http.headers.common['X-CSRF-TOKEN'] = csrf;
</script>
You can also use it like this, for example:
<script>
var csrf = '{{ csrf_token }}';
Vue.http.headers.common['X-CSRF-TOKEN'] = csrf;
// Or other way
// Vue.http.interceptors.push(...);
</script>
Note: I'm no django developer but gave you the basic idea, so check the doc for more info.
I'm trying to change the height of a panel in an ember .hbs file from it's controller. I've seen lots of examples, but I can't seem to get things right. Here's a jsbin I put together for it, and following that is my code. Any help will be much appreciated.
Thanks!
version: 1.13.8
node: 0.12.7
npm: 2.13.4
os: win32 x64
http://jsbin.com/kopajitili/3/edit?html,js,output
HTML
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<meta charset="utf-8">
<title>Ember Starter Kit</title>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.css">
<script src="http://builds.emberjs.com/tags/v1.13.5/ember-template-compiler.js"></script>
<script src="http://builds.emberjs.com/tags/v1.13.5/ember.debug.js"></script>
</head>
<body>
<script type="text/x-handlebars">
<div class="panel panel-primary" id="linkPanel" style="width:205px;">
<div class="panel-heading">
<h3 class="panel-title">Stuff</h3>
</div>
<div class="panel-body">
Blah blah blah...
</div>
<div>
<button style="margin: 10px;" {{action "addHeight"}}>Add Stuff</button>
</div>
</div>
</script>
</body>
</html>
Controller (JS)
App = Ember.Application.create();
App.Router.map(function() {
// put your routes here
});
App.ApplicationController = Ember.Controller.extend({
actions: {
addHeight: function() {
// My goal here is to be able to increase the height
// of the panel "#linkPanel" from an action.
// In this version, I'm just trying to see
// if I can reference the panel (I can't.)
// In the commented out lines, I was trying
// to actually change it.
// Any help and/or advice will be much appreciated.
alert(document.getElementById('#linkPanel'));
//this.set('this.document.getElementById('#linkPanel').height',"500px");
//this.set('this.document.getElementById('#linkPanel').style.height',"500px");
//this.set('document.getElementById('#linkPanel').style.height',"500px");
//this.set('document.getElementById('#linkPanel').style.width',"500px")
//this.set('document.getElementById('#linkPanel').style',"Height=500px")
}
}
});
When you call getElementById you should not prepend the # -- that is jQuery syntax. Revise it to document.getElementById('linkPanel');
Revised your JSBin:
http://jsbin.com/liwovawexu/edit?js,output
App = Ember.Application.create();
App.Router.map(function() {
// put your routes here
});
App.ApplicationController = Ember.Controller.extend({
actions: {
addHeight: function() {
document.getElementById('linkPanel').style.height = "500px";
}
}
});
I am using Asp.Net 2.0.I am trying to learn webservice and call that webservice using jquery ajax method
The problem is jquery ajax is not working properly and i could not find out where i have gone wrong.
Here's my jquery code
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#Button1").click(function(){
$.ajax({
type:"POST",
url:"/WebService.asmx/GetDateTime",
data:"{}",
contentType:"application/json; charset=utf-8",
dataType:"json",
succss: function(msg){
alert("Success");
},
failure:function(response){
alert("Error");
}
});
});
});
</script>
Heres my webservice
[WebMethod]
public string GetDateTime()
{
return DateTime.Now.ToString();
}
Heres the HTML part
<form id="form1" runat="server">
<div>
<input type="button" id="Button1" style="width:75px" value="Submit" />
<span id="output"></span>
</div>
</form>
If your button generated dynamically use "live" to bind event
$("#Button1").live("click", function(){...});
Note : make sure your id is same as generated in page, ASP.NET changes id to 'ct00_button1' check in browser inspect element
I'm trying to publish an action for the Facebook Grahp in order to get my App approval..
Error:
Publish Actions
You must publish at least one action to your Timeline using this action type.
So I created a simple page to publish the action (I got the code form: Graph API) and it's this one:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="de-DE" xmlns:fb="https://www.facebook.com/2008/fbml">
<head prefix="og: http://ogp.me/ns# fashion_econtest: http://ogp.me/ns/apps/fashion_econtest#">
<title>Fashion</title>
<meta property="fb:app_id" content="MyAppId" />
<meta property="og:type" content="fashion:contest" />
<meta property="og:title" content="eContest" />
<meta property="og:image" content="The Image" />
<meta property="og:description" content="Registrati e vinci cli accessori più fashion dell'anno!" />
<meta property="og:url" content="MyURL">
<script type="text/javascript">
function postSubscribe(){
FB.api(
'/me/fashion:subscribe',
'post',
{share:'MyUrl'},
function(response){
if(!response){
alert('Error');
}else if(response.error) {
alert(response.error.message);
}else{
alert('Subscribe was successful! Action ID: ' + response.id);
}
});
}
</script>
</head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function(){
FB.init({
appId : 'MyAppId', // App ID
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};
// 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/it_IT/all.js";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));
</script>
<h3>Fashion</h3>
<p>
<img title="Vinci i premi più Fashion!" src="http://xxxxxx.de/img/yyyyyy.jpg" width="550"/>
</p>
<br>
<form>
<input type="button" value="Subscribe" onclick="postSubscribe();" />
</form>
</body>
But once I send the Request, I get the follwonig Error:
An active access token must be used to query information about the current user.
How can I get the Access Token with Java Script FB-API dynamically and make this working?
Many Thanks for your help!!
Amin
Facebook exchanges access_tokens automatically based on your application Id. I think you are looking for getting the currently active access_token using FB API methods.
Try FB.getLoginStatus API call. For more details see...
http://developers.facebook.com/docs/reference/javascript/FB.getLoginStatus/
Call FB.login first, and ask for the appropriate permission (publish_actions).
(Or just do the whole things using the Graph API explorer instead of writing a script for something you’ll only need once.)