I need to know whether user liked my facebook page (not in fb app, but on an external website).
I tried to use this snippet:
http://jsfiddle.net/alexgarry/qdfL6/5/
It didnt worked after I copied it to the document.
After my script loads, there appears a new pop upo with an error: "try again".
My code:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<style>
#container_notlike, #container_like {
display:none
}
</style>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId : 'MY_APP_ID',
status : true,
cookie : true,
xfbml : true
});
$(document).ready(function(){
FB.login(function(response) {
if (response.status == 'connected') {
var user_id = response.authResponse.userID;
var page_id = "230305033727799"; // coca cola page https://www.facebook.com/cocacola
var fql_query = "SELECT uid FROM page_fan WHERE page_id="+page_id+" and uid="+user_id;
FB.api({
method: 'fql.query',
query: fql_query
},
function(response){
if (response[0]) {
$("#container_like").show();
} else {
$("#container_notlike").show();
}
}
);
} else {
// user is not logged in
}
});
});
</script>
</head>
<body>
<div id="fb-root"></div>
<div id="container_notlike">
YOU DONT LIKE
</div>
<div id="container_like">
YOU LIKE
</div>
</body>
</html>
any ideas?
Regards.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
#container_notlike, #container_like {
display:none
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
FB.login(function(response) {
if (response.status == 'connected') {
var user_id = response.authResponse.userID;
var page_id = "40796308305";
FB.api('/me/likes/'+page_id, function(response) {
if (response.data[0]) {
$("#container_like").show();
} else {
$("#container_notlike").show();
}
});
} else {
// user is not logged in
}
});
});
</script>
</head>
<body>
<div id="fb-root"></div>
<script src="https://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({appId: 'MY_APP_ID', status: true, cookie: true, xfbml: true});
</script>
<div>
<div id="container_notlike">
YOU DONT LIKE
</div>
<div id="container_like">
YOU LIKE
</div>
</div>
</body>
Replace MY_APP_ID with your APP_ID.
Related
I'm having some difficulty with AngularJS. Any constructive help is greatly appreciated.
This is the Angular code I'm working with
app.controller('customersCtrl', function($scope, $http) {
$scope.element = function(num){
var element_id = num;//num;
$http.get("customers.php",{params:{"id":element_id}}).then(function (response) {
$scope.myData = response.data;
}
,function errorCallback(response){
$scope.e=response.data;
console.log(e);
});
};
});
And here is my php code I'm using. All this does is return the 401 code. The section works as I can return it in a console log.
http_response_code(401);
$message = http_response_code()." No data found";
header('Content-Type: application/json');
echo json_encode($message);
Here is my HTML code
<!DOCTYPE html>
<html>
<head>
<title>page2</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"> </script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
<script src = "javascript.js"></script>
</head>
<body ng-app="input">
<div ng-controller="customersCtrl">
<h1>Click on the contact name for company and location</h1>
<br>
<button ng-click="element(0)">Bob</button>
<button ng-click="element(1)">Jim</button>
<button ng-click="element(2)">Kim</button>
<br>
<br>
<ul>
<li ng-repeat="x in myData">
{{x}}
</li>
</ul>
<div ng-show="error != null">
<p>{{e.error}}</p>
</div>
</div>
View full list
</body>
</html>
I'm having a problem displaying the 401 message in the HTML page. What is a good way of doing this? The code will return the message but only as a console log. I need it in a HTML page. I'm quite confused on this one as I've tried multiple ways and none of them are working. Any help would be greatly appreciated
Thank you in advance!!!
Hey Man try that below:
$scope.e = '';
$scope.myData = [];
$scope.element = function(element_id){
$http({
method: 'GET',
url: "customers.php?id=" + element_id,
headers: {
'Content-Type': 'application/json'
}
})
.then(
function successCallback(response) {
$scope.myData = response.data;
callback(response);
},
function errorCallback(response) {
$scope.e = response.data;
callback(response);
}
);
}
Check on browser the network, and if no work, plz upload the network with log to "customers.php"
Best Wishes
I have a list of rows from mysql table, each contains : a href tag, whose value is varying based on id like : href="123.php?id=sbsbd". I coded a jquery dialog, with 2 buttons - YES / NO. Upon, YES, I want to proceed with redirection request, from that particular a href link. Any guesses, how this can be done ?
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script
src="https://code.jquery.com/jquery-3.1.0.js"
integrity="sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk="
crossorigin="anonymous">
</script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
////////////////////////// 001 //////////////////////////
$("#proceed").dialog({
autoOpen: false,
buttons : {
"Yes": function(){
// stuck here
// need to go to URL in ahref = "123.php?id=sbsbd";
// id value keeps changing
},
"No": function(){
$(this).dialog("close")
}
}
});
//////////////////////// 002 ///////////////////////////
$("a").click(function(){
//$("#proceed").css("display", "block !important");
$("#proceed").dialog("open");
return false;
}); // click-function ends
}); // document.ready function-ends
</script>
</head>
<body>
Click for confirmation!
<div id="proceed" title="Delete this Slide-Image" style="display:none">
<p>Slide-Image will be deleted permanently from Homepage and from Server, too. Ok ?</p>
</div>
</body>
</html>
create the global access variable and set the href value to that variable when on click and use it to redirect.
<script type="text/javascript">
$(document).ready(function(e) {
////////////////////////// 001 //////////////////////////
$("#proceed").dialog({
autoOpen: false,
buttons : {
"Yes": function(){
alert(url);
window.location.href = url;
//here you can use that variable
},
"No": function(){
$(this).dialog("close")
}
}
});
var url ='';
$("a").click(function(){
$("#proceed").dialog("open");
url = $(this).attr('href');
//asign the clicked url into this url variable
return false;
});
});
</script
I've made a site from an youtube tutorial. Here's my test site. And
here's the tutorial (final step of 3) if it helps. No CSS used yet.
When I click a link in the menu. Everything fades like supposed. But at the end of fade animation the previous page flickers.
Me
I'm totally new to JavaScript.
index.php:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>SuperFresh</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<a class="menu_top" href="pages/home.php">Home</a> /
<a class="menu_top" href="pages/portfolio.php">Portfolio</a> /
<a class="menu_top" href="pages/contact.php">Contact</a> /
<div id="content_area"></div>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="js/nav.js"></script>
</body>
</html>
nav.js:
$(document).ready(function () {
$('#content_area').load($('.menu_top:first').attr('href'));
});
$('.menu_top').click(function () {
var href=$(this).attr('href');
$('#content_area').hide('slow').load(href).fadeIn('slow');
return false;
});
Replace:
var href=$(this).attr('href');
$('#content_area').hide('slow').load(href).fadeIn('slow');
With:
$('#content_area').hide('slow', function(){
$(this).load($(this).attr('href')).fadeIn('slow');
});
This will fade it out and wait until the animation is complete before calling that function and loading in the new content.
Check out the documentation for more info.
you can use handlers with your own functions...
for ex :
$('#show').click(function() {
$('#myDiv').show(0, onDivShow);
});
$('#hide').click(function() {
$('#myDiv').hide(0, onDivHide);
});
function onDivShow() { alert('is shown'); }
function onDivHide() { alert('is hidden'); }
You can try this:
$('.menu_top').click(function () {
var href=$(this).attr('href');
var page = $('<div/>').attr('id','page').load(href);
$('#content_area').fadeOut('slow').html('').html(page).fadeIn('slow');
return false;
});
In My Project I am having some javascript to implement my work, but it is not taking when I am starting the page,but it is working after reloading the page.
Here is the code:
<?php
require_once"session.php";
$slat =$_GET['slat'];
$slang =$_GET['slang'];
$elat =$_GET['elat'];
$elang =$_GET['elang'];
?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<?php require_once"header.php";?>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<title>Near My Location Contacts</title>
<script src="http://maps.google.com/maps/api/js?sensor=false"
type="text/javascript"></script>
<script type="text/javascript">
/* function refreshPage() {
alert('dfg');
window.location.href,
{
allowSamePageTransition : true,
transition : 'none',
showLoadMsg : false,
reloadPage : true
}
}
refreshPage();*/
//<![CDATA[
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
//var haight = new google.maps.LatLng(37.7699298, -122.4469157);
//var oceanBeach = new google.maps.LatLng(37.7683909618184, -122.51089453697205);
var haight = new google.maps.LatLng(<?php echo $slat;?>,<?php echo $slang;?>);
var oceanBeach = new google.maps.LatLng(<?php echo $elat;?>,<?php echo $elang;?>);
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var mapOptions = {
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: haight
}
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById("directionsPanel"));
}
function calcRoute() {
var request = {
origin:haight,
destination:oceanBeach,
travelMode: google.maps.TravelMode.DRIVING,
unitSystem: google.maps.UnitSystem.METRIC
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
}
//]]>
</script>
</head>
<body style="margin:0px; padding:0px;" onload="initialize();calcRoute()">
<div data-role=page id=nmContacts >
<div data-role=header data-theme="e" >
Back</font>
<h1 align="left"><font size="2px">Near My Contacts</font></h1>
</div>
<div data-role=content style="width:100%;height:100%;">
<div data-role=content id="map_canvas" style="width:95%; height:300px"></div>
<div id="directionsPanel" style="width:97%;height 100%"></div>
</div>
</body>
</html>
In the above I am having body onload it is not working at the first time after refreshing only it is working.
Here is the answer:
Before You are calling to this page You have to specify in href like the following
assume that you are having the following link to load:
sample
here `href="external" You have to specify otherwise it wont work.....
I created a facebook app and the login loads but once it does that I get a blank screen. Its seems like my swf is not loading at all. This is my index.php file:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<!-- Include support librarys first -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
var APP_ID = "my_id";
var REDIRECT_URI = "my_url";
var PERMS = "publish_stream, user_photos"; //comma separated list of extended permissions
function init()
{
FB.init({appId:APP_ID, status: true, cookie: true});
FB.getLoginStatus(handleLoginStatus);
}
function handleLoginStatus(response)
{
if (response.session) { //Show the SWF
swfobject.embedSWF("main.swf", "flashContent", "640", "480", "9.0", null, null, null, {name:"flashContent"});
} else { //ask the user to login
var params = window.location.toString().slice(window.location.toString().indexOf('?'));
top.location = 'https://graph.facebook.com/oauth/authorize?client_id='+APP_ID+'&scope='+PERMS+'&redirect_uri=' + REDIRECT_URI + params;
}
}
$(init);
</script>
</head>
<body>
<div id="fb-root"></div>
<div id="ConnectDemo"></div>
</body>
</html>
Is there any reason why this wouldnt work?
The second parameter to the swfobject.embedSWF needs to be the id of the element to which you are injecting the SWF. You use flashContent which doesn't exist in your DOM?