I basically want to pull the text only from statuses I've written on facebook (no comments, likes, etc) for a website written in classic ASP. So it cannot be PHP coded.
It can be in ASP or just JS and HTML, ideally I'd like to spit out what's returned (top 10) in a loop, each status nested in a div, that way I can put them in one surrounding div using some jquery that shows one at a time, animating the transition.
Sounds so easy, Facebook's graph (v2) api seems reasonable but I'm just stuck as every example I can find is PHP based. I'm not sure where to start. I see from the API i'll need an access_token (should I create an App and use AppID|SecretID for permanency?) and I'll need my profile ID (no probs).
Can you offer a good starting point or example I can easily customise? I'd like to keep code to a minimum.
here a simple tutorial i used for a previous full javascript implementation
http://codesamplez.com/development/access-facebook-graph-api-using-javascript-sdk
and here the official documentation :
https://developers.facebook.com/docs/reference/javascript/FB.getLoginStatus/
It took some reading but here is the pure JS solution with no ASP or PHP. You need to go into FB developer section and create a blank app and make it active/live. You'll need the App ID, the App secret and you'll need your Facebook Page ID (found at the end of the URL of your Facebook page.
I only wanted to show posts I've made as page manager so I do an IF statement checking it's a 'shared_story' so i'm not showing others posts/comments etc.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$.ajaxSetup({ cache: true });
$.getScript('//connect.facebook.net/en_UK/all.js', function(){
FB.init({ appId: 'Your_App_ID_Here' });
FB.api(
"/Your_Page_ID_Here/posts?access_token=Your_App_ID_Here|Your_App_Secret_Here&limit=50",
function (response) {
if (response && !response.error) {
var $ul = $('#statuses');
for(i=0;i<response.data.length;i++) {
if(response.data[i].message && response.data[i].status_type != 'shared_story') {
$ul.append($('<li>').html(response.data[i].message + '</li>'));
}
}
}
}
);
});
});
</script>
</head>
<body>
<ul id="statuses"></ul>
</body>
</html>
Related
I'm working on a karaoke video assignment and was hoping to find a way to flip between two different index.html documents (one for chorus, one for verses) using JS. I have limited knowledge of Javascript and am in the process of learning it. So far I think I need to use the following:
$(document).ready(function () {
window.setTimeout(function () {
window.location.href = "index2.html";
}, 5000);
});
Right now I have my index1.html and index2.html for the chorus and verses. I'm thinking I'd make an external JS file with the above function which displays index1.html for x amount of seconds and then index2.html for another duration. Sorry if this question is too simple or not well clarified. Still a beginner so any help is appreciated! Thanks!
What you are looking for is:
window.location.replace('path/to/index2.html')
I'm not sure what your directory structure looks like but you can pass it a relative or absolute path.
you don't even need javascript for this purpose, just put this in your head section:
<meta http-equiv="refresh" content="5; url=index2.html">
it will redirect to index2.html after 5 seconds.
http-equiv means "http header equivalent". As you can guess it can also be a http header sent by the server so you can serve even pure txt documents and switch them using headers sent by server.
If you want to use the power of javascript, you don't need to switch between pages, you can simply hide one content or another which is pretty simple:
<pre id="verse1">
verse 1 here
</pre>
<pre id="chorus" style="display: none">
chorus here
</pre>
<script>
$(function () {
window.setTimeout(function () {
$('#verse1').hide();
$('#chorus').show();
}, 5000);
});
</script>
I am very new to ajax and am really struggling. My end goal is to make a forum software like nodebb. I've already made a php forum but decided not to use it because it just seemed old unlike faster looking forums like nodebb. What I'm trying to understand is how to make multiple tabs that display different information each but keep the same data for the header. I understand this is probably a very simple thing to do, but currently I am unable to accomplish this.
https://dogecraft.net is a great example of what I'm trying to accomplish.
If you click on the different tabs, it loads information in each one. I tried this but I had trouble with the url. When I reloaded, it simply just loaded my new file and that's not what I want.
(Yes, I am using a local jquery file. Jquery isn't the issue.)
I've tried w3schools but didn't find really helpful information
I've also tried many other websites.
<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
<script>
$(document).ready(function(){
$( "#one" ).click(function(){
$("#div1").load("/one/").hide().fadeIn();
window.history.pushState("object or string", "Title", "/one/");
});
});
$(document).ready(function(){
$( "#two" ).click(function(){
$("#div1").load("two.html").hide().fadeIn();
});
});
</script>
</head>
<body>
<button id='one'>Page one</button> <button id='two'>Page two</button>
<h2>This text never changes :)</h2>
<div id="div1"></div>
</body>
</html>
I would like to have a homepage 'index.html/php'
I need a button to load one page of content (one.html/php) and then another button that loads another page of content (two.html/php).
On refresh, I would like it to keep the same content that was on the homepage including the buttons in the header.
You could make an Ajax call to your html/php to retrieve the html code and then inject the content on your div. Here is an example:
$(document).ready(function() {
$("#one").click(function() {
$.ajax({
url : 'http://myserver.com/myhtmlpage.html',
success : function(html) {
$("#div1").html(html);
}
});
});
$("#two").click(function() {
$.ajax({
url : 'http://myserver.com/myphppage.php',
success : function(html) {
$("#div1").html(html);
}
});
});
});
When you click a button, an ajax call is made, and if succesful, the success function will be called. The first parameter has the html code of the webpage you requested. Then you can use the html function of jQuery you can inject it on your div.
A couple of tips:
You might want to use only one onready function, no need to declare it several times
You might consider returning a json object with the data instead of a php page. This will be useful later on if you consider using a framework such as Angular or Vue. If you can generate a JSON file on your php such as this:
{
"name": "John"
}
Then you could do something like this:
$("#two").click(function() {
$.getJSON({
url : 'http://http://myserver.com/myphppagethatservesjson.php',
success : function(json) {
$("#div1").html("<h1>My name is " + json.name + "</h1>");
}
});
});
Then it will render "My name is John".
This could be improved a lot,but I hope it could help you a bit.
I am having a weird problem. I created some custom javascript and referenced it in my master page for one of my sites in SharePoint. For some reason the javascript works totally fine when I am logged in with my admin account, however, when logged in with my regular user account the javascript does not seem to work. Has anyone ever experienced an issue like this? If so could you please point me in the direction of how to solve this problem. My javascript hides a link when the page is ready and depending on the current user logged in, displays the link if the user is in a specific group. Below is my code...
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#rating-link').hide();
checkGroupMembership();
});
function checkGroupMembership() {
$().SPServices({
operation: "GetGroupCollectionFromUser",
userLoginName: $().SPServices.SPGetCurrentUser(),
async: false,
completefunc: function (xData, Status) {
if ($(xData.responseXML).find("Group[Name='Test']").length == 1) {
$('#rating-link').show();
}
}
});
}
</script>
Hot Damn!!! Figured out the problem. Apparently I needed to check in the .js files that reference SPServices as well as add jQuery to my site assets rather than referencing it via google hosted libraries.
I need to create a javascript application that can display the content from another domain (admittedly another big website). Further interpretation of the DOM tree is not needed at the moment. It will be used by only ten more people.
I can make it work via php's get_content function. But that is very slow since it runs on the server side. I looked into any origin but cannot get it to work. It is best to not touch any origin since we use it extensively and we don't have much cash to spend around. Can anyone help? By the way, iframe is not an option since the big website blocked it. The code is below. Admittedly I kind of took it from another stackoverflow answer. Thank you in advance!
Btw. another engineer told me if I use the extension .hta instead of html, the same-origin policy issue would be resolved. I tried it and it did not work. But I was wondering if I did it right.
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
function myCallbackFunction(myData) {
$(function() {
$("#test").contents().find('html').html(myData.contents);
});
}
</script>
<script src="http://anyorigin.com/get?url=http://http://www.amazon.com/dp/B001F7SGHQ/&callback=myCallbackFunction"></script>
</head>
<body>
</body>
<iframe id='test' style='width: 100%; height: 100%'>
</html>
Try something like the following.
var invocation = new XMLHttpRequest();
var url = 'http://http://www.amazon.com/dp/B001F7SGHQ/&callback=myCallbackFunction';
function callOtherDomain() {
if(invocation) {
invocation.open('GET', url, true);
invocation.withCredentials = true;
invocation.onreadystatechange = handler;
invocation.send();
}
}
Addition of [withCredentials = true] will enable the HTTP header "Access-Control-Allow-Origin:".
there's another good solution might be what you need via PHP ,
is to use class called PHP
Simple HTML DOM Parser
this class can copy all source of a websites and you can save it in your server with extension you want also you can modified what you need before you save and this class have a full documentation (You need to be good in PHP5 POO )
this a link for class
http://simplehtmldom.sourceforge.net/
and there a good advanced thing you can do it for make your website faster , is use a Cash System so you can download the source from website one time a Day or 1H or 12 Hours ,
and save it in your host .
i hope that will give you what you need .
I have tried it using jQuery but it is not working.
<script>
$("a").click(function () {
$.post("http://www.example.com/trackol.php", {result: "click"
}, "html");
});
</script>
out
To get the best results you should change two things in your approach
Use onmousedown instead of click - this way you get a few extra milliseconds to complete the tracking request, otherwise the browser might not start the connection to your tracker at all as it is already navigating away from the original page. The downside is that you might get some false-positive counts, since the clicking user might not finish the click (eg. keeps the mousebutton down and moves the cursor away from the link) but overall it's a sacrifice you should be willing to make - considering the better quality of tracking.
Instead of an Ajax call ($.post('...')) use an image pre-fetcher (new Image().src='...'). The fact that the tracker is not an image is not relevant in this case because you don't want to use the resulting "image" anyway, you just want to make a request to the server. Ajax call is a two way connection so it takes a bit more time and might fail if the browser is already navigating away but the image pre-fetcher just sends the request to the server and it doesn't really matter if you get something back or not.
So the solution would be something like this:
<script>
$(document).ready(function() {
$("a").mousedown(function (){
new Image().src= "http://www.example.com/trackol.php?result=click";
});
});
</script>
out
Instead of using JavaScript to call a php tracking script, you could just link to your tracking script directly and have it in turn redirect the response to the ultimate destination, something like this:
out
and in the PHP script, after you do your tracking stuff:
...
header("Location: $dest");
As mentioned, the problem is you’re not running the script after the DOM has loaded. You can fix this by wrapping your jQuery script inside $(function() { }, like so:
This works:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Tracking outgoing links with JavaScript and PHP</title>
</head>
<body>
<p>Test link to Google</p>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script>
$(function() {
$('a').click(function() {
$.post('http://www.example.com/trackol.php', { result: 'click' }, 'html');
});
});
</script>
</body>
</html>
See it in action here: http://jsbin.com/imomo3