Logo-English

GR

 

 

QA AUTOMATION ENGINEER

 

How to upload multiple pictures to Pinterest and not die trying

I don't know about you, my multiple readers (hahaha), but I have been on Social Networks since the beginning and I'm not that old, and let's agree that Social Networks are not that old either. Maybe they have been around for about 7 or 8 years? Well, in all this time we have seen a lot of Social Networks come and go, like MySpace, Badoo, Metroflog, other flogs, sexy or not, etc.

One of the most common features is the ability for users to upload pictures. And that has been the base for many of them, like Pinterest.

Pinterest is a Social Network where you can share photos and that's pretty much it. It has some interesting features like sharing pictures from other sites without having to download the pictures and then upload them to Pinterest. You can just browse other sites and "repin" a photo to your Pinterest "board" (boards are like folders where you organize your pictures) and you can "like" and upload a picture from your computer and some other stuff.

Similar to other Social Networks from the past (like Metroflog) in Pinterest you can only upload pictures one at a time, so if you want to upload more than one picture, you have to click on the button for "Pinning" a new picture, select it, select your board, write a description, and click on "submit" and then repeat this process every single time. But what happens when you want to upload hundreds of pictures? Now it's tedious and you probably will only upload some of them.

In this post, I will try to explain how to use iMacros to upload any number of photos to Pinterest and not die trying.

As in other projects, we are going to start by recording our base macro that we will use as a "backbone" and this will help to save us time with typing.

Recording Base Macro

Steps to upload a pin

1. Click on plus button

step1

2. Then click on "Upload a Pin"

3. Then click on "Choose File"

4. Pick a photo file

5. Pick one of your boards, type a description (optionally can check Twitter), finally click in Pin it

Now we need to recreate these steps but recording them in our script. To do it, we need to do the following:

Recording

  1. To start we need to launch our iMacros, then we click on Rec Tab.
  2. Then we go to www.pinterest.com and click on Record button on our iMacros window.

imacros_record

3. Once it is recording, we have to follow all the previous steps for uploading a picture to Pinterest. When we finish, we are going to have something like:

 

VERSION BUILD=8300326 RECORDER=FX
TAB T=1
URL GOTO=http://www.pinterest.com/
TAG POS=1 TYPE=BUTTON ATTR=TXT:Add<SP>a<SP>Pin
TAG POS=1 TYPE=BUTTON ATTR=TXT:Upload<SP>a<SP>pin
TAG POS=1 TYPE=INPUT:FILE FORM=NAME:NoFormName ATTR=NAME:file CONTENT=C:\Users\Gustavo\Desktop\camara\P1015683.JPG
TAG POS=2 TYPE=DIV ATTR=TXT:VWs
TAG POS=1 TYPE=LI ATTR=TXT:VWs
TAG POS=1 TYPE=TEXTAREA FORM=NAME:NoFormName ATTR=NAME:description CONTENT=Vag<SP>Fair<SP>2013
TAG POS=25 TYPE=BUTTON ATTR=TXT:Pin<SP>it

If we run this code as it is, it will not work as we expect. It will just repeat our steps to upload the same photo we use to record it, over and over. Therefore, we need a way to create a process that go thru the photos we want to upload and select each to upload them all. For that, we are going to edit our script a little bit adding some code to achieve this.

Editing our macro

First, we need to give our macro the list of pictures we want to upload. We need to give it a file that contains a list with the names of the photos. We are going to create a CSV file that contains this list of names of our pictures. It should look something like this:

P1015683.JPG
P1015684.JPG
P1015686.JPG
P1015688.JPG
P1015689.JPG
P1015690.JPG
P1015691.JPG
P1015692.JPG
P1015695.JPG
P1015696.JPG
P1015698.JPG
P1015704.JPG
P1015705.JPG

 After that we are going to also create a loop to tell our macro to loop thru all our pictures in that CSV file. We are going to add the following lines to our script or macro:

VERSION BUILD=8300326 RECORDER=FX
TAB T=1
SET !DATASOURCE C:\Users\Gustavo\Desktop\fotos.csv
SET !LOOP 1
SET !DATASOURCE_LINE {{!LOOP}}
URL GOTO=http://www.pinterest.com/
TAG POS=1 TYPE=BUTTON ATTR=TXT:Add<SP>a<SP>Pin
TAG POS=1 TYPE=BUTTON ATTR=TXT:Upload<SP>a<SP>pin
TAG POS=1 TYPE=INPUT:FILE FORM=NAME:NoFormName ATTR=NAME:file CONTENT=C:\Users\Gustavo\Desktop\camara\P1015683.JPG
TAG POS=2 TYPE=DIV ATTR=TXT:VWs
TAG POS=1 TYPE=LI ATTR=TXT:VWs
TAG POS=1 TYPE=TEXTAREA FORM=NAME:NoFormName ATTR=NAME:description CONTENT=Vag<SP>Fair<SP>2013
TAG POS=25 TYPE=BUTTON ATTR=TXT:Pin<SP>it

 The first line tells our iMacros "Use this file".

The second line we tell our iMacros in which loop we want to start. And finally with the last of the three new lines we tell it to assign to DATASOURCE_LINE the value of LOOP.

iMacros automatically assigns to LOO the value of the current loop. So, when iMacros is playing the third loop the value of LOOP = 3 and Therefore, the value of DATASOURCE_LINE is also = 3. DATASOURCE_LINE tells our iMacros which line of the document to use on the current loop.

Ok, we have already created our loop, but we didn't finished yet. If we run this macro as it is, the result would be still the same. We would be uploading the same photo over and over.

We are getting data from the CSV file but we are not doing anything with it. The next step is take that info and use it, for that we will use the COL1 variable. COL1, contains the value of the column 1 of the CSV file on the specified row by the iMacro. So in our example, when the LOOP = 1, then DATASOURCE_LINE =1 the value of COL1 will be whatever is contained on the COL 1 ROW 1 position of our CSV file. If LOOP =2 then DATASOURCE_LINE = 2, then the value of COL1 will be whatever is contained on the position COL1 ROW2 of our CSV file. We are going to change the name of the picture in line 9 for the COL1 variable as follows.

VERSION BUILD=8300326 RECORDER=FX
TAB T=1
SET !DATASOURCE C:\Users\Gustavo\Desktop\fotos.csv
SET !LOOP 1
SET !DATASOURCE_LINE {{!LOOP}}
URL GOTO=http://www.pinterest.com/
TAG POS=1 TYPE=BUTTON ATTR=TXT:Add<SP>a<SP>Pin
TAG POS=1 TYPE=BUTTON ATTR=TXT:Upload<SP>a<SP>pin
TAG POS=1 TYPE=INPUT:FILE FORM=NAME:NoFormName ATTR=NAME:file CONTENT=C:\Users\Gustavo\Desktop\camara\{{!COL1}}
TAG POS=2 TYPE=DIV ATTR=TXT:VWs
TAG POS=1 TYPE=LI ATTR=TXT:VWs
TAG POS=1 TYPE=TEXTAREA FORM=NAME:NoFormName ATTR=NAME:description CONTENT=Vag<SP>Fair<SP>2013
TAG POS=25 TYPE=BUTTON ATTR=TXT:Pin<SP>it

So far, our code should be functional. However, I would recomend a little tweak here, because we already are on pinterest.com we can remove the 6th line, this line just tells our macro, GO TO that URL and since Pinterest comes back to the original state we don't need that line, that would just refresh our page and is unnecessary.

VERSION BUILD=8300326 RECORDER=FX
TAB T=1
SET !DATASOURCE C:\Users\Gustavo\Desktop\fotos.csv
SET !LOOP 1
SET !DATASOURCE_LINE {{!LOOP}}
TAG POS=1 TYPE=BUTTON ATTR=TXT:Add<SP>a<SP>Pin
TAG POS=1 TYPE=BUTTON ATTR=TXT:Upload<SP>a<SP>pin
TAG POS=1 TYPE=INPUT:FILE FORM=NAME:NoFormName ATTR=NAME:file CONTENT=C:\Users\Gustavo\Desktop\camara\{{!COL1}}
TAG POS=2 TYPE=DIV ATTR=TXT:VWs
TAG POS=1 TYPE=LI ATTR=TXT:VWs
TAG POS=1 TYPE=TEXTAREA FORM=NAME:NoFormName ATTR=NAME:description CONTENT=Vag<SP>Fair<SP>2013
TAG POS=25 TYPE=BUTTON ATTR=TXT:Pin<SP>it

When we try with our script as it is we are going to have something like:


Unable to display content. Adobe Flash is required.

"DEBUGGING"

As we can see on the above video, something weird happened, this can be because, if you check on Pinterest, the uploading process take some time and our script is not prepared for that. For this situations we can use different solutions, the most easy and common (not always the best) is the use of the WAIT command. The usage is pretty simple you just need to type:

WAIT SECONDS=X

where X should be an integer seconds.

I will start using WAIT after selecting our photo. To give it time to upload. Our script would look like:

VERSION BUILD=8300326 RECORDER=FX
TAB T=1
SET !DATASOURCE C:\Users\Gustavo\Desktop\fotos.csv
SET !LOOP 2
SET !DATASOURCE_LINE {{!LOOP}}
TAG POS=1 TYPE=BUTTON ATTR=TXT:Add<SP>a<SP>Pin
TAG POS=1 TYPE=BUTTON ATTR=TXT:Upload<SP>a<SP>pin
TAG POS=1 TYPE=INPUT:FILE FORM=NAME:NoFormName ATTR=NAME:file CONTENT=C:\Users\Gustavo\Desktop\camara\{{!COL1}}
WAIT SECONDS=15
TAG POS=2 TYPE=DIV ATTR=TXT:VWs
TAG POS=1 TYPE=LI ATTR=TXT:VWs
TAG POS=1 TYPE=TEXTAREA FORM=NAME:NoFormName ATTR=NAME:description CONTENT=Vag<SP>Fair<SP>2013
TAG POS=25 TYPE=BUTTON ATTR=TXT:Pin<SP>it

 Now we need to test again to see if that solved our problem.

After testing again, it seems that the issue keeps happening. After reviewing slowly what happens, it seems that our script is not clicking on the correct button when trying to submit the PIN because our code is a little bit ambiguous:

TAG POS=25 TYPE=BUTTON ATTR=TXT:Pin<SP>it

 That means, "click on" o "find"...  "the 25th button that contains the 'Pin It' text". As we can see on Pinterest, all the pictures there have a Pin It button:

PinterestErro

If when we were recording the 25th "Pin It" button was our button, that doesn't mean the next time it will be on the same position. For big sites, like Pinterest, generated mostly dinamically, we have to be careful when picking elements, and be more specific when selecting them. Therefore, I will get help from Firefox and Firebug to identify correctly our button.

Steps to follow:

  1. Go to Pinterest and perform all steps necessary to upload a picture until we get the window where the description, board, etc., are set.
  2. Open Firebug
  3. Select the Pin It button.

pinterestfix

We are going to translate that HTML to our iMacros code

For iMacros each element is identified by the command TAG. The TAG command have 4 parts:

  1. POS
  2. TYPE
  3. ATTR
  4. CONTENT

POS. This tells iMacros the numeric position of an HTML element, in other words, if there's n equal elements, we can specify which one are we looking for. For example:

From this HTML code:

<UL>
<LI>Unordered information. 
<LI>Ordered information. 
<LI>Definitions. 
</UL>

We want to select "Definitions", we would use TAG POS=3 because it is the third LI element.

TYPE. We use it to specify the type of HTML element. For the previous example, it would be TYPE=LI. Getting, so far, something like TAG POS=3 TYPE=LI

ATTR. This is for specify the HTML attributes of the TAG. For example:

<ol>
<li value="30"> makes this list item number 30.
<li value="40"> makes this list item number 40.
<li> makes this list item number 41.
</ol>

 For the first line, the iMacros code would be:

TAG POS=1 TYPE=LI ATTR=VALUE:30

For the second line, the iMacros code would be:

TAG POS=2 TYPE=LI ATTR=VALUE:40

For the third one:

TAG POS=3 TYPE=LI

CONTENT. We use this parameter on HTML elements that can contain something, like inputs, textareas, etc. And it is to assign by it the content we want to specify, for example, for an input where we want to type something this would be:

TAG POS=1 TYPE=INPUT ATTR=CLASS:exampleclass CONTENT:Text<SP>we<SP>want<SP>add

 

Going back to our Pinterest script, we see that the HTML code of our button is:

<button class="rounded Button repinSmall pinIt primary Module ajax btn" type="submit">

 We change that to our iMacros way:

TAG POS=1 TYPE=BUTTON ATTR=CLASS:rounded<SP>Button<SP>repinSmall<SP>pinIt<SP>primary<SP>Module<SP>ajax<SP>btn&&TYPE:submit&&TXT:Pin<SP>it

 Because our button is already specific enough, we need to change the POS parameter from 25 to 1.

NOTE: <SP> is the code on iMacros for the spaces.

Finally, we can see on Pinterest that after each upload it shows a success window. We are going to add a WAIT for it at the end of our script:

VERSION BUILD=8300326 RECORDER=FX
TAB T=1
SET !DATASOURCE C:\Users\Gustavo\Desktop\fotos.csv
SET !LOOP 4
SET !DATASOURCE_LINE {{!LOOP}}
TAG POS=1 TYPE=BUTTON ATTR=TXT:Add<SP>a<SP>Pin
TAG POS=1 TYPE=BUTTON ATTR=TXT:Upload<SP>a<SP>pin
TAG POS=1 TYPE=INPUT:FILE FORM=NAME:NoFormName ATTR=NAME:file CONTENT=C:\Users\Gustavo\Desktop\camara\{{!COL1}}
WAIT SECONDS=15
TAG POS=2 TYPE=DIV ATTR=TXT:VWs
TAG POS=1 TYPE=LI ATTR=TXT:VWs
TAG POS=1 TYPE=TEXTAREA FORM=NAME:NoFormName ATTR=NAME:description CONTENT=Vag<SP>Fair<SP>2013
TAG POS=1 TYPE=BUTTON ATTR=CLASS:rounded<SP>Button<SP>repinSmall<SP>pinIt<SP>primary<SP>Module<SP>ajax<SP>btn&&TYPE:submit&&TXT:Pin<SP>it
WAIT SECONDS=5

 We run it again:

  Unable to display content. Adobe Flash is required.

Its working now! we just need now to specify that we want to start from LOOP 1 to 10,000 (hehe) and we are going to have our photos uploaded on Pinterest with just clicking the Play button.