How to Add Pinterest Widgets on Your Website

December 17, 2012

How to Add Pinterest Widgets on Your Website

Don't you love fascinating and wordless photos? We all do. But taste depends. When we talk about social media world, there are popular social networks dedicated for image sharing. Absolutely you can share images on Facebook, Google+ and on such networks. But how about the ones solely driven by images? Can you think of such? I know you will obviously come up with Pinterest and Instagram. Well, let's narrow this topic to Pinterest. If you own a blog or website, how do you promote your pinteresting Pinterest profile for your incoming visitors? You may have added follow buttons which one of them is linked with your Pinterest profile. Wouldn't it be much better if you could be more attractive as Pinterest is all about images?

Grab Attention with Images

You remember that we have been talking about embedding Instagram images on your site to show off your Instagram photos and it has a greater possibility of attracting visitors landing on your site than having a simple button. Wouldn't you agree? So far Pinterest has been offering Pinterest Follow buttons for users to help visitors find their Pinterest profile and follow if interested. But Pinterest has no way of showing off either your pins or boards. You would love if Pinterest let you embed your own pins or boards. Wouldn't you? Lately we have heard the new changes of Pinterest and business accounts are now in the game too. Did you remember me mentioning about Pinterest widgets they have introduced along with the business accounts?

Pinterest Profile and Board Widgets

Pinterest got new widgets for their business accounts to impress their business users. Eventhough Pinterest widgets available for business users, the best thing is, even you are a personal account holder, you can make use of these widgets and start having them on your blog or website too. Sounds great, no? The widgets are attractive as they are able to show off your pins and quite easy to implement too. Currently there are two widgets - Profile and Board widgets.

The profile widget is a great way to show off your Pinterest profile or business account for site visitors and invite them to follow you on Pinterest. It displays your pins on the widget and when users click on the widget, they will be taken to your Pinterest account.

The board widget is similar to profile widget but it is to show off a particular board on Pinterest of your choice with the pins on that board. The users click on the embedded board widget will be taken to the specific board on Pinterest and they can follow that board too.

Either way, you can promote your Pinterest account on your blog or website using these widgets. Oh yeah, if you are interested in promoting another user or board of someone else, it doesn't matter. There are some customization options available for both widgets and as I noticed, the widgets are much lightweight too. However if you are thinking of using these widgets on your site, make sure they are going to add value to your online resource or help you or visitors in some way. Now it's time for implementation. Are you ready? Seriously?!

Steps:

1. First of, add following script to just above the </body> tag of your page.

Notes:

* If you already have official Pinterest Pint It button on your site, you might have this script already implemented on your site. Then, you don't need to place this script again.

* If you are a Blogger user and don't know how to edit your template, read How to Edit Your Blogger Template.

2. Now you just need to add your preferred widget on your blog or website.

Note: If you are a Blogger user and wanna add it as an element, you can add your button code snippet via HTML/JavaScript element. Read How to Add an External Widget or Codes to Blogger. Else if you wanna render it in a Blogger post or page, read How to Embed External Content on Your Blogger Posts or Pages.

Profile Widget

The profile widget reflects the user profile you specify with the pins on the widget. Once someone click on the widget, that person will be taken to the profile you have linked with your widget.

Board Widget

The board widget shows off pins in a particular board and clicking on the widget will direct visitors to the board you have specified for the widget.

Color Indication Information:

- Pinterest Username

Specify the username of Pinterest profile to render that profile and pins on Pinterest Profile widget. In case if you don't know your Pinterest username, you can find it on Pinterest Settings page.

- Pinterest Board URL

Add Pinterest board URL here to reflect the board and pins on Pinterest Board widget. You can simply grab the URL for a board in browser address bar after clicking on the board you prefer - i.e: http://pinterest.com/Mayura4Ever/Facebook

- Image Width

Here you can set the width of images or pins displayed on the widget in pixels.

- Board Height

This will set the height of the widget. Specify a value in pixels.

- Board Width

Set the width of the widget here. You need to specify value in pixels.

Notes:

* If you need the widget to set the width automatically, you can leave board width value as a blank - i.e: data-pin-board-width=""

* The board or widget width may try to compatible with image width you have specified and may not change if it can't display full image in the width you specified for widget. So if widget width not responding to the value, try changing image width value.

Enjoy :-)

Awesome! Thanks for coming by and taking your time to read this post :) I hope you have learnt something today. Now you can share it with your friends and I'd love to hear from you too.

Related Posts and Categories

Blog, Gadgets and Widgets, Pinterest, Social Media, Tips and Tricks, Tutorials, Website

Comments

* Make sure your comment is genuine and comply with our commenting guidelines.

* Review your email and reply notification settings to receive replies via email.

Brenda Lee said...: Fabulous tutorial Mayura! I've shared in hopes some of my blogger friends could use it!; December 17, 2012 at 5:19 AM
Mayura De Silva said...: Hey Brenda,

Now that's a wonderful addition to Pinterest, right? :) I hope the folks fell in love with Pinterest would love to have these widgets on there blogs or websites too dear.

Thank you for stopping by and commenting dear :) Ah... Same goes for sharing with your friends and hope your friends get started with widgets :)

Cheers...; December 17, 2012 at 5:38 AM
Sapna said...: A Great new lesson for the day. I have bookmarked it.

Thanks for sharing this post.

Sapna; December 17, 2012 at 7:39 AM
Harleena Singh said...: Informative indeed Mayura!

I love the way you describe through your tutorials that makes it easy for anyone to follow things. :)

I had put up a similar widget (like Carolyn has on her blog), but the problem I faced was that I wasn't always regular with pinning things, so I removed it. Besides, the loading time was another issue with my theme. I wonder if it's the same kind of widget or something different. How is it that you haven't put it up on your blog yet. :)

Thanks once again for this wonderful post - I'm surely going to Pin this one right away so that others too can benefit from it. :); December 17, 2012 at 10:22 AM
Mayura De Silva said...: Hi Sapna,

I hope you find it helpful and go add if you find it helpful to your blog dear :)

Thanks for coming by and sharing your views :)

Cheers...; December 17, 2012 at 1:36 PM
Mayura De Silva said...: Hi Harleena,

Oops... I don't remember seeing it at Carolyn's place dear :) Just went and saw it.

It shows up recent pins, pin by pin, as she pins. Nice :) But here these are different from that and are official widgets offered by Pinterest. As you see these widgets show multiple pins in the available space and take visitors to board or profile dear.

Ah... I've added profile widget last week to my blog as I play with 'em first Harleena :) On my business account, it only holds the pins of my blog, so I think it doesn't fit here though when I see same images on my blog and pins. So I've removed it from here :)

It really works with personal account as it has different kind of pins and attractive too, but no personal profiles allowed here Harleena ;)

Thanks for coming by and adding more value here with your experience on 3rd party widgets dear :) AND for your wonderful compliments too Harleena.

Cheers...; December 17, 2012 at 2:00 PM
Carolyn Nicander Mohr said...: Hi Harleena, Yes, I use Pretty Pinterest Pins at The Wonder of Tech. They actually help remind me to go on Pinterest if I haven't been on there for a few days. Visiting Pinterest for me is like a mini visual vacation.

I just ran P3 plugin and it didn't highlight Pinterest Pins as being slow to load so I've kept it. Seeing my recent pins on my blog makes me happy.; December 17, 2012 at 9:50 PM
Carolyn Nicander Mohr said...: Hi Mayura, Wow, it's great to know there is a coding solution to getting a Pinterest widget on your blog. As Harleena pointed out, I use a plugin, but your coding is more efficient and gives more control.

Well done, Mayura, thanks for sharing your excellent coding skills with us!; December 17, 2012 at 9:51 PM
Adrienne said...: Ah, another very helpful post Mayura... You just shared every single step people need to take if they want a Pinterest widget installed on their blog.

I admit, I took a whole different route but that's okay, it worked just the same. If you love this site then you need the widget. No excuses now right.

~Adrienne; December 17, 2012 at 11:10 PM
Mayura De Silva said...: Hi Carolyn,

Ohw yeah dear... Harleena mentioned about the one you using at your place and on WordPress you can use Text widget to input code if you need to, no? :)

I haven't explore much about Pinterest widgets much, but as this is the official widget offered by Pinterest, I thought Pinterest users would like and very addictive too ;)

Thanks for coming over and sharing your views on Pinterest widgets dear :)

Cheers...; December 17, 2012 at 11:27 PM
Mayura De Silva said...: Hi Adrienne,

That's very true dear ;) I love the way you put the idea in the statement.

You know, Pinterest fans would love having it no matter what as it's a great way to showcase their interesting pins to whole visitors stopping by on their blogs or websites.

Ah... You having it on your place too? I didn't notice Adrienne. Wanna go back and see ;)

Thanks for coming by and sharing your views on this topic Adrienne :)

Cheers...; December 17, 2012 at 11:35 PM
Donna Merrill said...: Mayura, you are a true teacher! You break things down step by step so it is easy to do. As you know by now, I am technically challenged :) I get confused just adding a plug in to my blog.

Here, you take us step by step in detail how we can do this. This is why I love to come to your blog. I always learn something new, that even I can do. I am grateful that you are my teacher.
Donna; December 18, 2012 at 2:11 AM
Mayura De Silva said...: Hey Donna,

You taking me some years back dear :) There was a lesson that a boy couldn't understand and teacher repeated once again without making the explanation simpler. He just give up on him and move on to next lesson :)

After class I just wait there with him and teach that lesson in my way. He got it though it took more time for him :)

So I always thinking, not about readers who can do it simply but ones who never touch on it or fear to do dear :) They need to convince it's something they can do too. I don't know how much successful I am, but I try the best I can dear :)

Thank you for your kind words and everytime you never fail to mention this when you find helpful my post :) That's encouraging and admire how you deal with people Donna. You are best at it :)

Well, if you like having Pinterest widget, there you go dear :)

Thanks for coming by and sharing your wonderful thoughts Donna :)

Cheers...; December 18, 2012 at 2:27 AM
Sue Neal said...: Hi Mayura,

I love Pinterest but don't use it as much as I should, mainly due to lack of time.

I must admit I'm a bit nervous about using coding, so would probably opt for a plugin for this, but I'm bookmarking this in my 'practical tips' post and may well return to it later.

Thanks very much for the step by step instructions - very helpful,

Sue; December 18, 2012 at 5:11 PM
Mayura De Silva said...: Hi Sue,

Well, I can relate there too :) We need to prioritize what matters and take some time to explore when you can.

I get you there dear :) On WordPress you can put it via Text widget. Well, there we tend not to follow some ways as we never did or not comfortable doing that, no? :) Well, you can challenge yourself.

Thanks for coming by and sharing your views about Pinterest and widgets dear :)

Cheers...; December 18, 2012 at 6:38 PM
Pauline said...: Hi Mayura
I must admit that since signing up for my account at Pinterest I have not done anything with it so I need to learn a lot more before going any further. Thanks for showing me how to add a widget to my blog once I get my account up and running.
Have a great day
Pauline; December 18, 2012 at 9:16 PM
Mayura De Silva said...: Hi Pauline,

Oh... I've done the same first days dear ;) I just love pics but never went there as I be on other networks. Connect with some friends on Pinterest (Beware: Could be highly addictive for girlies) and you will find it's quite cool experience too ;)

Well, hope you have a Pinterest account and send me a request too ;) Enjoy pinning and try out the widget...

Have a Pinteresting day ;)

Cheers...; December 18, 2012 at 10:45 PM
SHORYA bist said...: Hi Mayura,

The article is very informative.But i wanted to know if there is any plugin for the work rather than scirpting that would be grt..Do let me know.

Thank You
Shorya Bist
From Youthofest; December 19, 2012 at 12:00 PM
Lisa Buben said...: I really like these Mayura, something else to add to my to do list. Can they also be used on other type of websites besides blogger? I see your answer below for Wordpress. Will play with code for the retail sites I do. It would look really nice! Thanks.; December 19, 2012 at 5:11 PM
Mayura De Silva said...: Hi Shorya,

Actually these are to work with any website and offers by Pinterest :) If you are seeking for plugin works with WordPress you can check out the reply of Carolyn's here as I'm not familiar with 'em much mate :)

Obviously a plugin search would give you bunch of plugins too :)

Hope it helps :)

Thanks for coming by and commenting mate :)

Cheers...; December 19, 2012 at 5:45 PM
Mayura De Silva said...: Hi Lisa,

Pinterest always being creative with stuff they offer as I see :) Absolutely you can use 'em on any website Lisa. That's why I mentioned "Website" in post title else it would be "Blogger" :)

Ah yes, add coding with Text widget there and it's to add HTML coding dear :) Hope to see it in action there.

Thanks for coming by and sharing your views about the widgets dear :)

Cheers...; December 19, 2012 at 5:48 PM
Praveen Rajarao said...: I had this Pinterest widget on my DMC footer a while back, but somehow didnt really love it. Maybe because I wasnt using it much, and all my pins were old and outdated.

Now that I have started the new Top 10 Pins for the week, it maybe a good idea to get that back...what do you say??

Thanks for sharing.; December 20, 2012 at 1:48 AM
Sylviane Nuccio said...: That's very interesting, Mayura, I'm thinking of doing this on my travel blog, maybe. As always you have a great tutorial that we can just follow and boom we're done!

Thanks for your great work!; December 20, 2012 at 6:11 AM
Mayura De Silva said...: Hi Praveen,

Ah you had it there? :) May be the way it is or mostly I see that pins makes it much attractive. Anyway use what's the best for you mate. I'm sure there are more at WordPress plugin gallery.

Exactly, that's for sure Praveen :) But I have a thought that rather than this official widget, it's better if you can show off that 10 pins individually. Else, you can show off top 10 pins board with the widget here on the sidebar or somewhere visible too.

Now you gotta digg in to Pinterest plugins and try out what's best match for your new feature ;)

Thanks for coming over and sharing your thoughts here mate :)

Cheers...; December 20, 2012 at 10:34 PM
Mayura De Silva said...: Hi Sylviane,

Oh yes dear :) I think Travel, Nature and such blogs can get best out of this widget dear :) It gets attention rather than the button implemented on the blog. Well, try it out and see how it's gonna work for you ;)

Ha ha... That's what need to be, right Sylviane? :) I'm glad if many and many can make use of the posts without being through confusions :)

Thanks for coming over and sharing your thoughts about the widgets dear :)

Cheers...; December 20, 2012 at 10:37 PM
Praveen Rajarao said...: Mayura - Thanks for the heads-up...i will start looking at what widgets or plugins are available for Pinterest. I am more likely to start something like a slideshow with each pin on one slide...so it will not go as long as the first one did...again takes a little time for me to see how easy/how difficult it might be.

Will update you again dude....until then..cyaa; December 20, 2012 at 10:39 PM
Mayura De Silva said...: There you go mate :) You know what's best. That's really a great idea to save up space and to improve the user experience.

Only one thing I've seen mostly on slideshows that it's not responding to users and not proceeding to next slide as intended to mate. I hope you will make sure it's working when it's live :) Else, nothing to worry about as I know Praveen.

Cheers...; December 20, 2012 at 11:15 PM
Roger Weavers said...: Hi Mayura,

I have been trying to add a Pinterest widget a WordPress blog for a few days now. I have tried 3 different plug-ins and none of them worked! Your method seemed nice and easy but when i tried it I just got a blank, the same as the plug-ins. After some further investigation I think there may be a problem with Wordpress 3.5. Have you got this to work on this version?
Thanks
Roger; December 20, 2012 at 11:50 PM
Mayura De Silva said...: Hi Roger,

Oops... Really? As you are on WordPress, did you add all the codings through HTML widget mate? :) Both script and widget code need to be present.

Well, let's try once more. Add both script and widget code via HTML widget again from this post and let me know whether it works or not Roger :)

We can try another option if it now work out.

Cheers...; December 21, 2012 at 12:31 AM
FosterCare Dad said...: Thanks for sharing. Any way to get the Board Widget centered in the blog post, instead of left-aligned. Couldn't manage to figure this one out.; February 24, 2013 at 1:59 AM
Mayura De Silva said...: Hi Mate,

Glad it helping you. You can add a div tag enclosing the board widget code as below to center it :)

[Pinterest Board Code Snippet]

Cheers...; February 24, 2013 at 2:48 AM
tj said...: Hello, does it take a while for it to show up? I've followed your instructions for the Pinterest profile widget but unfortunately nothing is appearing. Please advise and thank you. :o); April 6, 2013 at 10:13 PM
Mayura De Silva said...: Hi TJ,

It's not only for business accounts, you can use it for personal profiles too :) Also having Pin it button is perfectly alright.

First off, I hope you have placed the script properly, else it won't load :) As you have Pin it button implemented, the script may be already added. If so, you don't need to add it again in your template.

Secondly, you need to specify relevant information in the code snippet. The highlighted texts :)

As you need it to be placed on sidebar, use HTML/JavaScript gadget to place the code :)

Cheers...; April 6, 2013 at 11:10 PM
ramona said...: My company wants to put my Pinterest page (not just a board) on their site; as it all relates to my work. Would I follow the instructions listed under Profile Widget?; February 8, 2014 at 1:56 AM
Mayura De Silva said...: Hi Ramona,

Exactly! :) As all your pins relate to your work, the Profile Widget is the definitive choice. It shows off pins from your boards and clicking on it takes to your Pinterest profile.

Let me know if you have any questions when implementing it :)

Cheers...; February 8, 2014 at 3:03 PM
Selah Bell said...: Hello! I was wondering how you made the images, boards, etc centered in your posting column? Mine keep going to the left of the column, and I don't want them there... Thanks!; August 14, 2014 at 9:46 AM
Mayura De Silva said...: He Selah,

You can click on an image in the Post Editor and set the Center option to center your image from the options panel displayed beneath.

If you wish to center the Pinterest widget, you can add a div tag enclosing the widget code as follows,

[Pinterest Board Code Snippet]

Hope it helps :)

Cheers...; August 17, 2014 at 8:12 PM
Selah Bell said...: Thanks! The div tag was great. :); August 18, 2014 at 1:13 PM
Mayura De Silva said...: You're welcome, Selah :) Glad to help you out.; August 18, 2014 at 2:43 PM
Justin Kozuch said...: Does anyone know if data-pin-scale-width="[Image Width]" data-pin-scale-height="[Board Height]" work for embedded pins as well?

I've started embedding pins in blog posts but always end up with a really skinny pin and it looks odd.; December 17, 2014 at 3:02 AM
Mayura De Silva said...: Hi Justin,

Are you trying to embed a pin using a Pin widget? Unfortunately, Pin widget doesn't support custom sizes right now. But resize as like pins rendering on Pinterest website itself.

You can go over to Widget Builder and preview how an embedded pin widget looks like after building one. Then you can decide if it's something to do with the widget or not :); December 17, 2014 at 8:09 PM