First of all go to business.pinterest.com/widget-builder/ and sign in into your Pinterest account. The Pinterest developer page mainly consists of a widget generator that probably will assist you in embedding pins into the content of your website. Now you will see a plenty of options to play with but since, we are trying to embed pins in our website, so you have to go for “Embed Pin” from the widget builder.
To embed a Pinterest pin in your website, it is necessary to have a proper URL which should be pointing to your selected pin. Just open any pin that you like to embed in your website, and copy the full URL appearing in the address bar of your browser.
Now get back to the Pinterest widget builder, just paste the pin URL in the widget generator which you copied in the previous step. After pasting the URL, press the preview button to generator the code which you will insert in your blog.
On pressing the preview button, you will see a demo of your pin along with the two codes which you have to insert in your blog. Now go to Blogger.com >> your site >> Add a new Post >> HTML Tab >> and paste the code where you would like to see the pin to appear. Now publish your article, and that’s it.
Alternative Method:
If you know basics of HTML coding, then you can use our alternative method. This method is a lot simpler, but it requires you to have a bit familiarity with HTML coding. It doesn’t mean you need to be an HTML expert but a little likeness is always profitable.
First go to Blogger.com >> your site >> Add a new Post >> HTML Tab >> paste the following code where you would like to see the pin to appear.
<a data-pin-do="embedPin" href="http://pinterest.com/pin/48343395972563829"></a>
<script type="text/javascript" src="//assets.pinterest.com/js/pinit.js"></script>
Replace http://pinterest.com/pin/48343395972563829 with the URL of a pin which you want to embed on your site. After customizing press the publish button and that's all.
We hope this article would help you in embedding Pinterest pins in your Blogger blog. If you have any question related to this topic then, we encourage you to comment below and share your precious views with all of us.
About the Editorial TeamThe Editorial Team of MyBloggerLab consists of a group of Professional Blogger geeks Led by Syed Faizan Ali (Founder of MyBloggerLab).
10 comments
Thanks for the information syed !
Awesome Tutorial dude . Nowadays I have been observing that you are posting lots of basic tutorials . I know they might be helpful to the newbies but yet the tutorials are becoming more basic .
Please try to write Advanced Posts Faizan .
@Navneet: Totally agree with you bro! Faizan, I know basic tutorials are very much needed by newbies, but at least one standard tutorial must also be posted once in while.
thanks bro :))
So I tried this, as basic as it appears, and it is still not showing an image when I preview my blog post. Any ideas?
I followed this step by step....as newbie as it my be ;)
You Must be doing something wrong, Apply it again
I've noticed recently that photos that I've embedded from Pinterest have disappeared from my blog and all that remain are links (not the actual photos that were once there). I'm assuming Pinterest changed the internal location of their photos and thus my links are broken. Is there anything I can do about this besides manually downloading the photos to my hard drive then uploading them to Blogger. This seems so arduous and unnecessary. I'm really rather annoyed at Pinterest about this.
How do you centre the pin - in HTML it doesn't give you option.
Thanks for this tutorial.
Is there a way to do this in the sidebar?
Yes, you can. Go to Blogger >> Layout >> Add a Gadget >> Add HTML/JavaScript >> and paste the code there. >> Save
Post a Comment
We’re eager to see your comment. However, Please Keep in mind that all comments are moderated manually by our human reviewers according to our comment policy, and all the links are nofollow. Using Keywords in the name field area is forbidden. Let’s enjoy a personal and evocative conversation.