Jeff Muller
Jeff Muller

Reputation: 83

Pinterest pins do not load

I'm trying to create a board manager that displays the pinterest boards I follow by category (IE: Click on 'Recipes' and it will only show pins from the recipe boards). The links to the boards are sitting in a json file with the category which populate a menu.

Here is the code that displays the individual board and it's pins. It's takes the parameter selectedPin, but I'm not using that currently, and replaced it with a single board in the variable selectedBoard for testing purposes. I use the get method to retrieve the boards object, then use a for loop to run through it and find the url for the individual pin. All of this works, as I have logged out the object, but when I try to insert the pin into the HTML, it will not show up. The weird thing is, is that you can see the element is added into the HTML code when I inspect the page, but nothing is actually displayed. I have tried to load the API asynchronously, and I've tried hosting it locally.

category and right are divs where I want the pins to be displayed.

https://developers.pinterest.com/docs/sdks/js/

  function displayBoard(selectedPin) {
      categoryBody.appendChild(category);

      for (var cat in board.board) {
      if (board.board[cat].category === selectedPin.title) {
        console.log(board.board[cat].url, selectedPin.title);

      for (var i = 0; i < board.board[cat].url.length; i++) {
          category.appendChild(right);
          var selectedBoard = "https://api.pinterest.com/v1/boards/mojettegiraud/concepts/pins/?access_token=ACCESS-TOKEN&fields=id%2Clink%2Cnote%2Curl%2Ccreated_at%2Cimage";
          $.get(selectedBoard).done(function(data){
            for (var x = 0; x < data.data.length; x++) {
              console.log(data.data[x].image.original.url, data.data[x].created_at);
              var pinner = "<a data-pin-do='embedPin' href='"+data.data[x].url+"'></a>";
              right.innerHTML = pinner;
        }
        });
    }
    }
  }

}

Upvotes: 1

Views: 1406

Answers (1)

Zack Argyle
Zack Argyle

Reputation: 8427

Should be an easy fix. But first, you probably want to remove the token from your code snippet :)

The issue you're seeing is that when you load pinit.js the script fires and looks for data-pin-do attributes in the DOM, but doesn't find any because you add them in asynchronously later. Fortunately there is a utility method that the script exposes that you should be able to use to force the script to rebuild. PinUtils.build();. You don't need to do anything other than include pinit.js and you will have PinUtils available to use.

Here is a fiddle showing you what you should do. JSFiddle

The relevant snippet is this piece.

var boards = Array.prototype.slice.call(arguments);
$.each(boards, function(i, pins) {
  $.each(pins, function(i, pin) {
    var pinHTML = "<a data-pin-do='embedPin' href='"+pin.url+"'></a>";
    document.body.innerHTML += pinHTML;
  })
});
PinUtils.build();

Upvotes: 1

Related Questions