When I was preparing to create my “Soul to Sparkle” blog and had decided to use WordPress.com as my platform, I was dismayed to learn that Etsy Mini is not available in HTML and therefore could not be added to my WordPress.com blog. Furthermore, the Etsy widget that is available through WordPress only works on WordPress.org blogs, which are different and more sophisticated than WordPress.com blogs. So, rather than settle for less than my dream blog, I set out to learn HTML and create my own Etsy Mini Widget for Soul to Sparkle, featuring items from my shop, Jess’s Treasure Chest. Once I had the hang of it, thanks to some free lessons from w3schools.com, I created the Etsy Mini Widget you see over there on the side. Hooray! Success!
So after writing my first post and doing a little seated jig, I was talking with my boyfriend about my nifty little shop banner on the side of my blog. Thanks to his passion for open source software and Linux, he gave me the brilliant and wonderful idea to share this HTML script with you, dear devoted reader, so that you, too, may do a little seated jig of excitement over having an Etsy Mini Widget on your WordPress.com blog, too!
All of that said, here it is:
Jess’s Little Recipe for an Etsy Mini Widget:
Ingredients:
1 HTML script for an Etsy Mini Widget (see below)
6 URLs of items from your shop
6 URLs of corresponding images of said shop items (click on the image of the listing and copy the URL ending in “.jpg”)
1 URL of your shop’s main page
1 WordPress.com “Text” widget, found under “Appearance” on your blog’s dashboard
Method:
1. Copy the HTML script below. Open Notepad or another simple text editor on your computer and paste the HTML script into the document.
2. Highlight the text, “URL OF YOUR SHOP’S MAIN PAGE HERE,” and type the URL of your shop’s main page there.
3. Highlight the text, “YOUR SHOP’S NAME HERE,” and type your shop’s name there.
4. Highlight the text, ” YOUR SHOP’S SLOGAN HERE,” and type your shop’s slogan there.
5. Highlight the text, “LISTING 1 URL HERE,” and place your first listing’s URL there.
6. Highlight the text, “LISTING 1 IMAGE URL HERE,” and place the URL of your first listing’s image there.
7. Copy steps 5 & 6 for listings 2-6 and their respective images, placing them in the correctly named and numbered places.
8. Place an empty WordPress “Text” widget in the location of your choice.
9. Copy the HTML script you just edited with your information and paste it into this “Text” widget’s empty space. (*Note: You do not need to include a title.)
10. Click “Save” in the “Text” widget.
11. Go to your blog and find your new Etsy Mini Widget featuring your items!
12. Do a little seated jig!
Good luck! Please comment and let me know how it turns out.
HTML Script: (Copy and paste into your simple text document for editing)
<html>
<body style="text-align:center">
<hr />
<h1 style="text-align:center;font-family:calibri;font-size:22px;color:teal">
<a href="URL OF YOUR SHOP’S MAIN PAGE HERE">
<ins>YOUR SHOP’S NAME HERE</ins></a></h1>
<h2 style="font-family:calibri;color:purple;text-align:center;font-size:12px">
<i>YOUR SHOP’S SLOGAN HERE</i></h2>
<hr />
<p>
<a href="LISTING 1 URL HERE" target="_blank">
<img border="1" src="LISTING 1 IMAGE URL HERE" width="130" height="130" /></a>
<a href="LISTING 2 URL HERE" target="_blank">
<img border="1" src="LISTING 2 IMAGE URL HERE" width="130" height="130" /></a>
</p><p>
<a href="LISTING 3 URL HERE" target="_blank">
<img border="1" src="LISTING 3 IMAGE URL HERE" width="130" height="130" /></a>
<a href="LISTING 4 URL HERE" target="_blank">
<img border="1" src="LISTING 4 IMAGE URL HERE" width="130" height="130" /></a>
</p><p>
<a href="LISTING 5 URL HERE" target="_blank">
<img border="1" src="LISTING 5 IMAGE URL HERE" width="130" height="130" /></a>
<a href="LISTING 6 URL HERE" target="_blank">
<img border="1" src="LISTING 6 IMAGE URL HERE" width="130" height="130" /></a>
</p>
<hr />
<p style="text-align:center;font-family:calibri;font-size:10px;color:blue">
Created by Jess Albrecht of <a href="http://www.etsy.com/shop/JessTreasureChest">
Jess’s Treasure Chest</a>
<br />Email <a href="mailto:jessstreasurechest@gmail.com?subject=Etsy%20Mini%20Widget">
Jess</a> for one of your own, or find out how
<a href="https://soul2sparkle.wordpress.com/2011/07/23/how-to-create-an-etsy-mini-widgit-for-wordpress-com-using-html">
here!</a>
</p>
<hr />
</body>
</html>
Soul to Sparkle 
Mar 06, 2014 @ 10:12:12
thank you for this! so helpful!
Feb 16, 2014 @ 11:21:45
You are the most wonderful person i have found today! This is exactly what I wanted and I will be sharing you with everyone! Thank you!
Jan 28, 2014 @ 23:55:12
Hi Jess, Thank you thank you thank you!!! that was super easy…the only suggestion I might have is to add a quick tutorial on how to copy the image URL (right click on the image)- I hesitated at that step, but figured it out pretty quickly. I found this tutorial by doing a search in google- then saw the thread on Etsy- I was about to give up (well not really, that’s not my style ;))….anyway, I will say it again- THANK YOU!!! loved this!
Jan 26, 2014 @ 07:29:59
This has been very useful! Thank you so much Jess… glad I stumbled upon this.
Jan 01, 2014 @ 10:55:14
Thank you so much!! I just copy/pasted, and it is still showing it as a column of 6 images, but this is so much better than nothing! Do you mind if I link to your page in a couple of Etsy/Zibbet forums? (I know very little about coding, but it seems like this would work for a Zibbet mini too, since you are referencing the urls the user inserts.)
Thanks Again!
Ekatrina
http://funandbaubles.wordpress.com/
Oct 23, 2013 @ 03:00:14
This was such a fantastic help!! Thanks so much Jess!!
Aug 07, 2013 @ 12:13:49
Thank you so much for this tutorial! I really appreciate it. 🙂
May 12, 2013 @ 14:44:40
THANK YOU!
Dec 19, 2012 @ 13:19:45
Thank you so much for this tutorial, I stumbled upon you while searching how to add Etsy link to my yoga blog and I absolutley LOVE your blog and jewelry. So lovely to have met another kindred soul and artist! Namaste, Betty
Oct 14, 2012 @ 20:26:14
all i can say is you are amazing! thank you so much for this!!
Sep 15, 2012 @ 10:27:05
Hi Jess,
Thank you for the code! I am, however, having the same problem as Brooke where all my pictures are in one row. http://backporchstudiodotcom.wordpress.com/
You mentioned it has something to do with quotation marks?
Thank you for your help.
~Pauline
Aug 09, 2012 @ 05:31:26
Hi Jess, you have just become a goddess in my eyes! I have spent hours and hours of my life trying to do this and finally I found your page and I know finally have an etsy widget. Thank you a million times over! Ever considered writing a book?! – Suzy
Apr 05, 2012 @ 13:35:42
I got the widget to show up, but the images aren’t showing anything but a weird little icon. The links work exactly as they should. So any suggestions on how to get the images to show? Perhaps changing the theme? Thanks in advance, oh, and YOU ROCK!
http://parloandlogi.wordpress.com/
Mar 16, 2012 @ 23:40:52
thank you SO much for this post!! 🙂
shayda
Feb 16, 2012 @ 15:10:47
I just tried this and it came out with one column of 6, and also my photos are a bit squooshed. How do I fix it?
Feb 13, 2012 @ 03:20:47
Thank you so much!
Feb 02, 2012 @ 20:06:49
Thats brilliant! Thank you! Gonna try it now 🙂
Jan 30, 2012 @ 07:41:32
You my dear are an awesome creature! Thank you for your generosity in sharing this, you’ve saved me much shrieking and gnashing of teeth 😉
xxxMelaniexxx
Jan 21, 2012 @ 10:09:50
OMG I love you THANKS! I’ve spent all morning trying to figure this out (getting mini etsy on my blog) and yours is the best and easiest way thanks a ton ^_^
Nov 25, 2011 @ 06:17:23
Hi Jess,
Firstly, thank you! The html is wicked.
Although, I was wondering if it would be possible to put text under the image without the formatting being changed, is that possible?
Thanks
Nov 01, 2011 @ 12:50:25
Jess,
THANK YOU!! I just started blogging and am featuring items from sellers on Etsy but also wanted to feature some of my own on an on-going basis. So of course, I was disappointed to see that I couldn’t add an Etsy mini to my WordPress blog and then found your post on the forums. THANK YOU!!! I agree with all the others – you rock!!
http://marytouchingthepast.wordpress.com/
Mary
Oct 20, 2011 @ 22:59:39
Thank you so much! I am totally going to try this :)!!!!
Sep 07, 2011 @ 01:06:31
Oh my goodness, you’re amazing! It worked great for me, except I can’t see the title. I changed the colour like you suggested but it didn’t work, I might be doing it wrong. I’ll keep trying. You rock for putting this together!
Sep 08, 2011 @ 17:47:26
Hey, Layoffthebooks! Thanks for you comment! I checked out your blog, and it looks like you have figured it out. : ) I’m glad my post was so helpful to you!
Sep 08, 2011 @ 17:58:58
Yes, I switched from Kubrick (the default WordPress theme) to the Twenty Ten theme and it works great! Thanks again.
Aug 25, 2011 @ 01:38:08
This is awesome! I’m wondering how to center the images? Any more help would be very appreciated! I think I’ve figured out how to change the size of the images if I want them larger. I’m slowly slowly working this all out!
I love the way you made your How To read like a recipe 😉 Thanks for all of the help you’ve been already!
Sep 08, 2011 @ 17:51:51
Hey Lorna,
I think the way to center the images would be to add the words: “align:center” to the code before the “width” for each image. To change the proportions, you can just change the width and height numbers to a different pixel size. This is a good way to adjust the proportions, too, if you image is not a square.
Sorry it took me so long to get back to you! I have been very busy in the past month, moving and starting a new job. I miss my blog! But I am glad so many people have found this post helpful!
Thanks for reading!
Best,
Jessica
Aug 18, 2011 @ 01:06:46
Jess, Thank You soooooooooooooooo much for posting this. I was having a hard time earlier finding how to do this & happened to come across your blog. You rock!!!
http://withoutmethereisnou.wordpress.com/
Aug 14, 2011 @ 06:05:55
Hi Jess,
Awesome job on converting the code for the mini Etsy shop! I have a question for you …. how do I change the amount of space between the images from one row to the next? Thanks
Chantal
Aug 19, 2011 @ 16:32:54
Thanks, Chantal! I will send you an email, because when I tried to explain the code change here, it did not display properly.
Aug 12, 2011 @ 14:56:22
Jess, thank you for this! I also am showing one column instead of two, but I’m okay with that. The problem I’m having is that my shop name and URL are not showing up at the top; there’s just a blank space there. I copied and pasted exactly, so I’m not sure why this is happening. My blog: http://studiorose.wordpress.com/
Thank you so much! I really needed this.
Aug 12, 2011 @ 18:00:48
Hi StudioRose! I’m so glad that you were able to use my code for your blog. I think I can help you fix the issue with your shop name. For reason it appears to be displaying in a white colored text, which of course blends into your background as blank space. But it should be an easy fix! Here’s what you need to do:
Find the part of your code that says this:
“text-align:center;font-family:calibri;font-size:22px;color:teal”
In place of the word, “teal,” you can input a color (aka HEX) code, which you can find here:
http://www.w3schools.com/html/html_colornames.asp
So you would pick out a color you like and place that number where it now reads “teal.” My guess is that your blog’s format does not recognize the word teal, but it should work with a number. For example, if you wanted to use kind of a rose color to go along with your blog’s theme, you could try this one, called leVioletRed, and you would place this Hex number in where it says teal: “#D87093”
Hopefully that solves the problem!
-Jess
Aug 04, 2011 @ 14:51:05
Hi, thank you thank you thank you! After lots of reading i finally came across your post and it worked. yay! My shop images are being shown as one column of 6 rather than 2 columns of 3 like yours. Any idea why this might have happened? you can take a look at brookeoconnell.wordpress.com
Thanks again and i’ll be tweeting about your amazing help! Brooke
Aug 04, 2011 @ 17:47:06
Hi! I am so happy it worked for you! I can going to take a look at the script and see if I can determine what happened. I have a hunch, but I want to make sure I can figure it out before I explain what it could be. So I will be in touch soon!
-Jess
Aug 04, 2011 @ 21:35:52
Okay! I think i fixed it! The problem was something that a friend had suggested might become an issue, and he was right. It had do to the WordPress’s rendering of quotation marks, believe it or not! So I redid the HTML. If you copy and paste it again, inserting your links and text in as before, it should work fine now. Please let me know if it doesn’t work, as there are other things I can do to help. But I tested this and believe it will solve the problem.
Jul 24, 2011 @ 07:35:27
Jess, I have been considering using etsy. I am concerned about the outside world having my address. Do you use a PO Box # or do you just send from your home address. I am interested in your post above, need to get to that point.
If you would like I can ask Donna Bridges at “My Sister’s Gallery” if she needs any other artist for her shop. She is right in Sandwich.
Becky
Jul 25, 2011 @ 20:39:04
Hi Becky,
I will let you know about asking your friend at the gallery in Sandwich. First I will need to check with The Crystal Pineapple, since that location might be too close and would create competition. But thank you, and I will let you know if I can take you up on the offer!
I will send you a private message regarding the rest of the message.
Jess