title: Javascript widget (similar to Facebook Like) script vs Iframe approach
body: <p>When building a social bookmarking button widget for usage in other websites there are a few challenges. We just recently opensourced the clientside aspects of this. (blog post here: <a href="http://www.mellowmorning.com/2010/08/03/creating-your-own-diggfacebook-liketweetmeme-button/" rel="nofollow noreferrer">http://www.mellowmorning.com/2010/08/03/creating-your-own-diggfacebook-liketweetmeme-button/</a>)</p>
  
  <p>Basically the goal is to replace the chosen elements
  love it
  With a button showing how many other people loved it.</p>
  
  <p>There are two approaches to this.
  - replace the A with html (script approach)
  - replace the A with an iframe (iframe approach)</p>
  
  <p>There are rather complicated differences between these approaches. One particularly annoying is the inability for the script approach to communicate with its popup.</p>
  
  <p>Can anyone suggest a workaround to communicate between the login popup and the button. (IE. when you love something through the popup?, how do you update the count on the button, without being stopped by same origin protection..)</p>
  
  <p>Which approach do you recommend. Iframe or Script and why?</p>
  
  <p>These are the differences I encountered: Iframe vs Script</p>
  
  <p>Iframe:</p>
  
  <ul>
  <li>Popup communication possible
  The script approach cannot communicate with popups it creates due to the same origin restrictions. The iframe however can be of the same domain as the popup and freely communicate. This gives a better user experience when for instance logging in.</li>
  <li>Easier to develop
  The iframe approach is easier to develop and requires less code.</li>
  <li>Parallel download in IE
  IE doesn’t download the count scripts in parallel, but it does do so for the IFRAMEs. Making this approach somewhat faster.</li>
  <li>Independent CSS
  External sites don’t interfere with your button’s css if you use an iframe technique. The disadvantage is that it makes things likes hovers impossible to integrate with the other site. (For example Fashiolista’s compact button).</li>
  <li>Independent
  The iframe approach makes it very hard for other sites to game the users like/love action. With a script approach a foreign site can simply call your javascript to fake someone loving the product. This freedom can be abused but also allows for mashups.</li>
  </ul>
  
  <p>Script:</p>
  
  <ul>
  <li>Slower dom load
  Creating iframes takes a lot more time for the browser.</li>
  <li>Slower perceived load
  The script approach allows you to format the buttons before the data is loaded. Vastly increasing the perceived load speed.</li>
  <li>No shared functionality
  Buttons can’t share functionality. So when someone logs in for one button its is not possible to update the others.</li>
  </ul>