Posts tagged ‘pinterest’


Pinterest’s 25 edge cases

I was snooping around the JavaScript that Pinterest uses for their “Pin It” button. No real reason. I’m just nosy.

Most of the code is what you would expect, but what jumped out at me were the 25 websites that get special treatment. In fact, Pinterest’s JavaScript is riddled with special handling for edge-cases on third-party sites. As a developer, I have the tendency to always search for the universal solution – one piece of code that works everywhere. While universal code is arguably “better”, this more often than not is what code looks like in the “real world”.

lookup: {
        artsy: {
            page: {
                seek: [/^https?:\/\/(.*?\.|)artsy\.net\/artwork\//,
                    /^https?:\/\/(.*?\.|)artsy\.net\/post\//
                ]
            },
            img: {
                seek: [/^https?:\/\/(.*?\.|)artsy\.net\//],
                act: "lookup"
            }
        },
        behance: {
            img: {
                seek: [/^http:\/\/behance\.vo\.llnwd\.net\//],
                act: "lookup"
            }
        },
        dasauge: {
            img: {
                seek: [/^https?:\/\/cdn?[0-9]\.dasauge\.net\//],
                act: "lookup"
            }
        },
        dailymotion: {
            page: {
                seek: [/^https?:\/\/.*?\.dailymotion\.com\//],
                act: "lookup",
                via: "id",
                multimedia: true,
                doNotCrawl: true
            }
        },
        dreamstime: {
            img: {
                seek: [/(.*?)\.dreamstime\.com\//],
                act: "lookup"
            }
        },
        etsy: {
            page: {
                seek: [/^https?:\/\/.*?\.etsy\.com\/listing\//],
                patch: {
                    img: function (g) {
                        return g.replace(/il_(.*?)\./,
                            "il_570xN.")
                    }
                }
            },
            img: {
                seek: [/^https?:\/\/.*?\.etsystatic\.com\//],
                patch: function (g) {
                    return g.replace(/il_(.*?)\./, "il_570xN.")
                },
                act: "lookup"
            }
        },
        fivehundredpx: {
            page: {
                seek: [/^https?:\/\/500px\.com\/photo\//],
                act: "lookup",
                via: "id",
                doNotCrawl: true
            },
            img: {
                seek: [/pcdn\.500px\.net\//],
                act: "lookup"
            }
        },
        facebook: {
            page: {
                seek: [/^https?:\/\/(.*?\.|)facebook\.com\//],
                act: "close",
                msg: "privateDomain",
                patch: function (g) {
                    return g.replace(/%privateDomain%/, "Facebook")
                }
            }
        },
        flickr: {
            page: {
                seek: [/^https?:\/\/www\.flickr\.com\//],
                act: "lookup",
                via: "id",
                doNotCrawl: true
            },
            img: {
                seek: [/staticflickr.com\//, /static.flickr.com\//],
                act: "lookup"
            }
        },
        geograph: {
            img: {
                seek: [/^https?:\/\/(.*?)\.geograph\.org\./],
                act: "lookup"
            }
        },
        googleReader: {
            page: {
                seek: [/^https?:\/\/.*?\.google\.com\/reader\//],
                act: "close",
                msg: "privateDomain",
                patch: function (g) {
                    return g.replace(/%privateDomain%/, "Google Reader")
                }
            }
        },
        googleList: {
            page: {
                seek: [/^https?:\/\/www\.google\.com\/search(.*&tbm=isch.*)/],
                patch: function (g) {
                    g.f.debug("patching Google Image Search results");
                    var i, j, a, b, c, d;
                    if (i = g.d.getElementById("ires")) {
                        i = i.getElementsByTagName("A");
                        j = 0;
                        for (a = i.length; j < a; j += 1) {
                            d = c = "";
                            if (i[j].href) {
                                b = i[j].href.split("imgrefurl=");
                                if (b[1]) c = b[1].split("&")[0];
                                b = i[j].href.split("imgurl=");
                                if (b[1]) d = b[1].split("&")[0]
                            }
                            if (c && d) {
                                b = i[j].getElementsByTagName("IMG");
                                if (b[0]) {
                                    g.f.set(b[0], "data-pin-url", decodeURIComponent(c));
                                    g.f.set(b[0], "data-pin-media", decodeURIComponent(d))
                                }
                            }
                        }
                    }
                }
            }
        },
        imdb: {
            img: {
                seek: [/^https?:\/\/(.*?)\.media-imdb\.com\/images\//],
                patch: function (g) {
                    return g.replace(/@@(.*)/,
                        "@@._V1_SX800.jpg")
                }
            }
        },
        kickstarter: {
            page: {
                seek: [/^https?:\/\/.*?\.kickstarter\.com\/projects\//],
                act: "lookup",
                via: "id",
                multimedia: true
            }
        },
        pinterest: {
            page: {
                seek: [/^https?:\/\/(.*?\.|)pinterest\.com\//],
                act: "close",
                msg: "installed"
            }
        },
        polyvore: {
            page: {
                seek: [/^https?:\/\/(.*?\.|)polyvore\.com\//],
                act: "lookup",
                via: "id",
                doNotCrawl: true
            },
            img: {
                seek: [/^https?:\/\/(.*?)\.polyvoreimg\.com\//],
                act: "lookup"
            }
        },
        shutterstock: {
            img: {
                seek: [/^https?:\/\/image.shutterstock\.com\//, /^https?:\/\/thumb(.*?).shutterstock\.com\//],
                act: "lookup"
            }
        },
        slideshare: {
            page: {
                seek: [/^https?:\/\/.*?\.slideshare\.net\//],
                act: "lookup",
                via: "id",
                multimedia: true,
                doNotCrawl: true
            }
        },
        soundcloud: {
            page: {
                seek: [/^https?:\/\/soundcloud\.com\//],
                act: "lookup",
                via: "id",
                multimedia: true,
                doNotCrawl: true
            }
        },
        stumbleuponFrame: {
            page: {
                seek: [/^https?:\/\/(.*?\.|)stumbleupon\.com\/su/],
                act: "bustFrame",
                serviceName: "StumbleUpon",
                frameId: ["tb-stumble-frame", "stumbleFrame"]
            }
        },
        ted: {
            page: {
                seek: [/^https?:\/\/(.*?)\.ted\.com\/talks\//],
                act: "lookup",
                via: "id",
                multimedia: true,
                doNotCrawl: true
            },
            img: {
                seek: [/^https?:\/\/(.*?)\.ted\.com\//],
                act: "lookup"
            },
            iframe: {
                seek: [/^https?:\/\/(.*?)\.ted\.com\//],
                act: "lookup",
                via: "id"
            }
        },
        tumblr: {
            img: {
                seek: [/^https?:\/\/.*?\.media\.tumblr\.com\//],
                patch: function (g) {
                    return g.replace(/_(\d+)\.jpg$/, "_1280.jpg")
                }
            }
        },
        tumblrList: {
            page: {
                seek: [/^https?:\/\/www\.tumblr\.com\/tagged/, /^https?:\/\/www\.tumblr\.com\/dashboard/],
                patch: function (g) {
                    g.f.debug("patching Tumblr search or index");
                    var i, j, a, b, c, d, e, h;
                    i = g.d.getElementsByTagName("LI");
                    j = 0;
                    for (a =
                        i.length; j < a; j += 1) {
                        h = g.f.get(i[j], "data-tumblelog-content-rating");
                        b = i[j].getElementsByTagName("A");
                        e = "";
                        c = 0;
                        for (d = b.length; c < d; c += 1)
                            if (b[c].id && b[c].id.split("permalink_")[1]) {
                                e = b[c].href;
                                break
                            }
                        if (e) {
                            b = i[j].getElementsByTagName("IMG");
                            c = 0;
                            for (d = b.length; c < d; c += 1)
                                if (h === "adult") {
                                    g.f.set(b[c], "data-pin-nopin", true);
                                    g.f.debug("do not pin per Tumblr content rating: " + b[c].src);
                                    g.f.log("nsfw_per_domain", b[c].src, e)
                                } else g.f.set(b[c], "data-pin-url", e)
                        }
                    }
                }
            }
        },
        vimeo: {
            page: {
                seek: [/^https?:\/\/vimeo\.com\//],
                act: "lookup",
                via: "link",
                patch: function (g) {
                    g.f.debug("patching Vimeo page");
                    var i, j, a, b, c, d;
                    i = g.d.getElementsByTagName("LI");
                    j = 0;
                    for (a = i.length; j < a; j += 1) {
                        if (i[j].id && i[j].id.match(/^clip/)) {
                            b = i[j].id.split("clip");
                            if (b[1]) {
                                b[1] = b[1].replace(/_/, "");
                                g.f.thumbMedia("http://vimeo.com/" + b[1], "vimeo", "link")
                            }
                        } else {
                            b = i[j].getElementsByTagName("A");
                            if (b[0])(b = g.f.get(b[0], "data-id")) && g.f.thumbMedia("http://vimeo.com/" + b, "vimeo", "link")
                        }
                        b = i[j].getElementsByTagName("IMG");
                        c = 0;
                        for (d = b.length; c < d; c += 1) g.f.set(b[c],
                            "data-pin-nopin", true)
                    }
                }
            },
            iframe: {
                seek: [/^http?s:\/\/vimeo\.com\/(\d+)/, /^http:\/\/player\.vimeo\.com\/video\/(\d+)/],
                act: "lookup",
                via: "link",
                patch: function (g) {
                    var i = null;
                    g = g.split("#")[0].split("?")[0].split("/").pop();
                    if (g > 1E3) i = "http://vimeo.com/" + g;
                    return i
                },
                att: "src"
            }
        },
        youtube: {
            page: {
                seek: [/^https?:\/\/www\.youtube\.com\/watch/],
                act: "lookup",
                via: "link",
                multimedia: true,
                extended: true
            },
            video: {
                seek: [/^https?:\/\/(.*?\.|)youtube\.com\/videoplayback/],
                act: "lookup",
                via: "link",
                att: "data-youtube-id",
                patch: function (g) {
                    var i = null;
                    if (g) i = "http://www.youtube.com/embed/" + g;
                    return i
                }
            },
            iframe: {
                seek: [/^https?:\/\/(.*?\.|)youtube\.com\/embed\//],
                act: "lookup",
                via: "link"
            },
            embed: {
                seek: [/^http:\/\/s\.ytimg\.com\/yt\//],
                patch: function (g) {
                    var i = null;
                    g = g.split("video_id=");
                    if (g[1]) {
                        i = g[1].split("&")[0];
                        i = "http://www.youtube.com/embed/" + i
                    }
                    return i
                },
                att: "flashvars"
            },
            img: {
                seek: [/^https?:\/\/(.*?\.|)ytimg\.com\/(vi|li)\//, /img.youtube.com\/vi\//],
                act: "lookup"
            }
        }
    }
 2 comments