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 変数を使用してユーザーを設定するだけで、DB から適切なランキングを取得できます。その部分はコーディングしません。 

// 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 に答える