Question

I’m trying to limit maintnance headaches by avoiding having to copy and paste code and having to update it on several different sites. Should I use an iframe? So far I just used inline CSS to style it and plan on copying a pasting to 3 or 4 other sites. Kind of like:

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

Answer 1

If you don’t mind having a slight delay, you could write a light JavaScript that loaded the content into the page via AJAX, much like facebook / many other widgets do.

The benefit that offsets the fact that your links are not part of the page’s initial HTML is the fact that you can update the content of all widgets from one place, with no chance that you’ll forget one int he future.

Have a look into how Facebook / Google + / Twitter / Everyone else does this.

Edit

Your question got me thinking about how one might do this, so I did it. I’ve made a working JSFiddle example.

Basically, you paste an empty div and a script tag into your target pages. The script references a file stored on your central server. It creates another script tag in the document, which itself contains a call to a function defined in the first script, which inserts your widget into the specified div on the page.

Pasted into your pages

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

First script content

(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;
}

Inserted script content:

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

And after all this, it occurred to me that you could just use an 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>

Personally, I would use the JavaScript method, as this would allow me to modify the style of the widget whenever I wanted, without requiring my users to update their pages.