<!DOCTYPE html>
<html>
<head>
<!--
/*
* @author Hensel Hartmann, simpeligent.ch
* @version 2.0
* @copyright Hensel Hartmann, simpeligent.ch
* @license GPL
* @package OpenGraphReader with Template Output
* filename: get.og.as.html.php
* date: 2011-12-31
*
*/
-->
<style>
fieldset { margin-bottom: 1em; }
input { display: block; margin-bottom: .25em; }
#print-output {
width: 100%;
}
.print-output-line {
white-space: pre;
padding: 5px;
font-family: monaco, monospace;
font-size: .7em;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<h1 style="margin-bottom:6px;">usage demo of class.opengraphreader.php</h1>
<strong>This shows the basics of replicating the behaviour of the Facebook wall.</strong>
<br /><br />
<form>
<fieldset style="width: 900px;">
<div style="float: right;">
try one of these:<br />
http://www.youtube.com/watch?v=BcdNgWs-FSs
<br />
http://www.youtube.com/watch?v=Wm8sIP-7xmI
<br />
http://music-network.ch/
<br />
http://music-network.ch/videos/media/865/FunkyVirus_talk:_Sarah_Bowman/
<br />
http://vimeo.com/2539741
<br />
http://www.myspace.com/mnet_swiss_music_video
<br />
http://www.facebook.com/FunkyVirusTalk
</div>
<div style="width: 350px;">
In this demo, only one URL (the first) will be gathered!<br />
You can easely adjust the js to get all urls parsed<br />
The script runs on "keyup"!
But if "it" happened, an url was found in the text, the script stops - so it will not process the URL over and over again..<br />
In this Demo, you can clear that cache. <br />
To release the "cache", click the button "clear og cache and refresh preview" below<br /><br />
<label for="target">Type something and use an url in text, that leads to an open graph enabled site:</label>
</div>
<table border="1"><tr>
<td>
<textarea id="target" style="width: 650px;height: 100px;border:1px solid #707070;"></textarea>
<div id="result_cont"></div>
</td>
</tr></table>
</fieldset>
</form>
<button id="other">clear og cache and refresh preview</button>
<script>
geturl = new RegExp(
"(^|[ \t\r\n])((http|https):(([A-Za-z0-9$_.+!*(),;/?:@&~=-])|%[A-Fa-f0-9]{2}){2,}(#([a-zA-Z0-9][a-zA-Z0-9$_.+!*(),;/?:@&~=%-]*))?([A-Za-z0-9$_+!*();/?:~-]))"
,"g"
);
var cache=0;
$('#target').keyup(function(event){
var string = $('#target').val();
if(string.match(geturl) === null)
{
return;
}
var url = string.match(geturl)[0];
if(!url){ url = string.match(geturl); }
if(string.match(geturl).length>0 && !cache)
{
jQuery('#result_cont').load('get.og.as.HTML.php?url='+url);
cache=1;
}
});
$('#other').click(function() {
cache=0;
$('#target').keyup();
});
</script>
</body>
</html> |
Stumble It!
Bookmark in del.icio.us
Download
