How to create an “Etsy Mini Widgit” for wordpress.com using HTML

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"&gt;
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"&gt;
here!</a>
</p>
<hr />
</body>
</html>

Advertisements

37 Comments (+add yours?)

  1. pixelsandpurls
    Mar 06, 2014 @ 10:12:12

    thank you for this! so helpful!

    Reply

  2. Nadine Roberts
    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!

    Reply

  3. rusticeye
    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!

    Reply

  4. Kala Cafe
    Jan 26, 2014 @ 07:29:59

    This has been very useful! Thank you so much Jess… glad I stumbled upon this.

    Reply

  5. funandbaubles
    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/

    Reply

  6. Rachel Cramer
    Oct 23, 2013 @ 03:00:14

    This was such a fantastic help!! Thanks so much Jess!!

    Reply

  7. thestashbuckler
    Aug 07, 2013 @ 12:13:49

    Thank you so much for this tutorial! I really appreciate it. ๐Ÿ™‚

    Reply

  8. lunaombre
    May 12, 2013 @ 14:44:40

    THANK YOU!

    Reply

  9. Be Yoga Be Love
    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

    Reply

  10. beadfeast
    Oct 14, 2012 @ 20:26:14

    all i can say is you are amazing! thank you so much for this!!

    Reply

  11. bpstudio2012
    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

    Reply

  12. quiltedhappiness
    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

    Reply

  13. parloandlogi
    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/

    Reply

  14. vintagedandelions
    Mar 16, 2012 @ 23:40:52

    thank you SO much for this post!! ๐Ÿ™‚

    shayda

    Reply

  15. littlewoodlanders
    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?

    Reply

  16. sinistersunflowers
    Feb 13, 2012 @ 03:20:47

    Thank you so much!

    Reply

  17. Fiona
    Feb 02, 2012 @ 20:06:49

    Thats brilliant! Thank you! Gonna try it now ๐Ÿ™‚

    Reply

  18. hornandthorn
    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

    Reply

  19. kristalia
    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 ^_^

    Reply

  20. lordlibidan
    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

    Reply

  21. marytouchingthepast
    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

    Reply

  22. Jess
    Oct 20, 2011 @ 22:59:39

    Thank you so much! I am totally going to try this :)!!!!

    Reply

  23. layoffthebooks
    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!

    Reply

    • Jess
      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!

      Reply

  24. lornaruth
    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!

    Reply

    • Jess
      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

      Reply

  25. withoutmethereisnou
    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/

    Reply

  26. Chantal Handley
    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

    Reply

    • Jess
      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.

      Reply

  27. studiorose
    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.

    Reply

    • Jess
      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

      Reply

  28. Brooke
    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

    Reply

    • Jess
      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

      Reply

    • 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.

      Reply

  29. Becky
    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

    Reply

    • Jess
      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

      Reply

Comment

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: