1

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

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

谁能让我知道如何实现这一目标..

4

3 回答 3

3

您可以按照 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>

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

这是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); ?>);
于 2012-05-25T19:50:42.223 回答
1

我认为您的服务器端脚本页面的 src 需要一个 iframe，它将从您的服务器获取具有图像排名的渲染代码。iframe 的目的是渲染整个 html。

于 2012-05-16T07:41:48.490 回答
0

从这里修改代码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);
?>
于 2012-05-16T07:46:44.403 回答