Data, Maps, Usability, and Performance

Sorting Pinterest Pins by Likes and Repins

Last updated on April 29, 2014 in Development

Pinterest Analytics

Get the latest and updated code here

Now that we have private boards on Pinterest, I really want to see more filters, analytics, and user messaging added to the website. It would be also very sweet if they could release an API. In the meantime, you can write some quick JavaScript which would allow you to sort your pins. jQuery is already loaded on the website so you can leverage that to write less code to make the sorting work. If there is enough interest, I can create a chrome extension out of this, or an bookmarklet, but for now, I am just going to show how to sort pins by running JavaScript code in the console of Chrome web developer toolbar. Since everything is happening on the front-end, first we need to decide if you want to organize and sort one board or all of your pins. On my pinterest account, this would be either a board page or all pins page. Next we need to load up all the pins.

I’m sure you have seen the Pinterest auto loading of pins as you scroll to the bottom of the page. We can automate that with simple JavaScript. The following snippet of code will make the browser scroll down and load more images from Pinterest automatically. I have set it up to wait 4 seconds before scrolling down and it runs incessantly (please use the commented line to stop the process at some point. Go to View -> Developer Tools -> JavaScript Console in Chrome and execute this code:

You can use this code on any Pinterest page to automatically scroll down but remember to execute the commented line at some point which makes it stop. After stopping the “scroll down and load more images” process, let’s grab all the pins, find any images that have repins, clean them up so only a number can be evaluated, and sort them so that images with most repins are on top. This basically organizes all images on your Pinterest page by amount of repins:

Now that our pins are sorted, we want to show these pins on the page. Let’s remove the main section with all the pins, append the pins from our saved and sorted array into a special element, and execute some CSS so that the pins show up correctly on the page:

Do you want to sort your pins by likes instead of repins? You can do that with just a slight modification to the repin code:

Using jQuery here is pretty awesome as it makes the code short. Since likes always have a div element (unlike repins) I had to check not only for the “like” element but also make sure that its contents are not 0. The jQuery selector magic allowed me to do that with one expression. So now, you can run this code on your Pinterest board or pins page and organize the page with most repinned and most liked pins on top. Here’s a screenshot that shows how this is done:

manipulating Pinterest Website to sort pins

Tags: ,

Facebook Twitter Hacker News Reddit More...