[an error occurred while processing the directive]
give us feedback

Business opportunities

The fashiolista button helps your website gain more exposure on fashiolista.com. Implementing the button is extremely easy. Furthermore Fashiolista leverages Google's powerful infrastructure to ensure reliable service for your website.

Note: In addition to our own button we also support Addthis integrations. Addthis provides you with statistics and optimises sharing services, read more about using fashiolista with Addthis here. Currently addthis is our recommended method of integration.

Step 1 - Add the javascript:

Add the following bit of javascript to the bottom of your page:

<script type="text/javascript">
(function() {
var s = document.createElement('SCRIPT');
var c = document.getElementsByTagName('script')[0];
s.type = 'text/javascript';
s.async = true;
s.src = 'http://button.fashiolista.com/button/script/';
c.parentNode.insertBefore(s, c);
})();
</script>

Step 2 - Placing the buttons:

You can add as many buttons on a page as you like. Typically that would be one for a page focusing on a specific product and several for a page with a listing of products.

You can add buttons in six different styles.

Large

Love it!
<a class="fashiolista_button fashiolista_large"
href="http://www.fashiolista.com/item_add_oe/">
Love it!
</a>

Light Large

Love it!
<a class="fashiolista_button fashiolista_large" data-colorscheme="light"
href="http://www.fashiolista.com/item_add_oe/">
Love it!
</a>

Compact

Love it!
<a class="fashiolista_button fashiolista_compact"
href="http://www.fashiolista.com/item_add_oe/">
Love it!
</a>

Light Compact

Love it!
<a class="fashiolista_button fashiolista_compact" data-colorscheme="light"
href="http://www.fashiolista.com/item_add_oe/">
Love it!
</a>

Count Compact

Love it!
<a class="fashiolista_button fashiolista_count_compact"
href="http://www.fashiolista.com/item_add_oe/">
Love it!
</a>

Count Light Compact

Love it!
<a class="fashiolista_button fashiolista_count_compact" data-colorscheme="light"
href="http://www.fashiolista.com/item_add_oe/">
Love it!
</a>

Step 3 - Configuring the buttons

By providing optional parameters you can submit specific data in a better way. As said, this is optional, but enhances the quality of the data on Fashiolista.com.

url

The url paramater configures the url for which the button should be loaded. This should be a page specific to the product. If you are implementing the button on a product listing page the url supplied here should be the deeplink to the product. This url should escaped. If no url is provided this parameter default to the current url.

example
<a class="fashiolista_button fashiolista_large"
href="http://www.fashiolista.com/item_add_oe/
?url=http%3A%2F%2Fwww.net-a-porter.com%2Fproduct%2F47896">Love it!</a>
title

This parameter allows you to specify the title which fashiolista should use for this product.

example
<a class="fashiolista_button fashiolista_large"
href="http://www.fashiolista.com/item_add_oe/
?url=http%3A%2F%2Fwww.net-a-porter.com%2Fproduct%2F47896
&title=ACB+Chain+tassel+necklace">
Love it!</a>
imageurl

The imageurl parameter allows you to specify the image to use.

example
<a class="fashiolista_button fashiolista_large"
href="http://www.fashiolista.com/item_add_oe/
?url=http%3A%2F%2Fwww.net-a-porter.com%2Fproduct%2F47896
&imageurl=http%3A%2F%2Fcache.net-a-porter.com%2Fimages%2F47896_in_dl.jpg">
Love it!</a>

Example

To conclude with a fully working example. Paste this code and you are good to go.

<script type="text/javascript">
(function() {
var s = document.createElement('SCRIPT');
var c = document.getElementsByTagName('script')[0];
s.type = 'text/javascript';
s.async = true;
s.src = 'http://button.www.fashiolista.com/button/script/';
c.parentNode.insertBefore(s, c);
})();
</script>
<a class="fashiolista_button fashiolista_compact"
href="http://www.fashiolista.com/item_add_oe/">Love it!</a>

Advanced Step - Async loading

The Fashiolista button is loaded asynchronously by default. It makes your pages load faster and reduces the impact on your site if Fashiolista should ever go down. Sometimes you will want to run some custom javascript after the Fashiolista code is loaded. You can do so by defining the fashiolistaAsyncLoaded function. An example can be found below:

//fires when the fashiolista class is initialized
function fashiolistaAsyncLoaded() {
//your code here
}