Add a Custom Pinterest Widget to Blogger

Wednesday, 30 March 2016



This gadget was built with the Google Feeds API, which shut down. To replace the custom Pinterest gadget, please visit Pinterest Official widget page here.

If you purchased the Into the Blue template click here to view the tutorial on how to add the Pinterest widget for this template.

1. To add the custom Pinterest widget to your blog, go to your Blogger dashboard > Layout > Add a Gadget > HTML/JavaScript > copy + paste the following code in the box:

<!-- START Pinterest Widget --><style>
#pinterest-gallery {overflow:auto; margin:0 auto; list-style:none; width: 100%;}
#pinterest-gallery li {float:left; padding:0; background-size:cover; border:none; opacity:1;
width: 145px; /* change the image width */
height: 145px; /* change the image height */
margin: 2.5px; /* change the space between the images */
}
#pinterest-gallery li:hover {transition: 0.5s ease-out;
-o-transition: 0.5s ease-out;
-ms-transition: 0.5s ease-out;
-moz-transition: 0.5s ease-out;
-webkit-transition: 0.5s ease-out;
opacity: 0.6 !important; /* change the hover effect */
}
#pinterest-gallery img {border:none;}
.pinterest-link {display:block; overflow:hidden; text-indent:100%; height:100%; white-space:nowrap;
}
/* Internet Explorer correction */
#pinterest-gallery li a {color: transparent; line-height: 1px; font-size: 0px;
}
/* Mobile Responsive */
@media screen and (max-width: 1150px) {
#pinterest-gallery li {width: 48%;
height: 142px;}
}
@media screen and (max-width: 1100px) {
#pinterest-gallery li {width: 48%;
height: 135px;}
}
@media screen and (max-width: 1010px) {
#pinterest-gallery li {width: 48%;
height: 125px;}
}
@media screen and (max-width: 985px) {
#pinterest-gallery li {width: 47%;
height: 118px;}
}
@media screen and (max-width: 905px) {
#pinterest-gallery li {width: 47%;
height: 108px;}
}
@media screen and (max-width: 860px) {
#pinterest-gallery li {width: 47%;
height: 102px;}
}
@media screen and (max-width: 768px) {
#pinterest-gallery li {width: 145px;
height: 145px;}
}
@media screen and (max-width: 420px) {
#pinterest-gallery li {width: 131px;
height: 131px;}
}
</style>
<div id="pinterest-gallery"></div>
<!-- If you already have jQuery installed in your template, remove the next line -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- end jQuery link -->
<script type="text/javascript">
$( document ).ready(function() {
//GALLERY SETTINGS
  var thumbnailCount = 4; /* change the number of images */
  var username = 'YourUsername'; /* pinterest username */
  var profile = true;
  var board = false;
  var boardname = 'BoardName';
  var newWindow = true;
//END GALLERY SETTINGS. DO NOT EDIT BELOW THIS LINE
var url;var urlPrefix="https://ajax.googleapis.com/ajax/services/feed/load?v=1.0&q=https://www.pinterest.com/";if(board===true&&profile===true||board===false&&profile===false){$("#pinterest-gallery").append("<p>Error: please choose a profile gallery or board gallery.</p>")}else{if(profile===true){url=urlPrefix+username+"/feed.rss&num="+thumbnailCount}else{if(board===true&&boardname===""){$("#pinterest-gallery").append("<p>Error: Please specify a boardname.</p>")}url=urlPrefix+username+"/"+boardname+".rss&num="+thumbnailCount}}$.ajax({url:url,dataType:"jsonp",success:function(e){$.each(e.responseData.feed.entries,function(t){var n=e.responseData.feed.entries;var r=n[t].title;var i=n[t].link;var s=n[t].content;var o=s.indexOf("http");var u=s.indexOf('"></a>');var a=s.substring(o,u);var f=$('<li><a class="pinterest-link" href="'+i+'">'+r+"</a></li>");if(newWindow===true){$(".pinterest-link").attr("target","_blank")}f.appendTo("#pinterest-gallery").css("background-image","url("+a+")")})}})
});
</script><!-- END Pinterest Widget -->

2. What you need to replace:

YourUsername - replace with your Pinterest username, you will find it in the end of your pinterest link:

 https://pinterest.com/YourUsername/

4 - edit this number if you want to change the number of images that appear on your widget.

true - if you want your latest pins to appear then you don't have to edit this text. But if you want the pins of a specific board to appear you need to replace this text with " false ".

false - if you want your latest pins to appear then you don't have to edit this text. But if you want the pins of a specific board to appear you need to replace this text with " true ".

BoardName - if you want the pins of a specific board to show up on the widget you need to add the title of the board, you will find this in the boards page link:


https://pinterest.com/YourUsername/BoardName/

IMPORTANT: If you want your latest pins to appear on the gadget remove the BoardName and leave this field empty.

3. After you replace everything with your info and preferences Save the gadget. If the thumbnails are too small or don't fit in the sidebar change the width and height by editing the number in red "145".


* The Pinterest gadget code was created by Code it Pretty.