Using Tampermonkey to Change the SparkPeople Start Page

Using Tampermonkey to Change the SparkPeople Start Page

A while back, SparkPeople made some changes to their Start page that threw off my typical pattern and pushed the Friend’s Feed from that main page back a bit. I tried to adapt, but never quite got there. So last week I decided to try and work around it, using Tampermonkey to change the Start page so it was more useful to me and the Friend’s Feed was back on it. I’m putting these steps here so I can share them while still using some decent formatting.

Change Log

March 6, 2017: Updated the link handling in the Firend’s Feed layout to open standard links in the parent page, not in the iFrame.

A Few Things to Start

I don’t use the tracking on the Start page, I always go to My Nutrition or My Exercises, so I decided to take it out while I was doing this. I was going to suggest just cutting that part of the code, but it’s throwing off a later change so I’ll have to debug that later.

I also don’t use the new Global Community Feed. The main point of this change is to replace it with the Friend’s Feed. There isn’t really a way around this, so if you do use it, I don’t have a way to keep both, unfortunately.

Basic Steps

  1. Install Tampermonkey.
  2. Create the Friend’s Feed layout change script.
  3. Create the Start page layout change script.

Install Tampermonkey

These instructions are for Chrome. If you use Firefox, the scripts should work in Greasemonkey, but I haven’t tested that so I’m not going link it here.

You can get Tampermonkey for Chrome here: https://chrome.google.com/webstore/detail/tampermonkey/dhdgffkkebhmkfjojejmpbldmpobfkfo?hl=en

Once installed, click the Tampermonkey icon  and from the menu select Dashboard.

Create Friend’s Feed Layout Change

This change is required for the Friend’s Feed to fit into the Community Feed space. However, since it runs on the Friend’s Feed page itself, if you visit it by clicking on the link on the Start page, it’ll no longer have the header or the footer.

  1. If a default script was created, just click the name of that script. If not, click the new script  icon.
  2. Select any text on the script page and delete it.
  3. Paste the following code:
// ==UserScript==
// @name Just FriendsFeed
// @namespace http://tampermonkey.net/
// @version 0.1
// @description Clear out the page headers and footers so only the feed is left.
// @author You
// @match https://www.sparkpeople.com/friend_feed_home.asp
// @grant none
// ==/UserScript==

(function() {
 'use strict';
 // Your code here...
 var pageWidth = document.getElementById('page_center_w');
 pageWidth.style.width = '550px';
 var pageColor = document.getElementById('page');
 pageColor.style.backgroundColor ='#f0f4f9';
 var headerWidth = document.getElementById('page_w');
 headerWidth.style.width = '600px';
 var feedWidth = document.getElementById('feed_ul');
 feedWidth.style.width = '550px';
 var headingChange = document.getElementsByTagName('h1')[0];
 headingChange.style.fontSize = '22px';
 headingChange.style.fcolor = 'black';
 var TopNavBar = document.getElementById('page_nav_w');
 if (TopNavBar) {
 TopNavBar.parentNode.removeChild(TopNavBar);
 }
 var FooterBar = document.getElementById('page_btm_w');
 if (FooterBar) {
 FooterBar.parentNode.removeChild(FooterBar);
 }
 var Footer = document.getElementById('footer');
 if (Footer) {
 Footer.parentNode.removeChild(Footer);
 }
 var NavFix = document.getElementsByClassName('h_nav_fix')[0];
 if (NavFix) {
 NavFix.parentNode.removeChild(NavFix);
 }
 var p, q = document.getElementsByTagName('a');
 for(p = q.length-1;p >= 0; p-- ) {
 q[p].target= '_parent';
 q[p].style.marginTop = '-1px';
 }
 var AdsDiv = document.getElementsByClassName('ad300_w')[0];
 if (AdsDiv) {
 AdsDiv.parentNode.removeChild(AdsDiv);
 }
 var TopAds = document.getElementById('ad728');
 if (TopAds) {
 TopAds.parentNode.removeChild(TopAds);
 }
 var SideAd = document.getElementById('gpt300x250');
 if (SideAd) {
 SideAd.parentNode.removeChild(SideAd);
 }
 var BottomAd1 = document.getElementById('today_right200x400flex');
 if (BottomAd1) {
 BottomAd1.parentNode.removeChild(BottomAd1);
 }
 var BottomAd2 = document.getElementById('today_left160x6002');
 if (BottomAd2) {
 BottomAd2.parentNode.removeChild(BottomAd2);
 }
 var BottomAd3 = document.getElementById('didomi-host');
 if (BottomAd3) {
 BottomAd3.parentNode.removeChild(BottomAd3);
 }
 var BottomAd4 = document.getElementById('gpt1x1');
 if (BottomAd4) {
 BottomAd4.parentNode.removeChild(BottomAd4);
 }
 var BottomAd5 = document.getElementById('overDiv');
 if (BottomAd5) {
 BottomAd5.parentNode.removeChild(BottomAd5);
 }
 var BottomAd6 = document.getElementById('tipDiv');
 if (BottomAd6) {
 BottomAd6.parentNode.removeChild(BottomAd6);
 }
 var BottomAd7 = document.getElementById('today_left160x600');
 if (BottomAd7) {
 BottomAd7.parentNode.removeChild(BottomAd7);
 }
 var BottomAd8 = document.getElementById('today_right200x400flex2');
 if (BottomAd8) {
 BottomAd8.parentNode.removeChild(BottomAd8);
 }
 var BottomAd9 = document.getElementByClassName('GoogleActiveViewClass')[0];
 if (BottomAd9) {
 BottomAd9.parentNode.removeChild(BottomAd9);
 }
 var BottomAd10 = document.getElementByClassName('ad300_w')[0];
 if (BottomAd10) {
 BottomAd10.parentNode.removeChild(BottomAd10);
 }
 var i, v = document.getElementsByTagName('iframe');
 for(i= v.length-1;i >= 1; i-- ) {
 v[i].parentNode.removeChild( v[i] );
 }
 var FloatingAd = document.getElementById('ad_unit');
 if (FloatingAd) {
 FloatingAd.parentNode.removeChild(FloatingAd);
 }
})();
  1. Save the script.

Create the Start Page Layout Change

  1. Click the new script  icon.
  2. Select any text on the script page and delete it.
  3. Paste the following code:
// ==UserScript==
// @name         Load Friends Feed in Start Page
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Load the Friends Feed into the Start page under the community feed box.
// @author       You
// @match        https://www.sparkpeople.com/myspark/start-now-sa.asp
// @grant        none
// ==/UserScript==

(function() {
    'use strict';
    // Your code here...
    var QuickTrack = document.getElementById('quick_tracking');
    QuickTrack.parentNode.removeChild(QuickTrack);
    var FullTrack = document.getElementById('full_tracking');
    FullTrack.parentNode.removeChild(FullTrack);
    var TrackPos = document.getElementsByClassName('tracking_pos')[0];
    TrackPos.parentNode.removeChild(TrackPos);
    var HeaderComm = document.getElementsByClassName('box1_h')[1];
    HeaderComm.parentNode.removeChild(HeaderComm);
    var CommFeed = document.getElementById('sa_inc_community_goal_feed');
    CommFeed.parentNode.removeChild(CommFeed);
    var CommDesc = document.getElementsByTagName('p')[0];
    CommDesc.parentNode.removeChild(CommDesc);

    var getRef = document.getElementById("maav_trigger_end");
    var makeIframe = document.createElement("iframe");
    makeIframe.setAttribute("width", "585px");
    makeIframe.setAttribute("height", "3200px");
    makeIframe.setAttribute("scrolling", "no");
    makeIframe.style.border = "0px solid #ded6f7";
    makeIframe.style.overflow = "hidden";
    makeIframe.setAttribute("src", "https://www.sparkpeople.com/friend_feed_home.asp");
    var parentDiv = getRef.parentNode;
    parentDiv.insertBefore(makeIframe, getRef.nextSibling);
})();
  1. Save the script.

Reload the Start Page

Now when you reload the Start page, the Friends Feed will be loaded in the area that used to hold the Community Feed. There may be a moment right after you reload where you see the tracking or see the header on the Friend’s Feed. This is because Tampermonkey makes the change after the page loads.

If anything is wonky, please let me know, and I’ll try to figure it out 🙂

Comments are closed.