制作一个链接到4个不同网站的小工具的最佳方法是什么

<div style="width:165px; height:40px; background: url('http://site1.com/images/DH-sharebar.gif') repeat-x top #333;float:right;margin-top:15px;margin-right:20px;border-radius:5px;border:1px #565656 solid;">
  <a href="http://site1.com/" target="_blank" title="site 1">
    <img src="http://davidhairabedian.com/davidhairabedian/images/DH-sharebar-icon.png" style="border-radius:0;margin-top:5px;margin-left:10px;">
  </a>
  <a href="http://site2.org/" target="_blank" title="site 2">
    <img src="http://site1.com/images/DH-sharebar-HPM-icon.png" style="border-radius:0;margin-top:5px;margin-left:10px;">
  </a>
  <a href="http://site3.org/" target="_blank" title="site 3">
    <img src="http://site1.com/images/DH-sharbar-EHF.png" style="border-radius:0;margin-top:5px;margin-left:3px;">
  </a>
  <a href="http://site4.org/" target="_blank" title="site 4">
    <img src="http://site1.com/images/DH-sharebar-EHC.png" style="border-radius:0;margin-top:5px;margin-left:10px;">
  </a>
</div>

如果你不介意有一点延迟，你可以写一个简单的JavaScript，通过AJAX将内容加载到页面中，就像facebook/许多其他小部件一样。

抵消链接不是页面初始HTML的一部分这一事实的好处是，您可以从一个地方更新所有小部件的内容，而不会在未来忘记一个。

看看脸书/谷歌+/推特/其他人是如何做到这一点的。

编辑

你的问题让我思考如何做到这一点，所以我做到了。我做了一个JSFiddle的例子。

基本上，您将一个空的div和一个script标记粘贴到目标页面中。该脚本引用存储在中央服务器上的文件。它在文档中创建另一个script标记，该标记本身包含对第一个脚本中定义的函数的调用，该脚本将小部件插入页面上指定的div中。

粘贴到您的页面

<div id="placeholder-div"></div>
<script type="text/javascript" src="http://pagesofinterest.net/stack-examples/what-would-be-the-best-way-to-make-a-widget-that-will-link-to-4-different-websit/script.js"></script>

第一个脚本内容

(function loadContent() {
    (function xss_ajax(url) {
            var script_id = null;
            var script = document.createElement('script');
            script.setAttribute('type', 'text/javascript');
            script.setAttribute('src', 'http://pagesofinterest.net/stack-examples/what-would-be-the-best-way-to-make-a-widget-that-will-link-to-4-different-websit/content.php');
            script.setAttribute('id', 'script_id');
            script_id = document.getElementById('script_id');
            if(script_id){
                document.getElementsByTagName('head')[0].removeChild(script_id);
            }
            // Insert <script> into DOM
            document.getElementsByTagName('head')[0].appendChild(script);
    })();
})();
function callback(data) {
    document.getElementById('placeholder-div').innerHTML = data;
}

插入的脚本内容：

<?php ob_start(); ?>
<div style="width:165px; height:40px; background: url('http://site1.com/images/DH-sharebar.gif') repeat-x top #333;float:right;margin-top:15px;margin-right:20px;border-radius:5px;border:1px #565656 solid;">
  <a href="http://site1.com/" target="_blank" title="site 1">
    <img src="http://davidhairabedian.com/davidhairabedian/images/DH-sharebar-icon.png" style="border-radius:0;margin-top:5px;margin-left:10px;"/>
  </a>
  <a href="http://site2.org/" target="_blank" title="site 2">
    <img src="http://site1.com/images/DH-sharebar-HPM-icon.png" style="border-radius:0;margin-top:5px;margin-left:10px;"/>
  </a>
  <a href="http://site3.org/" target="_blank" title="site 3">
    <img src="http://site1.com/images/DH-sharbar-EHF.png" style="border-radius:0;margin-top:5px;margin-left:3px;"/>
  </a>
  <a href="http://site4.org/" target="_blank" title="site 4">
    <img src="http://site1.com/images/DH-sharebar-EHC.png" style="border-radius:0;margin-top:5px;margin-left:10px;"/>
  </a>
</div>
<?php $content = json_encode(ob_get_clean());
echo "callback($content);";

在所有这些之后，我突然想到你可以使用一个iframe:

<iframe src="http://pagesofinterest.net/stack-examples/what-would-be-the-best-way-to-make-a-widget-that-will-link-to-4-different-websit/iframe.html"></iframe>

就我个人而言，我会使用JavaScript方法，因为这可以让我随时修改小部件的样式，而不需要我的用户更新他们的页面。