I was wondering, I wish to have a landing page with Facebook's Open Graph (specifically the like button) and I wanted to basically have content set to display:none (can't remember the specific until a user likes a page. An example being a div on an e-commerce store that when a user likes the page, the div is set to display:block and users can redeem a coupon code for discount.
I would like to be able to do this with div displays.
I saw this little snippet of code on the Facebook developers forum:
| ( taken from http://fbrell.com/xfbml/fb:like )
(Note: The event that's fired when you click "like")
<script>
// this will fire when any of the like widgets are "liked" by the user
FB.Event.subscribe('edge.create', function(href, widget) {
Log.info('You liked ' + href, widget);
});
</script>
Can this be modified to effective set a div from display:none to display:block?
Thank you SO.
If you specifically want to update your div to display:block, use...
<script>
// this will fire when any of the like widgets are "liked" by the user
FB.Event.subscribe('edge.create', function(href, widget) {
$('#divid').css('display','block');
});
</script>
One caveat...
Your edge.create event WON'T fire unless the URL you use as part of your call is EXACTLY the same as the URL you're attempting to fire this from.
I had a site I was running on example.DEV (my local laptop dev env) which referenced a link on example.com (the live server) and anything in the FB.Event.subscribe() block wouldn't run until I uploaded the file, and fired it from the LIVE server.
That could be why you're having trouble if it's not working so far!
I found the following solution, but you will need jQuery to do it. (possibly not, but that's what I used to do it).
Here is the code:
<!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" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="facebook.js"></script>
<script src="jquery.min.js" type="text/javascript"></script>
</head>
<body>
<div id="fb-root"></div>
<script type="text/javascript">
<!--
window.fbAsyncInit = function() {
FB.init({appId: '133387220039676', status: true, cookie: true, xfbml: true});
FB.Event.subscribe('edge.create', function(href, widget) {
// Do something, e.g. track the click on the "Like" button here
$('#slidingDiv').show();
});
};
(function() {
var e = document.createElement('script');
e.type = 'text/javascript';
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
//-->
</script>
<fb:like href="http://www.facebook.com/TheRightMind" layout="standard" show-faces="false" width="450" action="like" colorscheme="light"></fb:like>
<div id="slidingDiv" style="display:none;">
Fill this space with really interesting content that you can
</div>
</body>
</html>
Just replace the Log.info() call with JavaScript that displays the div. In jQuery:
<script>
// this will fire when any of the like widgets are "liked" by the user
FB.Event.subscribe('edge.create', function(href, widget) {
$('#yourdiv').show();
});
</script>
After verifying that liking the page will trigger that code (try console.log("AOK!")), you can make a <div> appear using this code:
Plain Old JavaScript:
FB.Event.subscribe('edge.create', function(href, widget) {
document.getElementById("topsecret").style.display = "block";
});
The HTML:
<div id="topsecret" style="display:none;">
Content Goes Here
</div>
If you're using the jQuery library or something similar, you can use a show() function to make the box appear instead:
FB.Event.subscribe('edge.create', function(href, widget) {
$("#topsecret").show();
//$("#topsecret").slideDown("fast");
//$("#topsecret").fadeIn("fast");
});
You might also consider using an AJAX load command instead, because otherwise it's fairly easy to make the box appear when the content is only hidden.
FB.Event.subscribe('edge.create', function(href, widget) {
$("#topsecret").load("mycontent.html");
});
Related
Wonder if anyone can help. See attached code below:
If I launch a Web Intent via a normal "a href", and then tweet I get the callback. Lovely.
If, however, I launch a Web Intent via a window.open, say from a button click, I don't. See code below.
I could, trap the button click, and then call click on the "a href". At this point, I do then get the callback. However, this action in some browsers (e.g. Safari) gets caught in the pop-up blocker, so no-one sees the popup. Which is a bit useless.
I would like to use the window.open approach, and get the callback. Any thoughts anyone?
<!doctype html>
<html lang="en">
<head lang=en>
<meta charset="utf-8">
<title>Web Intent t3 Experiment</title>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="https://platform.twitter.com/widgets.js" type="text/javascript"> </script>
</head>
<body>
Option 1: Tweet via Link<br />
<button id="tf_sendtweet_button">Option 2: Tweet Via Button and JS</button>
<script type="text/javascript">
var t_element = d3.select("#tf_sendtweet_button");
t_element.on("click", function() {
_text = "Some compelling text to go in a tweet";
_url = "http://www.google.com/";
var tweet_url = 'https://twitter.com/intent/tweet?text=';
tweet_url += encodeURIComponent(_text);
tweet_url += '&url=' + encodeURIComponent(_url);
window.open(tweet_url,'_blank');
});
// Here, trap the callback from the WebIntent.
twttr.ready(function (twttr) {
// bind events here
twttr.events.bind('tweet', function (event) {
alert("Yay, tweet callback baby. Gotcha.");
console.log(new Date(), "Sweett, tweet callback: ", event);
});
});
</script>
</body>
</html>
Ok, everyone stand easy. It's been answered by a Twitter employee:
Unfortunately you can’t use the callback events features without letting our javascript control the window opening.
https://twittercommunity.com/t/get-web-intent-callback-from-a-window-open-call/20881
I've got the problem.
I need to open the js file while clicking on text which.
I've got:
<script src="http://www.domain.com/file.js" type="text/javascript"></script>
And when I click the image which appears the js script is executed and im rediredted to http://www.domain.com/.
so
clicked on js -> js script executed -> redirected to url(its scripted in js file to make it)
Now I want to make it want to do it without image only with text
so
clicked on text -> js script executed from http://www.domain.com/file.js -> redirected.
I tried to do it like:
text
but it not working propertly:
clicked on text -> redirected to http://www.domain.com/file.js adress -> clicked to execute js -> redirected
Please help me.
use jquery
<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\">
<head>
<title>YOUR_SITE</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<a id='test' href="#">text</a>
<script>
$(document).ready(function() {
$('#test').live('click', function()
{
$.getScript('your_script_file.js', function() {
alert('Load was performed.');
});
});
});
link for jquery http://jquery.com/
If I understood you correctly, you wan to execute some JavaScript when the user clicks on some text.
Wrap the JS in a function, in my example I will call it doSomething().
JS:
function doSomething() {
// your JS (this can be in another file too)
}
HTML:
<span onclick="doSomething()">text</span>
OR:
text
I have a single page jQuery Mobile app with four "data-role='pages'" in place; so, essentially, it's one HTML doc with four "pages."
Each "page" also has a navigation footer that I am populating dynamically through javascript. I defined a variable called "theFooter," and assigned all my empty footer divs (with classes of "footer") like so:
$('.footer').html(theFooter);
Now, in order to get this to work properly, I have to populate those footers PRIOR to the page being created, otherwise jQuery Mobile won't apply it framework to make the footer bar look like a mobile app nav bar.
So I achieve that through this:
$( "div[data-role='page']").live('pagebeforecreate', function (evt) {
console.log("BEFORE CREATE run."); //writes to my fireBug console to alert me that the 'page' has been run
$('.footer').html(theFooter);
});
It works like a dream, the first time around. Let's suppose the pages are "about," "contact," "mission," and "calendar"…
You click "about"… perfect.
You click "contact".. perfect.
You can do this for each of the "pages," and each time the "pagebeforecreate" is fired and the footer looks GREAT.
HOWEVER, if now you click on, say, "about" again (or any of the ones that you've already visited), the page transitions and the content is in place, but there is NO JQUERY MOBILE FORMATTING. And it is not firing the 'pagebeforecreate' function again, which makes sense, because it has already been created the first time.
I've tried working with 'pageinit' and 'pagebeforeshow' firings, but have gotten nowhere.
I have tried .trigger() and .page() methods… and got nowhere.
Can someone explain exactly how to make that JQuery Mobile formatting stick?
If you call .trigger('create') on the parent element of the widget you can enhance it's markup at any point in time:
$( "div[data-role='page']").live('pagebeforecreate', function (evt) {
console.log("BEFORE CREATE run."); //writes to my fireBug console to alert me that the 'page' has been run
$('.footer').html(theFooter).trigger('create');
});
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,height=device-height,user-scalable=no,initial-scale=1.0"/>
<link rel="stylesheet" href="jquery.mobile-1.0.1.css" />
<title> Hello World </title>
<script src="jquery.js"></script>
<script src="jquery.mobile-1.0.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
$('#omtList').html('<ul data-role="listview" data-split-icon="delete" data-split-theme="d"> <li><h3>Broken Bells</h3><p>Broken Bells</p>Purchase album </ul>').trigger('create');
});
</script>
</head>
<body>
omt
<div>
<div id="omtList">
</div><!--/content-primary -->
</body>
</html>
I have one page where I am using tag. As a source of this iframe I am passing one external webapp. Now when this app is loading, in its home page it has code which checks whether the app is loading inside frame or in parent window. If it is not in parent window then it is getting the refrence to parent window and change the location in such a way that it display itself in parent window.
Now I dont have control over this web app so I cannnot change it's home page, is there any workaround where I can stop this application to change it's parent window location. Here is the sample code I am using. I cannot give the url of the internal webapp. Before I see the alter msg "test", webapp is changing the location of the parent window.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Example</title>
<style type="text/css">
</style>
<script type="text/javascript">
// <![CDATA[
window.onload = function()
{
alert('test');
//frames["my_iframe"].onload = function()
//{
//alert("hey");
//}
//this also works for me:
document.getElementById("my_iframe").onload = function()
{
alert("hey");
}
}
// ]]>
</script>
</head>
<body>
Testing iframe....<br>
<iframe name="my_iframe" id="my_iframe" src="http://mywebapp.com" width="100%" height="100%" ></iframe>
</body>
</html>
You are trying to do what is referred to as XSS or cross site scripting, and is, for obvious reasons, impossible in any modern browser due to security mechanisms.
This article discuss this question and offers a 'solution', so to speak.
We Done Been ... Framed!
It's actually about avoid been framed (as the webapp you talk about does) but at the end there seems to be a way to frame any page...
Here's my setup. I'm using .NET:
I have a Main.aspx lets call it. That page inherits a master page and the Master Page as usual includes the jQuery library and other includes that we use for jQuery that are global in scope
In Main.aspx is an HTML plain vanilla IFrame:
In that IFrame is another .aspx page. Lets call it for all tense and purposes Sub.aspx
In Sub.aspx I've got the following code:
<!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 id="Head1" runat="server">
<link href="Content/Styles/Site.css" rel="stylesheet" type="text/css" />
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div id="facebookPhotos-iFrameContent">
<div>
<p id="buttoTestContainer">
<input type="image" id="btnLogin" src="images/loginBtn.jpg" />
</p>
</div>
</div>
</form>
<script type="text/javascript">
var loginButtonID = 'btnLogin';
//alert(loginButtonID);
window.fbAsyncInit = function () {
// Initialize/load the JS SDK
// cookie is set to true to activate JS SDK cookie creation & management
FB.init({ appId: facebookApplicationID, status: true, cookie: true, xfbml: false });
alert("got here");
// also handles the case when they are already logged in
$('#' + loginButtonID).click(function () {
alert("login button was fired");
TestLogin();
});
//...rest of code
});
The problem:
When trying to debug to make sure that .click() event gets called so it binds to my control, I never get to the first alert "got here" so that I know the JS was called at least up to that point. So not sure why. I see absolutely no JS errors in my FireBug console either.
Your function never executes. Remove the window.fbAsyncInit = function() { } and the code will run as interpreted. Or, use $(document).ready(function() { }); to execute it after the DOM is ready.
Also, the Javascript libraries in the parent frame are not inherited by the child. But you can reference them like parent.fbAsyncInit = function() { } or parent.jQuery(); for example.
resolved. That init function should be the only thing in there. Moved all other code outside the window.fbAsyncInit because I do not want to load the others asynchronously, I want to load it after the DOM has completed. The only thing that should be loaded at the same time is the registering/Initialization of that SDK.