How to add an Etsy widget in a wordpress.com blog

http://www.etsy.com/ Etsy is a wonderful site where you can buy or sell handmade things. And this post will show you how to have an Etsy widget in a wordpress.com blog.


Post update – March 08, 2011
Panos has figured out that Etsy offers a Flash widget and Panos also explains how you can add it in your wordpress.com blog. You can learn about that in his post Adding an Etsy widget.


A little background information
Currently Etsy offers two ways of showing a user’s Etsy shop in a website/blog.
1. The javascript widget
2. The image widget.

The javascript widget will NOT work in a wordpress.com blog, since the code will be stripped off right away. The image widget will work without a problem, but it’s not so attractive.

So, we are gonna try out a Flash widget – yes, Flash widget – to have an attractive Etsy widget in a wordpress.com blog. If you don’t know already (since the wordpress.com Support Doc doesn’t mention it), it is possible to embed an Etsy widget in Flash in a wordpress.com blog. To learn how, please visit this link:
How to have Flash embeds in a wordpress.com blog

Before you can create an Etsy widget in Flash, you need to know the feed url of that particular Etsy page. Figuring out the feed of an Etsy page is easy. Just add /rss to the Etsy url (without any space).

Let’s see an example….

Davidjacobsonglass
creates wonderful glass art and this is the url of his Etsy shop:

http://www.etsy.com/shop/davidjacobsonglass

If I want to create a widget that will show things from his Etsy shop, I need to be a rocket scientist to figure out the feed. Just joking! I just have to add /rss

And after putting that bit after the url, the feed url I get is this:

http://www.etsy.com/shop/davidjacobsonglass/rss

Now that we have an Etsy feed, let’s create the Flash widget!

We can use these sites for free to create an Etsy widget:
Vuvox Express, Springwidgets, Widgetbox and Takeslides.

My personal favourite is Vuvox Express and I am going to create an Etsy widget using their service. What I like about Vuvox Express is I can customize the look of the widget in many ways.

To create an Etsy widget, I visited Vuvox Express and pasted the feed url in the RSS feed field and clicked “Connect”.

Give it a while (the time depends on how fast your internet connection is) and they will fetch the latest images from your Etsy blog. Then you get to choose a style and a variation from the style.

Below is a variation from the style “Postcards”.

Customizing the size of an Etsy widget for the side bar/footer

The size of the widget displayed above is probably okay if you paste it in a page/post. But what if you want it in the side bar/footer?

Then you will have to make it smaller. You can do so simply by changing the number in the height and width bits in the code.

I chose the style “Photo slider” for the widget below and I also changed the height and width information. The original width and height were 400 and 346 respectively and I changed the info to 200 and 150 respectively.

So far, so good…..

But, have you noticed? The link to the Etsy shop is NOT visible in the widgets! Actually individual link for each item DOES exist there, but is NOT easily visible. When you hover the mouse over the i icon, a “show/hide media info” text pops up. If you click it, the individual links to individual items are visible at the top.

What good is an Etsy widget if it the link to the Etsy shop or Etsy items are seemingly inaccessible?

Add a text link to your Etsy widget
Add a link to the Etsy shop by putting a text link right below the widget. If you are linking to your own Etsy page, the link text can say “Visit my Etsy shop”. If it is someone else’s Etsy page you are promoting, then the text link can be “Visit User’s Etsy shop”. Of course, you have to change the bit User with the name of the actual user.

So here is a widget with a text link below it. I used the style “Media Wall” for this


Visit David’s Etsy shop

Urge your visitor to click the i on the bottom of the widget

View an example. I used the style “Spin” here.


Tip: Click the i on the bottom bar to enable item links


If you like this post, don’t forget to share it!

13 thoughts on “How to add an Etsy widget in a wordpress.com blog

  1. I’m so confused. I’ve tried this and can’t figure out why it’s not working for me. Instead of showing up as a photo, it shows up as a link. Any suggestions?

    • I am sorry I took so long to get to your problem. I was on vacation.

      I am not sure I understand your problem. Were you able to make the widget at Vuvox in the first place?

  2. HellO Sanjida,

    Nice to visit your blog.

    I have a question to you,How did you add RoyTanck.com flicker gadget in WordPress?

    Waiting for your reply
    Om Prakash

  3. Pingback: Stickin’ with wordpress.com | Taking Thyme

  4. This is exactly what I’ve been looking for! But I’m having a hard time figuring out how to change the size in Vuvox….I’m not particularly computer saavy so I don’t know what it means or how to change the heighth and width in the code. Do I need to know how to write code? I would love some help and thanks for sharing this great info!
    Ashley

Comments are closed.