Hi all

I have an form that requires a user to enter a url.

When the user has entered the url i want to extract from the url ( page ) entered a page image and title.

How do i do this please.?

( for those that use facebook, i require to do very similar as they have when you paste a url into a input field. )

Thanks if anyone can help. Any input would really be appreciated.

Cheers

Steve

Using Javascript???

The first problem is a colelction level so yes js/jquery

Unless the URL entered is on the same domain as the javascript is, it won't work.

How does facebook do it then.
B eside which i have in the past read something on it.
Must be a way of getting url, and doing something like ajax to returve metta data.

The URL will be passed to some server side code to get the data from the remote host.


Javascript is blocked from accessing URIs on remote hosts to prevent XSS/CSS (Cross Site Scripting) exploits/attacks/hijacks

You could always use an AJAX call to do it in PHP. Then return the result to the div where you'd normally put what you wanted.

Ex: User enters http://google.com, script detects onchange attribute, uses AJAX to get information about the site.

Here's some simple code:

On your page with the form:

<script type="text/javascript">
function getURL(url){
var xmlhttp;
if(window.XMLHttpRequest){xmlhttp=new XMLHttpRequest();}
else{xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");}
xmlhttp.onreadystatechange=function(){
  if (xmlhttp.readyState==4 && xmlhttp.status==200){
    document.getElementById("output").innerHTML=xmlhttp.responseText;
  }
}
xmlhttp.open("GET","urlinfo.php?url="+encodeURIComponent(url),true);
xmlhttp.send();
}
</script>

<!--Form stuff-->
<!--Also make sure the input type is 'url', so it can be parsed by the browser automatically (in newer browsers)-->

<input type="url" name="url" onchange="getURL(this.value)" />

<h3>URL &lt;title&gt; tag content:</h3>
<div id="output">Will be here, this content can be blank</div>

Then on a file called 'urlinfo.php', and this should be all that is on it, nothing else unless you want to get fancy:

PHP Code:

if(isset($_GET['url'])){
    if(filter_var($url,FILTER_VALIDATE_URL){
        $html=file_get_contents($url);
        preg_match("/<title>(.+?)<\/title>/i",$html,$m);
        echo $m[1];
        exit;
    }
} 


However this is off the top of my head (aside from the AJAX code, which is from the W3Schools page . The ReGex might now work properly, though. Just play with it and you should be fine

To actually get an image of a webpage, you could always copy the HTML of the remote page, then build it and 'screenshot' it with PHP's GD library. I've never done this before, though.

Hope I could help!

-PG

<pedantic>
onchange is an EVENT not an attribute.

you can get all images with jquery easily just get the complete page html and save it into some variable like

$(document).ready(function() {
    $('body').find('img').each(function() {
        here you go
    });
});

and you can save all images src attribute into an array or as you want and then show them on any where as you want them to be.