Javascript

Thursday, February 28, 2013

Steakhouses in Toronto

This blog is all about embedding 42&Park widgets in web sites, giving a number of different examples.  Below is a store Christine built for HY's Steakhouse & Cocktail Bar.  This is an example of embedding the store inside a typical web site.  Here is the line of HTML that you can paste into your blog or website right now to get the same thing:

<iframe frameborder="0" width="100%" height="330px" scrolling="no" seamless="seamless" src="http://publishers.42andpark.com/product-info.jsp?partnerId=53443"></iframe>


Let's walk through the various parts of this HTML code:
  1. <iframe frameborder="0" - This tells your browser to embed an iFrame
  2. width="100%"  - We want the iFrame to take up 100% of the width it's embedded in
  3. height="330px" - This is your actual width / 9 x 16.  In this case, our actual width is 653 pixels across.  This gives you a perfect 9x16 aspect ratio optimized for video and wide brand imagery.
  4. scrolling="no" seamless="seamless"
  5. src="http://publishers.42andpark.com/product-info.jsp?partnerId=53443&amp; - Specifying the partnerId like this tells the system to choose the initial mode (product, slide, video) and which slide to show first.
To get the partnerId of a capsule, you can open it in full screen mode and look at the partnerId parameter in the URL of your browser.  You can also see this in the Embed code screen.