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?
Related
I'm unable to get one of my functions to work. My assumption is that there is a 'scope' issue due to the fact the function works when used in the same file it modifies. Anyway here is the function and fiddle.
The function as the title suggests should replace text on hover and 'off-hover' put the original text back. The code snippet below works, but when used as I'm trying to(fiddle) it does not work.
http://jsfiddle.net/s4q8bva6/3/
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
01 - System Overview and System Manager
<script>
$("a.open").hover(
function() {
var $this = $(this);
$this.data('initialText', $this.text());
$this.text("Click to return to previous page");
},
function() {
var $this = $(this); // caching $(this)
$this.text($this.data('initialText'));
}
);
</script>
</body>
</html>
EDITS:Update
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>PHP File Tree Demo</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<link href="styles/default/default.css" rel="stylesheet" type="text/css" media="screen" />
<!-- Makes the file tree(s) expand/collapsae dynamically -->
<script src="php_file_tree.js" type="text/javascript"></script>
<script src="jquery-1.11.3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<h1>File Tree </h1>
<h2>Browsing Training Videos...</h2>
<?php
//This links the user to http://example.com/?file=filename.ext
//echo php_file_tree('Training/', "http://example.com/?file=[link]/");
include("php_file_tree.php");
// This links the user to http://example.com/?file=filename.ext and only shows image files
$allowed_extensions = array("htm");
echo php_file_tree("Training/", "http://URL/files/[link]", $allowed_extensions);
echo "This is a TEST";
// This displays a JavaScript alert stating which file the user clicked on
//echo php_file_tree("demo/", "javascript:alert('You clicked on [link]');");
?>
<!-- This function collapses the li under an open li-->
<!-- Togles all 'Other' Top Level il elements on click-->
<script>
$(document).ready(function () {
var col = 2
$(".pft-directory").click(function () {
$(".pft-directory").toggle("fast");
$(this).toggle("fast");
if (col > 1) {
$(".php-file-tree").css("columns", "1", "-webkit-columns", "1");
col = 1;
} else {
$(".php-file-tree").css("columns", "2", "-webkit-columns", "2");
col = 2;
}
});
$(".open").hover(function () {
var $this = $(this);
$this.data('initial-text', $this.text());
$this.text("Click to return to previous page");
},
function () {
var $this = $(this); // caching $(this)
$this.text($this.data('initial-text'));
});
});
</script>
</body>
</html>
I'm new to backboneJS so i have a problem sync the data from PHP server with backbone that i dont even get the json data from the php server to backbone model!Help me
Here is my php code
$data = array('1'=>array('id'=> 1, 'description'=>'Pick up milk', 'status'=> 'incomplete' ));
echo json_encode($data);
and the backbone js code
<html>
<head>
<script src="jquery-1.9.0.min.js" type="text/javascript"></script>
<script src="underscore-min.js" type="text/javascript"></script>
<script src="backbone.js" type="text/javascript"></script>
</head>
<script type="text/javascript">
var TodoItem = Backbone.Model.extend({});
var todoItem = new TodoItem();
todoItem.url = '/backboneJS/todo.php';
console.log(todoItem.fetch());
</script>
<body>
</body>
</html>
I cant get the json data from the php to the backbone.What wrong with my code ?
<!doctype html>
<html>
<head>
<script src="http://code.jquery.com/jquery-2.0.3.min.js" type="text/javascript"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.1/underscore-min.js" type="text/javascript"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min.js" type="text/javascript"></script>
</head>
<body>
</body>
<script type="text/javascript">
var TodoModel = Backbone.Model.extend({
urlRoot: '/backboneJS/todo.php',
initialize: function(){
// Place init message or else
}
});
var todoItem = new TodoModel();
todoItem.fetch({
success: function(todoResult){
console.log(todoResult);
console.log(todoItem.get(1));
}
});
</script>
</html>
Sticking to design pattern also, if you call your todoItem outside of nested function its likely to be executed before the actual fetch() is performed. Tested locally.
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;
});
I have trawled the net and Stack Overflow and have not found an adequate answer to this question. Before I start the trial and error process of finding my own solution, I thought I would turn to the Stack Overflow braintrust and see if there was already a successful implementation.
I have an AJAX powered page that degrades properly for non-javascript browsers and SEO. Each click in the AJAX version can be represented by a unique URL.
What I want to do is to dynamically change the HREF of the button. I do understand that this tag is converted to standard HTML at runtime (namely into a nasty table / iframe layout).
I was just wondering if anyone had any insight as to how to implement this FB like button onto AJAX powered pages?
Cheers in advance :)
EDIT:
What do you think of this method I just hacked together? See any huge problems with it?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="JS/jquery/jquery.js" type="text/javascript"></script>
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<script language="javascript" type="text/javascript">
$("document").ready
(
function ()
{
CreateNewLikeButton("http://www.yahoo.com")
$("a#ChangeToGoogle").click
(
function (e)
{
e.preventDefault();
CreateNewLikeButton("http://www.google.ca")
}
);
}
);
function CreateNewLikeButton(url)
{
var elem = $(document.createElement("fb:like"));
elem.attr("href", url);
$("div#Container").empty().append(elem);
FB.XFBML.parse($("div#Container").get(0));
}
</script>
</head>
<body>
<form id="form1" runat="server">
<a id="ChangeToGoogle" href="#">Change To Google</a>
<div id="Container">
<fb:like href="http://www.NEVER_LINK_TO_THIS_12345.com"></fb:like>
</div>
</form>
</body>
</html>
SIMPLE SOLUTION
Just parse trigger the parse function when load complete.
If you’re using jQuery, there’s a real easy and slick solution to this problem:
$(document).ajaxComplete(function(){
try{
FB.XFBML.parse();
}catch(ex){}
});
http://developers.facebook.com/docs/reference/plugins/like/
This is the solution I ended up going with:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="JS/jquery/jquery.js" type="text/javascript"></script>
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<script language="javascript" type="text/javascript">
$("document").ready
(
function ()
{
CreateNewLikeButton("http://www.yahoo.com")
$("#ChangeToGoogle").click
(
function (e)
{
e.preventDefault();
CreateNewLikeButton("http://www.google.ca")
}
);
}
);
function CreateNewLikeButton(url)
{
var elem = $(document.createElement("fb:like"));
elem.attr("href", url);
$("#Container").empty().append(elem);
FB.XFBML.parse($("#Container").get(0));
}
</script>
</head>
<body>
<form id="form1" runat="server">
<a id="ChangeToGoogle" href="#">Change To Google</a>
<div id="Container">
<fb:like href="http://www.NEVER_LINK_TO_THIS_12345.com"></fb:like>
</div>
</form>
</body>
</html>
You're making this hard on yourself - just render a new iframe-based one.
<html>
<head>
<title>Test Page</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(function()
{
$( '#ChangeToGoogle' ).click( function( event )
{
event.preventDefault();
$( '#Container' ).empty().append( $('<iframe />')
.attr( 'src', 'http://www.facebook.com/plugins/like.php?href=www.google.com&layout=standard&show_faces=true&width=450&action=like&colorscheme=light&height=80' )
.attr( 'scrolling', 'no' )
.attr( 'frameborder', 'no' )
.attr( 'style', 'border:none; overflow:hidden; width:450px; height:80px;' )
.attr( 'allowTransparency', 'true' )
);
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<a id="ChangeToGoogle" href="#">Change To Google</a>
<div id="Container">
<iframe src="http://www.facebook.com/plugins/like.php?href=www.yahoo.com&layout=standard&show_faces=true&width=450&action=like&colorscheme=light&height=80"
scrolling="no" frameborder="0"
style="border:none; overflow:hidden; width:450px; height:80px;"
allowTransparency="true">
</iframe>
</div>
</form>
</body>
This is how I handled this situation when I ran into it - seems to work well.
// Set Facebook Like Button with jQuery
setFBLikeButtons = function (container,url,send,layout,width,show_faces,font) {
// Set Default Args
if(!send) { send = "false"; }
if(!layout) { layout = "button_count"; }
if(!width) { width = "100"; }
if(!show_faces) { show_faces = "false"; }
if(!font) { font = "arial"; }
$(container).empty(); // Remove current like button
$(container).html('<fb:like href="'+url+'" send="'+send+'"
layout="'+layout+'" width="'+width+'" show_faces="'+show_faces+'"
font="'+font+'"></fb:like>');
FB.XFBML.parse(); // This is the magical syrup
}
create like button
<head>
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<script>
window.onload = function(){
var divs = document.getElementsByTagName("span");
for(var i=0; i<divs.length i++){
if(divs[i].className == "likes"){
if(divs[i].title){ var Href = divs[i].title; }else{ var Href = window.location; }
var fb_like = document.createElement("fb:like");
fb_like.setAttribute("href", Href);
fb_like.setAttribute("layout", "box_count");
fb_like.setAttribute("show_faces", "false");
fb_like.setAttribute("width", "55");
document.getElementById("likes2").appendChild(fb_like);
}
}
}
</script>
</head>
<body>
<span class="likes" title="www.bzzs.me"></span>
</body>
Load it after the window loads, this is what works for me:
$(window).load(function(){
$.getScript('http://connect.facebook.net/en_US/all.js', function() {
try{
FB.XFBML.parse();
} catch(ex) {}
});
});
If you're using the jQuery Mobile framework you can run the same code as the accepted answer in the pagecontainershow event which jQuery Mobile uses when it displays a new page.
// initialize new pages
$(document).on("pagecontainershow", (e, ui) =>
{
try
{
FB.XFBML.parse();
} catch (ex) { }
});
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.