First of all apologies, if the question title misleads you. Here is what I want to achieve.
I want webmasters to come to my site, copy a piece of code(basically it displays an image on the webmasters's website) and then paste it on their website for promotion of my website. I am good till this and have succeeded in doing so. Now, I want the image to have a dynamic rank that will be fetched from my website. So, when webmasters paste the code on their website, the rank displayed on the image(as a text) changes based on my Database setting.
Can anyone let me know how this can be achieved..
You can do an iframe as aniruddha suggested or you can also use javascript. See Twitter, Facebook, and Google Calendar on how their various widgets work.
I've provided some very simplified implementations for you to see how they work. But it's probably better to look at the examples mentioned above. Ignore the security issues in my examples here. Just wanted to show how it works on the simplest level.
iFrame Example
Client Code For Iframe Example:
<html>
<head>
</head>
<body>
<h1>User Website Title</h1>
<p>Some random user text</p>
<p>Iframe version here</p>
<!--This is the code that the client would paste in to their website -->
<iframe src="http:/your.domain.com/server_iframe_test.php?user=TestUser" height="30" width="500" scrolling="no" frameBorder="0"></iframe>
<!-- End client iframe code to paste-->
</body>
</html>
On your server, you can have page to use as the source for the iFrame. Here I'm calling mine server_iframe_test.php:
<?php
//Generating a random number to show that page will update on reload
$randomNumber = rand(1, 999);
//In the src of the iframe we will send a get parameter called user to determine which user we should look up
$data = array('user' => $_GET['user'], 'rank' => $randomNumber, 'image' => 'http://url/to/some/image.png');
?>
<!-- This is the output that will be generated in the iframe -->
<div class="widget_wrapper"><?php echo $data['user'] ?>: <?php echo $data['rank'] ?> and <? echo $data['image'] ?></div>
Javascript Example
For the javascript example it is possible to make ajax calls across domains using JSONP. You can read up on how it works here: http://www.ibm.com/developerworks/library/wa-aj-jsonp1/
Here is the client side for the javascript version:
<html>
<head>
<!-- I'm cheating here by including jquery in the head. My test script needs it-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>
<h1>User Website Title</h1>
<!--Code that user pastes into their page-->
<!--First get the script from your domain-->
<script src="http://your.domain.com/test_widget.js"></script>
<!--This code is also pasted by the client. We use this to set user name and then render the html. Also I added an id to the script tag here to know where to append the html. This is a more of a shortcut.-->
<script id="test_widget_script">
var widget = new testWidget('TestUser');
widget.render();
</script>
<!-- Widget will render html here -->
<!--End Code to Paste-->
<p>Some random user text</p>
</body>
</html>
Here is the server side js script called test_widget.js:
var testWidget = function(user){
var _user = user;
this.render = function() {
//We make a JSONP call here to our php script which generates the data for the user. Note the &callback?. We need to add this to make it a JSONP call.
$.getJSON('http://your.domain.com/test_js.php?user=' + _user + '&callback=?', function(data){
//Append html result after the js tag with the following id
$("#test_widget_script").after('<div class="widget_wrapper">' + _user + ': ' + data.rank + ' and ' + data.image + '</div>');
});
}
}
Here is the php file called test_js.php that will handle the request:
<?php
$randomNumber = rand(1, 999);
$data = array('user' => $_GET['user'], 'rank' => $randomNumber, 'image' => 'http://url/to/some/image.png');
//We need to make the content type javascript
header("Content-type: text/javascript");
?>
<?php //Here we take the name of the callback passed as a GET parameter and use it as a function to pass in our json data. We don't call the function in php, but when the text gets returned, jQuery knows how to handle the response. ?>
<?php echo $_GET['callback'] ?>(<?php echo json_encode($data); ?>);
I think a iframe is required with src of your server side script page which will fetch the rendered code with rank over the image from your server. The purpose of the iframe will be to render the whole html.
Modify the code from here http://php.net/manual/en/function.imagettftext.php
to make an image with your rank in it. Here is tested example based on that code, note you need GD and truetype for this. All you need do is send then a link and use a get variable to set which user so you can get the right ranking back from your DB. I won't code that part.
// Create the image
$im = imagecreatetruecolor(400, 30);
// Create some colors
$white = imagecolorallocate($im, 255, 255, 255);
$grey = imagecolorallocate($im, 128, 128, 128);
$black = imagecolorallocate($im, 0, 0, 0);
imagefilledrectangle($im, 0, 0, 399, 29, $white);
// The text to draw (your ranking)
$text = '21'; // <== change this as you need over time
// Replace path by your own font path
$font = 'arial.ttf';
// Add some shadow to the text
imagettftext($im, 20, 0, 11, 21, $grey, $font, $text);
// Add the text
imagettftext($im, 20, 0, 10, 20, $black, $font, $text);
// Using imagepng() results in clearer text compared with imagejpeg()
imagepng($im);
imagedestroy($im);
?>