Project: Exporting your Google Plus page followers to CSV with JavaScript ES6


This is a side project I did based on a a question I was asked to answer on Quora. In this project, we look at possible ways to export, extract, or grab information about users from our Google+ followers page. We ultimately use JavaScript in a browser console to scape user information using ECMAScript 6 (ES6).

Project Management Mindset

When I received this particular A2A (“ask to answer”) some months ago I had no clue what the answer was. But, I was intrigued by the question, so I began researching and investigating possible options. Even though I love coding for the LOVE of code itself, I have learned over my many years as a web and sofware developer that the best way to be of service with my coding and sofware development skills is to help people solve practical problems.

I began looking into this challenge with a project management mindset, though the phases were admittedly truncated and merged with other phases in some cases.

Initiation, Planning, & Requirements Clarification

My first step was to identify the problem and clarify stakeholder requirements. The stakeholder (OP) did not specify if there was a particular set of information being requested and was not available to clarify so I made my best guess as to what they were asking and proceeded from there. I decided to answer the question assuming any information that could be obtained from the Followers page was fair game.

This URL should get you to your own followers page once logged into your Google profile so you can follow along:

https://plus.google.com/u/0/people/haveyou

Possible Options for Grabbing and Exporting Google+ User Data To CSV:

Next, I evaluated whether there were built-in or third-party solutions available. Like I said, I love to code, but I have found that coding a solution (“reinventing the wheel”) isn’t always the right answer for rapid application development and problem solving.

After researching options I found these three to be most promising:

  • Native exporting from Google+
  • Exporting using Google Takeout
  • Coding a custom solution

Exporting natively from Google+ to Sheets used to work

At one time (around 2011) Google Plus did have the ability to export CSV data, according to this link.

The article looks really promising, but when you click to get the author’s template and instructions (as a Google Sheet) a big red splash displays saying that the instructions are deprecated because Google no longer offers the API that used to make this possible.

Now what?

Another option is to download your Google+ data using takeout.

Like Facebook, Twitter, and other popular data-driven web applications, Google+ let’s you download your data with their takeout service. This link tell you what you need to download to ensure you get your data: Download your Google+ data.

Unfortunately, after downloading and unzipping my data, I was not able to find any follower data. Perhaps that was because I didn’t have any followers when I started investigating this issue for you.

And though the data might be in your “Google+ Circles”, it only downloads as VCF files. There may be an online VCF to CSV converter that would help you get the info.

Building a custom Google+ JavaScript ES6 code scraper

Having not realized that last bit — that the reason I didn’t have a “followers” VCF was probably because I had no followers — I set about creating a custom JavaScript code that you can throw into your browser console.

Press F12 to open your browser console then paste in the following code:

/*
FILE NAME: ehCode_2018.08.24_JavaScriptES6_ScrapeGooglePlusFollowersToCSV_02.js
PROGRAMMER: Eric Hepperle
DATE CREATED: 08/24/18
DATE MODIFIED: 08/24/18
VERSION: 2.00
 
PURPOSE: Scrapes follower data from your Google Plus page
 
* This is a clean version with no debugs.
 
*/
 
console.clear();
 
var followers = document.querySelectorAll('#followersPanel .NzRmxf.vCjazd');
 
var followerArr = [];
 
document.querySelectorAll(' .jsery');
 
/* process all followers */
[...followers].forEach(function(follower, i) {
 
    // Build user object
    var name = follower.querySelector('.jsery').innerText;
    var profileLink = "https://plus.google.com/u/0/" + plusID;
    var avatar = follower.querySelector('img.zNPIue').src;
    var plusID = follower.querySelector('.rD1rod.nNrD1').dataset.profileid;
    
    userObj.name = name;
    userObj.plusID = plusID;
    userObj.profileLink = profileLink;
    userObj.avatar = avatar;
            
    // Add user object to follower array
    followerArr.push(userObj);
    
    // Reset user object before looping
    userObj = {};    
 
});
 
// Print the follower table
console.log("%c ********** FOLLOWERS TABLE **********","background:orange");
console.log("%c| USER NO |  NAME       |   PLUS ID   |  PROFILE LINK                    |  AVATAR LINK        |", "background: purple; color: white; font-weight: bold;");
 
followerArr.forEach(function(follower, j) {
    
    var data = "| " + (1+j) + " | " + follower.name + " | " +
               follower.plusID + " | " +
               follower.profileLink + " | " +
               follower.avatar + " |";
               
    console.log(data);
});

How to use the code:

  1. Open your Google Plus followers page
  2. Press F12 and choose the “Console” tab
  3. Cut and past the code above into the console
  4. Hit Enter. Now you should see a table with some orange and purple headers like this
  5. Copy the table into a text document and save it
  6. Search and replace for anything that begins with “VM” followed by some numbers, a colon, and more numbers. Replace those strings with nothing — that is how you delete many things simultaneously. These are line numbers and you don’t need them. Here is how you do it in Notepad++:
  7. After removing the VM-strings, Save your file as a CSV
  8. Open your new CSV file in your favorite spreadsheet program. Here is how you do it in Apache OpenOffice Calc:

Voila! Now you should see your data!

NOTE: The only data I was able to scrape was what was on the followers page, including:

  • Name
  • Plus ID
  • Link to the Avatar image
  • Link to the user’s Google+ profile (actually I built this from the plus id)
Date Published: 2018-10-12
Date Updated: 2022-09-09

Eric Hepperle

Eric loves to write code, play guitar, and help businesses solve challenges with code and design.
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x