Friday, July 16, 2010

How To Create a Permanent Etsy Mini For Your Blog Entries


It is easy to make an Etsy Mini, you just go to "Your Etsy" and find the "Etsy Mini" link under the "Promote" section and you can get the code to paste on your blog. For those that don't know what is Etsy Mini please read the What is Etsy Mini? guide on Etsy.

Anyway, the thing with the codes provided by Etsy is that it draws information from your account. If you chose to display items from your shop, it automatically updates itself when you list something new on Etsy, like mine on the right side there. The same goes for the one to display your favorites, it updates itself.

But sometimes people want to display themed items, like for example a themed pick, or a treasury on their blog. And instead of a full screenshot, maybe you want to let people click on the individual pictures and bring them to said listing on Etsy. The thing is though, Etsy Minis updates itself, so how to make a permanent Etsy Mini that doesn't update at all?

It is actually pretty easy. You don't even need to add the items to your favorites, this is how.

Copy the string of texts below...

<script type="text/javascript" src="http://www.etsy.com/etsy_mini.js"></script><script type="text/javascript">new EtsyNameSpace.Mini(0, 'list','gallery', 5,2, [45663935, 51557299, 51499897, 51334965, 50839998, 50776928, 48089993, 50563914, 49805694, 45523498]).renderIframe();</script>

...go to 'New Post' on your blog, and notice above the little brown edit box beside 'Compose' is an 'Edit Html' tag. Click on it and it will show you the complicated Html codes of your post, like so.


Now here is key, there should be quite some <div></div> tags if you are notorious with your enter key. You need to post the codes above in between those tags, like so.


Now you have a permanent Etsy Mini on your blog post! Woohoo! But wait, you need to customize it to become YOUR'S first. Or else you will be displaying all items from my shop LOL. *is sneaky like that* Teehee.

Okay, look for this two numbers in the code.


This decides how many columns and rows of items you want to display. The first number (5 in my case) decides how many rows, and the second number (2) decides how many columns.

Please note that it is not advisable to display more than 5 rows or 5 columns, It might look distorted or cut off. It is part of Etsy's design for Etsy Mini I guess, so don't be greedy!

Next up, notice the string of numbers in the code?


These are... you guessed it, listing numbers! So go to the listing of the item you want to display and look for this.


Copy them one by one (without the # please) and paste them into the designated spots in the code. Remember how many rows and columns you set and make sure you set the amount of number sets accordingly. (ie: If you have 4 rows and 2 columns, remove the last two set of numbers, if you have 5 rows and 3 columns, add 5 set of numbers)

And when you're done, just hit "Publish Post" to see your Etsy Mini in your blog post! Unfortunately you wouldn't be able to preview it in the Blogger editor due to... unknown blogger issues with scripts. You need to be sure all your codes are correct before you publish it to avoid any mishaps or embarrassment.

Here is mine! (as an example)


So that's it, that is how you make a permanent Etsy Mini to post on your blog. Any questions feel free to ask me in the comments section below. :)

5 comments:

S▲R▲H said...

lovely! do you know the code to divide the esty mini by shop section instead of manually putting in each item?

Alex Kam said...

Hmm, that I'm not sure. What you mean is that it only shows items from that section but it updates itself like the normal Etsy mini right? I will look into it and see what I can find out.

Unknown said...

Thank you for this! It is perfect for what I need my etsy mini to do.

Unknown said...

DId you ever figure out this?: "do you know the code to divide the esty mini by shop section instead of manually putting in each item?"

Unknown said...

Hi, the table appears to be shifting or indented causing the products in the last column to be cut off. Is there any way to fix this? Any help is greatly appreciated!

Post a Comment