Dec 13 2008

Code for jQuery read from other domains

The code is in this quick tutorial about how to read content from websites on other domains and publish it on your own html site. All done using jQuery and a small php script you can copy. It belongs to the original article, where you can find more info. Don’t need that, just look at the demo and use these files!

HTML file to read websites

Take this html.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$("#allh2").load("http://www.yourdomain.com/loader.php h2",{want2Read:'http://www.want2read.com/'},function(){
//Write your additional jQuery script below. For instance:
$("h2").attr("class","coolheader");
});
});
</script> </head> <body>
<h1>Wow, this stuff is need</h1>
<p class="optionalcontent">All headers from <a href="http://www.want2read.com/">want2read</a>, I learned this from <a href="http://www.sitegrind.nl/">Sitegrind</a></p>
<div id="allh2"> </div>
</body> </html>

In this html file, you must change 2 things:

  1. change ‘yourdomain‘, in the script you see in the header, in -duh- your domain name
  2. change ‘http://www.want2read.com/'in the domain you want to loan content from

This is what you leave alone:

  • want2Read, the first one in (want2Read:'http://www.want2Read.com/')
    • fyi: this is the name of a variable php is going to use
  • The $("#allh2") and <div id="allh2"> </div> ,

    • if you change, keep them complying with each other

What you can change. Save this for later, make files working first. Nevertheless, be inspired!:

  • Feel free to write you own test in the html file. Don’t forget to be gentle. Always put a reference to site you borrowed the content from.
  • the h2 after yourdomain ("http://www.yourdomain.com/loader.php h2" )
    • examples: h1, div#goodstuff, a[href*='domainname'], img.realones

This is where the good stuff happens! Although not clearly recognizable because of omitting $ sign, this is where you can use our so beloved jQuery selectors! I haven’t tested in how far the chain ability of jQuery applies to this special use of selector and its unusual semantics. Let me know if you tested. I like to use this as a first selection. And than use the callback function to perform further action.

save this file as index.html on your server.

The php to help jQuery load the website

Copy and paste this php in a text file and save on your server as loader.php, in the same directory as the index.html. Change nothing.

<?php
extract($_POST);
$str = file_get_contents($want2Read);
echo $str;
?>

Many of sites protect their content, if this doesn’t work you can use the alternate php code. See the original article.

7 comments   |  tags: , , , | posted in jQuery

Dec 12 2008

jQuery load function, get content from other websites

This is about using the load function from jQuery. How to use it across domains to load content from other sites and show it on your own. Yes, it can. But, not alone (at least, not for me). I managed to get it working with php. And no, you don’t have to understand php read on and amaze yourself.

  • Must know:
    • How to put a html website online.
    • Copy and paste. That sounds cheap and it is. Nevertheless this code can be of great value to you
  • Must not know:
    • For this tutorial you don’t have to know javaScript (I don’t)
    • php
    • jQuery. Nevertheless, people using jQuery will have a special interest in this article!

Like quick and dirty? Leave this tutorial with all its explanations. Have a look at the cool demo first, wow, loading all images from a complete other website! Than copy the complete, small html and php scripts. Thunderbirds are go!

Php reads html file

Php can do what you came here for in the fist place: load content, e.g. images from other web pages and show it on your own website. The file_get_contents function reads html code. The  php code you are going to use looks like this:

extract($_POST);
$str = file_get_contents($site2Read);
echo $str;

You don’t have to understand that. This is what you do. Copy this code literally, do not replace anything.  As I said before, copy in a .txt file and save as loader.php , in the same directory as your html file.

PS: for some domains this piece of php will not work. These are protective restrictions. Webmasters try to prevent your script to read their content like this.  Try this alternate code instead. Works more often. It still is copy paste, just as much work as the code above. Copy in tekstfile (notepad) and save as loader.php  :

extract($_POST);
$page= get_url_contents($site2Read);
echo $page;
function get_url_contents($url){
$crl = curl_init();
$timeout = 5;
curl_setopt ($crl, CURLOPT_URL,$url);
curl_setopt ($crl, CURLOPT_RETURNTRANSFER, 1);
curl_setopt ($crl, CURLOPT_CONNECTTIMEOUT, $timeout);
$ret = curl_exec($crl);
curl_close($crl);
return $ret;
}

Many thanks to the How-To Geek for this.

Load function from jQuery for images only

So far for the php part. The reason I want to do this with jQuery in the first place is because of its sweet filtering functions. You can start filtering content in the jQuery load function already! This means you can pick, for instance, all images / pictures from a site. And show them directly on your site, next to your other content. Or all links from an an other site, or all headers (h1, h2). Or all divisions containing the word ‘hello’. Or all unsorted lists (<ul>) having an id-attribute with text ‘favorites’ in it. And so on, get the idea? You know some jQuery, right? Here, as an example, we are going to get all header 2 elements  from a website, the <h2> part. My original tutorial loaded all images from a html site. But images are often well protected. To make things working fast we are going to use h2. This is the proper load function:

$("#allh2").load("http://www.yourdomain.com/loader.php h2",{want2Read:"http://www.want2Read.com/"});

  • Replace http://www.yourdomain.com/loader.php with -duh-…
  • Replace http://www.want2Read.com/ with the website you want to read.
  • Make sure there is a division with id=”allh2″ on your html-page. Thus:<div id="allh2"></div>

Use jQuery after the content loaded

This is some additional info. If you want to perform more jQuery actions on the loaded content, you can use the callback from the load function. What does this means? It means that you write you jQuery like this:

$("#allh2").load("http://www.yourdomain.com/loader.php h2",{want2Read:"http://www.want2Read.com/"},function(){
//Write your additional jQuery script here, for instance:
$("h2").css("background-color","#ff0");
});

As you see, you can now access the h2 elements with jQuery. If you would have written it after the load function, instead of using it in the callback, it would have had no effect on the loaded images. All words. Just copy paste and let the fun begin! Copy extra easy from the article with complete html and php script listings.

5 comments   |  tags: , , , , , | posted in jQuery