The Wayback Machine - http://web.archive.org/web/20140902184920/http://www.houzz.com/buttonsAndBadges
About Houzz 

Buttons and Badges

Embed a badge, slideshow or button on your website and find other free tools to enhance your Houzz experience.

Slideshow Widgets

Image Search
Display specific photos based on keywords or categories
Featured Ideabooks
Display the latest ideabooks from Houzz
Image Search
Let visitors search 3 million Home Design Photos

Home Design Search on Your Web Site

Copy the code below to embed the houzz photo search badge on your blog or web site

Houzz Design Search Widget Code
Paste this code on your home page.

Additional Options

A full page widget is available as well.

Houzz Button

Allow your website visitors to add photos of products and spaces to Ideabooks easily with the Houzz Button.



Hint: a valid image URL starting with http://

Preview (warning: could not load image) :

Image


Please provide a title




Please provide a category
Image
We found a Houzz Button embedded on this page that is associated with another Houzz account.

Please update the page with your code below.

 Houzz Button Code Paste this code along side your other social share buttons.
Houzz Button Embed Code Template
<a class="houzz-share-button"
   data-url="http://www.yoursite.com/product/page/ "
   data-hzid=""
   data-title="Product Title as it will be seen inside Houzz "
   data-img="http://yoursite/path/to/product/image.jpg "
   data-desc="Product description text "
   data-category="Category keywords "
   data-showcount="1 "
   href="http://www.houzz.com">Houzz</a>
<script>...</script>

The Houzz Button embed code consists of an <a> tag followed a <script> tag. Customize the Title, Image and Description of your products as it appears in Houzz via the following HTML5 custom data attributes.

The embed code MUST exist in the static HTML of the product page in order for our backend servers to verify your ownership of the website and to associate the product to your Houzz profile.

Available Attributes

  • data-url - Canonical URL of your product. If you already have products listed in Houzz, make sure the URLs match exactly to prevent duplicate listings and maintain accuracy of the Ideabook count.
  • data-hzid - A unique identifier that verifies you own this web page.
  • data-title - Title of the product.
  • data-img - URL of hi-res product image.
  • data-desc - Brief description of the product.
  • data-category - Keywords to help categorize the product. (ie. 'Wall Sconces')
  • data-showcount - A value of 1 shows the Ideabook count of this product. A value of 0 hides the count.
Website Ownership
Your Houzz Website Identifier (HZID):

We look for this unique identifier in the HTML of your product pages to associate the product page inside Houzz to your profile. In order to prevent other websites from using your unique ID in their webpages, you will need to specify which domains you own by modifying your profile's Website Button Settings.

List of approved domains (modify):
Houzz Button Embed Code Template for Big Commerce
<a class="houzz-share-button"
   data-url="%%GLOBAL_CurrentProductLink%%"
   data-hzid=""
   data-title="%%GLOBAL_ProductName%%"
   data-img="%%GLOBAL_InitialZoomImage%%"
   data-showcount="1"
   href="http://www.houzz.com">Houzz</a>
<script>...</script>
  1. Copy the templated HTML code above.
  2. Log into your BigCommerce dashboard.
  3. Click the "Design" link at the top of the page.
  4. Click the "Browse Template Files..." button to access all of your layouts, panels and snippets.
  5. Find the layout, panel or snippet you would like the button to appear in and open the file in the online editor.
  6. Paste the Houzz Button HTML code and Save the file.
Houzz Button Embed Code Template for Shopify
<a class="houzz-share-button"
   data-url="{{ shop.url }}{{ product.url }}"
   data-hzid=""
   data-title="{{ product.title | strip_html }}"
   data-img="{{ product.featured_image | product_img_url: 'original' }}"
   data-desc="{{ product.deescription | strip_html }}"
   data-showcount="1"
   href="http://www.houzz.com">Houzz</a>
<script>...</script>
  1. Copy the templated HTML code above.
  2. Log into your Shopify dashboard.
  3. Click the "Themes" tab on the left.
  4. Click the "Template Editor" to access all of your layout and template files.
  5. Find the layout, template or snippet you would like the button to appear in and open the file in the online editor.
  6. Paste the Houzz Button HTML code and Save the file.

Shortcodes on Wordpress.com

Wordpress.com users can embed Houzz slideshows using a special code format called Shortcodes.

Choose a slideshow above or click the Embed button on any Houzz.com web page to grab an embeddable shortcode. The shortcodes can be used in blog entries, pages and the sidebar (use the Text Widget).

Example shortcodes:
  • Latest Houzz Photos:
  • Featured Ideabooks:
Additional Options

You can specify a maximum width and/or maximum height by adding w=n (width) and/or h=n (height) to the shortcode.

  • Width & Height Example:

Houzz Bookmarklet

Save to Ideabook
Drag the button above into your browser's
Bookmark Bar.

Find images that you like on the web and click
the bookmarklet to add them to an Ideabook.

Houzz Logo and Identity

Image

© 2014 Houzz Inc.
Houzz® The new way to design your home™