Question

首先道歉，如果问题标题误导你。这就是我想要实现的目标。

我希望网站管理员来到我的网站，复制一段代码（基本上它在网站管理员的网站上显示图像），然后将其粘贴到他们的网站上以推广我的网站。我很好，直到这一点，并成功地做到了这一点。现在，我希望图像具有从我的网站获取的动态排名。因此，当网站管理员将代码粘贴到他们的网站上时，图像上显示的排名（作为文本）会根据我的数据库设置而变化。

任何人都可以告诉我这是如何实现的。

Answer 1

您可以像aniruddha建议的那样执行iframe，也可以使用javascript。有关其各种小部件如何工作的信息，请参阅Twitter，Facebook和Google日历。

我为您提供了一些非常简化的实现，以了解它们的工作原理。但是看一下上面提到的例子可能会更好。请忽略我的示例中的安全问题。只是想在最简单的层面上展示它是如何工作的。

iFrame示例

Iframe客户端代码示例：

<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>

在您的服务器上，您可以将页面用作iFrame的来源。在这里我称之为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示例

对于javascript示例，可以使用JSONP跨域进行ajax调用。您可以在此处了解其工作原理：http://www.ibm.com/developerworks/library/wa-aj-jsonp1/

以下是javascript版本的客户端：

<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>

这是名为test_widget.js的服务器端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>');
        });
    }
}

以下是名为test_js.php的php文件，它将处理请求：

<?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); ?>);

Answer 2

我认为服务器端脚本页面的src需要iframe，它将从服务器获取具有等级的呈现代码。 iframe的目的是渲染整个html。

Answer 3

从此处修改代码http://php.net/manual/en/function.imagettftext.php

制作一张你的等级的图像。这是基于该代码的测试示例，请注意您需要GD和truetype。您所需要做的就是发送一个链接并使用get变量来设置哪个用户，这样您就可以从数据库中获得正确的排名。我不会编写那部分代码。

// 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);
?>

网站管理员代码的动态更改

3 个答案: