Pinterest Gadget

Two options are available to display your pins:
  • display the most recent pins
  • display a specific board

As Blogger always keep demo content on gadgets when a new theme is installed, don't replace the whole code inside the gadget. Read the instructions below and replace only where is needed.


Displaying the most recent pins

  1. Go to Layout on the Blogger dashboard vertical menu.
  2. Locate the Pinterest gadget and open it.
  3. Locate the red text referring to the username (line 5).
  4. Replace the text with your username.
  5. Save the changes.

<script>//<![CDATA[
$.ajax({
dataType: 'jsonp',
type: 'GET',
url: 'https://widgets.pinterest.com/v3/pidgets/users/username/pins'
}).done(function(response) {
var pins = response.data.pins;
var html = '';
for (var i = 0; i < 12; i++) {
var description = pins[i].description;
var dominantColor = pins[i].dominant_color;
var imageUrl = pins[i].images['237x'].url;
var url = pins[i].id;
html += '<div class="pinterest-gallery"><a href="https://www.pinterest.com/pin/' + url + '/" target="_blank"><div class="pinterest-thumbnail" style="background-image: url(' + imageUrl + ')"><div class="pinterest-icon"><span><p><i class="fa fa-pinterest"></i></p></span></div></div></a></div>';
}
$('.pinterest-wrap').html(html);
}).fail(function() {
console.log('erro');
});
//]]></script>
<div class='pinterest-wrap clearfix'></div>

Changing the number of displayed pins

The orange number on the code above referrers to the number of pins that will be displayed. You can change it, but please take a look at the blog demo to check how many pins are being displayed and try to follow its number or multiples of it, as each theme has its own design style.


Displaying a specific board

  1. Go to Layout on the Blogger dashboard vertical menu.
  2. Locate the Pinterest gadget and open it.
  3. Locate the red text referring to the username (line 5).
  4. Replace the text with your username.
  5. Locate the blue text referring to the board name (line 5).
  6. Replace the text with the board name. In case you board have multiples words, add a - between them. Example: if your board is called Style Inspiration write it like style-inspiration
  7. Save the changes.

<script>//<![CDATA[
$.ajax({
dataType: 'jsonp',
type: 'GET',
url: 'https://widgets.pinterest.com/v3/pidgets/boards/username/board/pins'
}).done(function(response) {
var pins = response.data.pins;
var html = '';
for (var i = 0; i < 12; i++) {
var description = pins[i].description;
var dominantColor = pins[i].dominant_color;
var imageUrl = pins[i].images['237x'].url;
var url = pins[i].id;
html += '<div class="pinterest-gallery"><a href="https://www.pinterest.com/pin/' + url + '/" target="_blank"><div class="pinterest-thumbnail" style="background-image: url(' + imageUrl + ')"><div class="pinterest-icon"><span><p><i class="fa fa-pinterest-p"></i></p></span></div></div></a></div>';
}
$('.pinterest-wrap').html(html);
}).fail(function() {
console.log('erro');
});
//]]></script>
<div class='pinterest-wrap clearfix'></div>



Contact Form