Replace Facebook thumbnails in a RSS Reader (InoReader)

Question

I'm looking to create a Greasemonkey script that will replace Facebook thumbnails in InoReader or any other RSS reader. Previously I had been successfully using the script below in Google Reader, but it doesn't work in InoReader, Feedly, or any non-Google RSS Reader.

// ==UserScript==
// @id             greader-facebookurlreplacer
// @name           Google Reader - Facebook URL Replacer
// @version        1.1
// @namespace      
// @author         
// @description    
// @include        https://www.google.com/reader/*
// @include        https://www.feedspot.com/*
// ==/UserScript==

document.getElementById("chrome").addEventListener("DOMNodeInserted", function (e) {
if (e.target.tagName && e.target.tagName == "DIV" && /entry\s?/.test(e.target.className)) {
    var t = e.target.getElementsByTagName("img");
    for (var n in t) {
        var r = t[n];
        if (/.*akamaihd\.net.*_s\.\w+$/.test(r.src)) {
            r.style.width = r.style.height = "inherit";
            r.src = r.src.replace(/_s\.(\w+)$/, "_n.$1")
        }
    }
}
}, false)

I also tried using the following code retrieved from a similar post on stackoverflow, but it doesn't work either in InoReader.

$("img[src^='https://fbcdn-photos-a.akamaihd.net']")
.each(function()
{ 
  this.src = this.src.replace(/(\/[^/]*)s\.jpg$/, '/s720x720$1n.jpg');
});

Any help would be greatly appreciated.

What is a sample feed that has these images? Provide the HTML structure the image is in. Are iframes involved? — Brock Adams, Jul 01 '13 at 00:23
@BrockAdams Here is a link to part of the HTML containing the Facebook thumbnail portion extracted with Firefox's inspector. [Link](https://www.box.com/s/cse8ihadyoaj7m1lak80) Doesn't seem like iframes are involved. — user2031073, Jul 01 '13 at 08:49
I also changed the original question to apply to InoReader instead of Feedspot, but both seem to work the same. — user2031073, Jul 01 '13 at 08:56
A sample Facebook RSS feed containing the small thumbnail images would be https://www.facebook.com/feeds/page.php?id=24810773606&format=rss20 — user2031073, Jul 02 '13 at 09:58
Thanks for providing the site links; it really helped with the specifics. — Brock Adams, Jul 02 '13 at 10:53

score 1 · Accepted Answer · edited May 23 '17 at 11:56

1

DOMNodeInserted is deprecated. Don't use that approach anymore. Best to use a utility like waitForKeyElements.

After that, it's just a matter of finding the right jQuery selector for the images, and then the right regex to convert the src to the one for the larger image size. (But note that some sites deliberately make the regex approach impossible.)

For the sample RSS feed you listed, on inoreader.com, we can use Firebug to determine a CSS/jQuery path to the thumbnails of:

#reader_pane div.article_full_contents div.article_content a.underlink img

For the src changes/regex, see the code.

Here's how to replace the images, for that feed, on that reader:

// ==UserScript==
// @name     _InoReader thumbnail replacer
// @include  http://www.inoreader.com/*
// @require  http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js
// @require  https://gist.github.com/raw/2625891/waitForKeyElements.js
// @grant    GM_addStyle
// ==/UserScript==
/*- The @grant directive is needed to work around a design change
    introduced in GM 1.0.   It restores the sandbox.
*/
waitForKeyElements (
    "#reader_pane div.article_full_contents div.article_content a.underlink img",
    swapOutFbcdnThumnails
);

function swapOutFbcdnThumnails (jNode) {
    /*-- Change src from:
        https://fbcdn-photos- ... _s.jpg
        to:
        https://fbcdn-sphotos- ... _n.jpg
    */
    var newSrc      = jNode[0].src.replace (/fbcdn\-photos\-/, "fbcdn-sphotos-");
    newSrc          = newSrc.replace (/_s\.jpg$/, "_n.jpg");
    jNode[0].src    = newSrc;
}

edited May 23 '17 at 11:56

Community

1
1

answered Jul 02 '13 at 10:52

Brock Adams

90,639
22
233
295

Awesome, thanks! I just had to change the @include to https and inoreader.com/* (instead of www.inoreader.com/*) for it to work. What if I wanted to include Flickr thumbnails without using a separate script? I used a modified version of your code [here](https://www.box.com/s/y3b1fn4z27wa1zu12ibz). It works, but I'd like to combine it with the above to use in a single script instead of having a separate script. – user2031073 Jul 02 '13 at 20:40
All you need to do is use `if()` statements, inside `swapOutFbcdnThumnails()`, to test the `src` URL to determine which type of regex to apply. Ask a new question if you need to. – Brock Adams Jul 02 '13 at 21:52
Figured out the regex required to change Flickr thumbnails, but don't know how to include them in if() statements. I apologize as my Javascript knowledge is sparse. I posted a separate [question](http://stackoverflow.com/questions/17439306/replace-tumblr-pinterest-flickr-images-with-larger-versions-in-inoreader-rss) regarding combining everything into a single script. [Link](http://stackoverflow.com/questions/17439306/replace-tumblr-pinterest-flickr-images-with-larger-versions-in-inoreader-rss) – user2031073 Jul 03 '13 at 03:49
Also I referenced the script you wrote above in that question. Unfamiliar with the etiquette here and was wondering if you'd like me to credit your name for the scripts. – user2031073 Jul 03 '13 at 03:54
Don't need credit. (Just votes. ;) ) Looking at your new question now. – Brock Adams Jul 03 '13 at 03:57

Replace Facebook thumbnails in a RSS Reader (InoReader)

1 Answers1