I want this simple javascript to display live data from the Cryptsy market. In the fiddle, it works fine, but when I deploy it live, it does not display. I'm new to javascript and coding-beyond-html in general, so I'll greatly appreciate any help!
Deployed: http://bytillionaire.com/HTMLCoin.com/index.html
Fiddle: http://jsfiddle.net/bitillionaire/5fub4mvf/2/
code here:
<head>
<script type='text/javascript'>
//<![CDATA[
$(window).load(function() {
$(function() {
startRefresh();
});
function startRefresh() {
setTimeout(startRefresh, 10000);
var url = 'http://pubapi.cryptsy.com/api.php?method=singlemarketdata&marketid=458';
$.getJSON('http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20json%20where%20url%3D%22' + encodeURIComponent(url) + '%22&format=json', function(data) {
jQuery('#ticker').html(data['query'].results.json.return.markets.HTML5.lasttradeprice);
jQuery('#ticker').append(' ' + data['query'].results.json.return.markets.HTML5.secondarycode);
});
}
}); //]]>
</script>
</head>
<body>
<div id="navigation">
Follow #htmlcoin
<script>
! function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0],
p = /^http:/.test(d.location) ? 'http' : 'https';
if (!d.getElementById(id)) {
js = d.createElement(s);
js.id = id;
js.src = p + '://platform.twitter.com/widgets.js';
fjs.parentNode.insertBefore(js, fjs);
}
}(document, 'script', 'twitter-wjs');
</script>
<div id="ticker"></div>
</div>
</body>
I see an error at your site in console Uncaught ReferenceError: $ is not defined
it looks like jQuery is not defined
You haven't included jQuery on your page!
You dont have jQuery in your webpage.
Add this in the of your HTML code and it should be before other scripts:
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Source
Make sure to always have a copy of jquery.js in your javascript folder and to call it!
In
<script src="js/jquery.js"></script>
This will ensure that jquery functions are able to run.
Related
I just created an app on facebook to use Audience Network. I want to monetize my website. I placed the code on my site exactly as it appears in the github docs for banner display ads.
I included the SDK in the page exactly as it appears in this doc (replaced with my APP ID)
https://developers.facebook.com/docs/javascript/quickstart
And the code I'm using for the ad placement is taken exactly from facebook's github repo.
When I load the page I get an error in the console:
"Audience Network error (1003) SDK version not supported". No ads are showing up.
Made a little test page so you guys can see what I'm talking about. Notice how the like and share buttons work (meaning the SDK works correctly if I'm not mistaken?)
https://somiibo.com/app/ads/sidebar/ad1.html
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '1490948314307293',
xfbml : true,
version : 'v2.10'
});
FB.AppEvents.logPageView();
};
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div
class="fb-like"
data-share="true"
data-width="450"
data-show-faces="true">
</div>
<h3>Facebook Audience Network for Mobile Web</h3>
<hr/>
<h3>Banner Demo (300 x 250)</h3>
<br/>
<div style="display:none; position: relative;">
<iframe style="display:none;"></iframe>
<script type="text/javascript">
var data = {
placementid: '1490948314307293_1490949464307178',
format: '300x250',
testmode: false,
onAdLoaded: function(element) {
console.log('Audience Network ad loaded');
element.style.display = 'block';
},
onAdError: function(errorCode, errorMessage) {
console.log('Audience Network error (' + errorCode + ') ' + errorMessage);
}
};
(function(w,l,d,t){var a=t();var b=d.currentScript||(function(){var c=d.getElementsByTagName('script');return c[c.length-1];})();var e=b.parentElement;e.dataset.placementid=data.placementid;var f=function(v){try{return v.document.referrer;}catch(e){}return'';};var g=function(h){var i=h.indexOf('/',h.indexOf('://')+3);if(i===-1){return h;}return h.substring(0,i);};var j=[l.href];var k=false;var m=false;if(w!==w.parent){var n;var o=w;while(o!==n){var h;try{m=m||(o.$sf&&o.$sf.ext);h=o.location.href;}catch(e){k=true;}j.push(h||f(n));n=o;o=o.parent;}}var p=l.ancestorOrigins;if(p){if(p.length>0){data.domain=p[p.length-1];}else{data.domain=g(j[j.length-1]);}}data.url=j[j.length-1];data.channel=g(j[0]);data.width=screen.width;data.height=screen.height;data.pixelratio=w.devicePixelRatio;data.placementindex=w.ADNW&&w.ADNW.Ads?w.ADNW.Ads.length:0;data.crossdomain=k;data.safeframe=!!m;var q={};q.iframe=e.firstElementChild;var r='https://www.facebook.com/audiencenetwork/web/?sdk=5.3';for(var s in data){q[s]=data[s];if(typeof(data[s])!=='function'){r+='&'+s+'='+encodeURIComponent(data[s]);}}q.iframe.src=r;q.tagJsInitTime=a;q.rootElement=e;q.events=[];w.addEventListener('message',function(u){if(u.source!==q.iframe.contentWindow){return;}u.data.receivedTimestamp=t();if(this.sdkEventHandler){this.sdkEventHandler(u.data);}else{this.events.push(u.data);}}.bind(q),false);q.tagJsIframeAppendedTime=t();w.ADNW=w.ADNW||{};w.ADNW.Ads=w.ADNW.Ads||[];w.ADNW.Ads.push(q);w.ADNW.init&&w.ADNW.init(q);})(window,location,document,Date.now||function(){return+new Date;});
</script>
<script type="text/javascript" src="https://connect.facebook.net/en_US/fbadnw.js" async></script>
</div>
<hr/>
<h3>Banner Demo (320 x 50)</h3>
<br/>
<div style="display:none; position: relative;">
<iframe style="display:none;"></iframe>
<script type="text/javascript">
var data = {
placementid: '1490948314307293_1490949464307178',
format: '320x50',
testmode: false,
onAdLoaded: function(element) {
console.log('Audience Network ad loaded');
element.style.display = 'block';
},
onAdError: function(errorCode, errorMessage) {
console.log('Audience Network error (' + errorCode + ') ' + errorMessage);
}
};
(function(w,l,d,t){var a=t();var b=d.currentScript||(function(){var c=d.getElementsByTagName('script');return c[c.length-1];})();var e=b.parentElement;e.dataset.placementid=data.placementid;var f=function(v){try{return v.document.referrer;}catch(e){}return'';};var g=function(h){var i=h.indexOf('/',h.indexOf('://')+3);if(i===-1){return h;}return h.substring(0,i);};var j=[l.href];var k=false;var m=false;if(w!==w.parent){var n;var o=w;while(o!==n){var h;try{m=m||(o.$sf&&o.$sf.ext);h=o.location.href;}catch(e){k=true;}j.push(h||f(n));n=o;o=o.parent;}}var p=l.ancestorOrigins;if(p){if(p.length>0){data.domain=p[p.length-1];}else{data.domain=g(j[j.length-1]);}}data.url=j[j.length-1];data.channel=g(j[0]);data.width=screen.width;data.height=screen.height;data.pixelratio=w.devicePixelRatio;data.placementindex=w.ADNW&&w.ADNW.Ads?w.ADNW.Ads.length:0;data.crossdomain=k;data.safeframe=!!m;var q={};q.iframe=e.firstElementChild;var r='https://www.facebook.com/audiencenetwork/web/?sdk=5.3';for(var s in data){q[s]=data[s];if(typeof(data[s])!=='function'){r+='&'+s+'='+encodeURIComponent(data[s]);}}q.iframe.src=r;q.tagJsInitTime=a;q.rootElement=e;q.events=[];w.addEventListener('message',function(u){if(u.source!==q.iframe.contentWindow){return;}u.data.receivedTimestamp=t();if(this.sdkEventHandler){this.sdkEventHandler(u.data);}else{this.events.push(u.data);}}.bind(q),false);q.tagJsIframeAppendedTime=t();w.ADNW=w.ADNW||{};w.ADNW.Ads=w.ADNW.Ads||[];w.ADNW.Ads.push(q);w.ADNW.init&&w.ADNW.init(q);})(window,location,document,Date.now||function(){return+new Date;});
</script>
<script type="text/javascript" src="https://connect.facebook.net/en_US/fbadnw.js" async></script>
</div>
You can replace sdk https://www.facebook.com/audiencenetwork/web/?sdk=5.3 to https://www.facebook.com/audiencenetwork/web/?sdk=5.5
I hope I can help you.
I'm trying to post multiple facebook post on a page by using jQuery. So far I am getting success to post first facebook post but not able to post another.
What is happening?
facebook post embed url is
<div id="fb-root">
</div><script>
(function(d, s, id)
{
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s);
js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.3";
fjs.parentNode.insertBefore(js, fjs);
}
(document, 'script', 'facebook-jssdk'));
</script>
<div class="fb-post" data-href="https://www.facebook.com/ClashofClans/posts/1104473549576967:0" data-width="500">
<div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/ClashofClans/posts/1104473549576967:0">
<p>The update is finally here!!! Maintenance will start soon! Read all that's new: http://supr.cl/UpdateNotes
</p>
Posted by
Clash of Clans on
Wednesday, July 1, 2015
</blockquote>
</div>
</div>
When I append this URL directly to DIV, it calls an iframe and then complete facebook post data binds on DOM. It works very well but next time Iframe is not loading on the DOM. In console first time I found an APP error ie Invalid App Id: Must be a number or numeric string representing the application id.. I tried with correct AppId but not succeed. Below is my code what I've tried so far
$("input").blur(function ()
{
$('div').html($(this).val());
//$(this).val() is facebook post URL shown above
})
Will anyone please suggest me the correct way of doing that ?
Use the following code. It factors when the code is loaded. The answer was created using this source Working with asynchronously loaded javascript You can wrap the getLoginStatus call in a loop if you will.
<!DOCTYPE HTML>
<html>
<head>
<title></title>
<script src="jquery-1.11.1.min.js"></script>
</head>
<body>
<input type="text" id="message" />
<input type="button" id="send" value="Send" />
<script>
$(document).ready(function(){
function facebookReady() {
FB.init({
appId : '1521775134725984',
xfbml : true,
status : true,
cookie : true,
version : 'v2.1'
});
$(document).trigger("facebook:ready");
}
if(window.FB) {
facebookReady();
} else {
window.fbAsyncInit = facebookReady;
}
});
$(document).on("facebook:ready", function() {
$("#send").on("click", function() {
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
var body = $("#message").val();
FB.api('/me/feed', 'post', { message: body }, function(response) {
if (!response || response.error) {
alert('Error occured');
} else {
alert('Post ID: ' + response.id);
}
});
}
else {
FB.login(function(){
}, {scope: 'publish_actions'});
}
});
});
});
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
</body>
</html>
I need to execute javascript code after the facebook comments plugin is properly rendered on the page (basically I need to get the #content's height)
Comments placement somewhere in the content:
<div id="content">
<fb:comments href="http://domain.com/somelink.php" num_posts="25" width="728"></fb:comments>
</div>
Facebook init at the bottom of the page:
<div id="fb-root"></div>
<script>
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&appId=<?=MY_FACEBOOK_APP_ID?>&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
I tried this:
FB.Event.subscribe("xfbml.render", function(response) {
console.log($('#content').height());
});
...but got this error:
Uncaught ReferenceError: FB is not defined
Any ideas? Thanks!
I have a sample code:
<html xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<script language="javascript" type="text/javascript">
window.checkDoesLike = function() {
FB.api({ method: 'pages.isFan', page_id: '40796308305' }, function(resp) {
if (resp) {
alert("You have like this pages");
} else {
//<![CDATA[
document.write('<fb:like href="http://www.facebook.com/coca-cola" layout="button_count" show_faces="false" width="450" action="like" font="arial" colorscheme="light"></fb:like>');
//]]>
}
});
};
</script>
</head>
<body onload="checkDoesLike()">
<div id="fb-root"></div>
<script language="javascript" type="text/javascript">
// 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));
</script>
</body>
</html>
When I run code, facebook like not show (Though i have not like in page http://www.facebook.com/coca-cola), how to fix it ?
You need to call FB.XFBML.parse() after you add XFBML tags to the page
To explain, I'd like for a link to only become available for clicking once visitors have 'Liked' my website (not my Facebook page - the actual website). I've been trying to do it using this code:
<script>
FB.Event.subscribe('edge.create', //FB.event.subscribe attaches a handler to an event and invokes your callback when the event fires.
function(response) { //This is where the response function is inserted, I used document.write for this example
document.write(';This is the HTML I want to display');
}
);
</script>
But even after I like my website the link doesn't display. I hope I've been as clear as possible, any help would be greatly appreciated.
I managed to get it working after some thinking and playing around:
<!-- FB Javascript SDK -->
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId: 'APP-ID',
channelUrl : '//WWW.WBESITE.COM/channel.html', // Channel File
status: true,
cookie: true,
xfbml: true,
oauth: true,
});
// Additional initialization code here
FB.Event.subscribe('edge.create', function() {
window.location.href = "http://WEBSITE.COM/";
});
};
// Load the SDK Asynchronously
(function(d){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
</script>
<!-- More FB Javascript SDK (Like Button) -->
<div id="fb-root"></div>
<script>
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=APP-ID";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<script src="//connect.facebook.net/en_US/all.js#xfbml=1">
</script>
The FB.Event.subscribe needed to be placed within the window.fbAsyncInit function. I then made it so that instead of having the HTML appear after the 'Like' button had been pressed it simply redirected it using the window.location.href = "http://WEBSITE.COM/"; to a page that has the new link included on it. The document.write function wasn't working because it would get rid of all the HTML on the page other than what was included in the function.
The code above needs to be placed just after the opening tag and then you can place the code for the 'Like' button:
<div class="fb-like" data-href="http://WEBSITE.COM" data-send="send" data-layout="button_count" data-width="450" data-show-faces="true"></div>
Anywhere that you would like on the page!