如何为我的网站构建小部件答案

【问题标题】：How to build a widget for my website如何为我的网站构建小部件
【发布时间】：2010-06-01 01:25:03
【问题描述】：

我对整个编程非常陌生 - 到目前为止，我只有构建网站、数据库等方面的经验。

我目前有一个网站，用户可以在其中分享他们的在线购买。

我想构建一个其他网站可以集成到他们网站上的小部件。该小部件将显示在我的网站上输入的最近购买，用户应该能够直接通过此小部件插入他们的购买，而无需访问我的网站。

我的网站是在 PHP 上使用 Zend Framework 构建的，并使用 Mysql 后端。

我所说的一些网站已经同意添加小部件，如果它不引人注目并且他们所要做的就是在他们的页面中插入 4 行 javascript 代码。我假设这应该像 Google adsense 代码一样工作，您可以在其中输入 google 的 javascript 代码并开始显示广告。

这就是想法，但我不知道如何去做——谁能指出我正确的方向。有关如何执行此操作的任何示例或教程。

Google Adsense 代码示例

【问题讨论】：

您的网站采用什么技术？ ASP.NET、PHP 等？考虑创建一个 API 服务器，您可以在其中仅向小部件公开所需的功能。例如，小部件可以通过 JavaScript 或 iframe 访问 API。
我的网站是基于 PHP/Mysql 的。是的，我读过关于使用像 Google Adsense 这样的 XSS 的信息，其中合作伙伴网站只包含一行 Javascript 代码 - 这将显示用户可以用来提交数据的表单。但不确定如何实现 - 谢谢

标签： zend-framework widget

【解决方案1】：

我不是小部件领域的专家，但“方向”是使用在将托管小部件的页面中动态生成的 iframe。

那是你的 JS 代码会写成这样：

<iframe src="http://www.mywebsite.com/services/widget.php" {other attributes here} />

iframe 通常包含在标记 (html) 中，它负责在托管页面中显示小部件。您的 javascript 文件可以包含处理程序（绑定到小部件上的事件等）。

iframe 的目标可以是一个 .php（或其他）脚本，它将从您的网站输出 html 或其他任何内容。输出可以包含来自您的数据库（如您所说的 Mysql）的信息/数据，并对这些数据执行任何操作。

这是一种在多种情况下使用的方法（iframe）。在涉及 iframe 和框架的情况下，在编写 JS 代码之前，请确保您熟悉 javascript 中的术语窗口、父级（通常如何处理页面包含的框架又可以包含其他框架等的情况）

希望这可以通过为您提供有关该主题的一般想法/方法来帮助您入门。

我相信您一定听说过谷歌广告。谷歌广告页面上清楚地解释了在网页中包含谷歌广告的方式。您只需添加一个脚本和一些代码，然后生成以下 html：

<iframe allowtransparency="true" frameborder="0" height="100" hspace="0" id="google_ads_frame1" marginheight="0" marginwidth="0" name="google_ads_frame" scrolling="no" src="http://googleads.g.doubleclick.net/pagead/ads?client="{PARAMS}" style="left:0;position:absolute;top:0" vspace="0" width="900"></iframe>

此框架的内容是实际的广告（您在页面上看到的广告链接）。

iframe 标记并不是网页上由 google ads javascript 生成的唯一标记。还创建了其他标签 (html) 来处理与演示相关的问题。

【讨论】：

谢谢安德烈亚斯 - 我正在寻找一个简单的例子来开始 - 我已经用谷歌搜索但没有任何运气 - 你的解释是有道理的，但我之前没有做过这些东西这么困惑关于如何开始。
Gublooo，您可以从另一个站点对小部件进行逆向工程。有提供小部件的网站/在线服务。获取他们的小部件，看看他们如何处理网页上信息的呈现和显示。由于您希望在托管页面上从您的网站获取数据，因此 iframe 解决方案是一种可行的方法。

【解决方案2】：

例如，您希望将存储在您网站上的网站状态作为小部件显示在您的合作伙伴网站上。

这里有一个简单的方法：

1.在您的网站上创建小部件脚本，例如：http://yourwebsite.com/widget1.php?data=value&date2=value2

2.在该脚本上，用以下内容填充它：

<?php
$data=get_xss_free($_GET['data']);
$data2=get_xss_free($_GET['data2']);
//do your process here
//then, display it:
echo "<div>This is my widget data!</div>";
?>

3.告诉你的伙伴像这样嵌入它：

<iframe src="http://yourwebsite.com/widget1.php?data=value&date2=value2"></iframe>

【讨论】：

感谢您的反馈 - 请检查我在上面关于谷歌用于显示谷歌广告的方法的主要问题中的编辑 - 这些也是一种小部件形式 - 此处使用 Javascript 并且发布商有控制颜色 - 大小等

【解决方案3】：

有很多方法可以做到这一点。安德烈亚斯的例子很好。也可以以某种格式（如 JSON 或 XML）公开您想要的数据，然后使“小部件”包含一个小的 Javascript，它将根据某些偏好呈现它。一个（有点）简单的例子是twitter search widget。

祝你好运！

【讨论】：

【解决方案4】：

也许您可以考虑使用 PHP GD library 来动态创建图像。这样你的用户只需要在他们的网站上包含一个像这样的图像标签：

<img src="http://www.yourwebsite.com/widget.php?user={USERNAME}" width="500" height="250" alt="Your Widget" />

然后在您的widget.php 文件中，您拥有所有数据库逻辑等，它们使用这些数据并呈现图像。 Facebook 使用与此类似的方法，称为“个人资料徽章”，并且可以通过类似的方式访问：@987654322@{ID}&format=png&params={OTHERPARAMS}

但请注意，动态创建图像可能不是解决此问题的最简单方法，并且已经发布的 iframe 解决方案看起来相当不错，并且肯定会更容易创建。

【讨论】：