AKA - Pinterest “Pin It” Button Implementation Revisit

I wrote a post about a year ago about how to install the Pinterest Pin It button. Why would I have to do that? Well, because the code generated in the developer docs was incomplete, confusing and led to many many broken implementations on sites. I know that’s true because of how popular that post was.

Read the old post here.

Pin It - A Year Later

Well, I’m writing this post because many of the same issues still exist. They have done a better job of making sure that people understand how to install the code, but they’ve still allowed it to be easy for people to install it incorrectly on their sites. The biggest problem is when the media parameter isn’t tagged properly in the button href.

The original version would just fail if an image wasn’t specified. The new version allows you to pin the page, with a broken image. How much sense does that make?

The Pin It Bookmarklet Works…

What makes all this worse is that the Pinterest bookmarklet that they’ve had since the very beginning has more functionality in it than the button does. Ever notice that? It’s really mind-boggling.

Why wouldn’t they just mimic the functionality of the bookmarklet with the Pin It button? When you use the bookmarklet it gives you a gallery of images for you to choose from to use in your pin. That makes the bookmarklet usable on many different types of pages with no configuration required. Whereas the button has to have one image hard coded to it. This makes zero sense.

So I thought… Why not just rewrite the button functionality so that it calls the Javascript from the bookmarklet instead of the code the button would normally run? Would that work? YES IT DOES!

The Pin It Button - Pin It Bookmarklet Hybrid

The implementation is really simple. Just start out by adding the following code, as recommended by Pinterest, on the page where you want the button to appear. The one change is that I’ve added an ID to a surrounding <span> tag.

<span id="pin-it"><a href="//pinterest.com/pin/create/button/"><img src="//assets.pinterest.com/images/pidgets/pin_it_button.png" alt="image" /></a></span>

Then, just add the following script to your page. Make sure you have the jQuery library on the page as well.

<script type="text/javascript">
    jQuery.getScript('//assets.pinterest.com/js/pinit.js', function() {
        jQuery('#pin-it a').attr('href', '#');
        jQuery('#pin-it a').attr('onclick', "javascript:void((function(d){e=d.createElement('script');e.setAttribute('type','text/javascript');e.setAttribute('charset','UTF-8');e.setAttribute('src','//assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);d.body.appendChild(e);}(document)));");
    });
</script>

That’s it. You should now get the bookmarklet action when the button is clicked, which will show a gallery of images on the page to choose from to use in your pin.

Here’s an example implemented right here:

Anyway… Happy pinning!

Let’s get right to it. Start using the bookmarklet by dragging the following bookmarklet link to your bookmark toolbar.

Blekko - Inbound Links

1. Go to a Blekko Inbound Links SEO report like: ubuntuforums.com/ /domainlinks
2. Click on the Blekko - Inbound Links bookmarklet from your toolbar.
3. Watch for a new <textarea></textarea> to be added to the top of the page containing all the link data from the report.

If you’re pulling data for a popular site like Twitter or Google, be prepared to be patient because there’s a shit ton of scraping going on. Average and/or small sites typically take a second or two. The example provided above takes only 3 or 4 seconds.

On the topic of links…link to me or share it if you like it!

The How and Why

I’m still working to improve my jQuery skills. Recently I needed to automate some tasks relating to scraping data from a site. That particular site was built relying heavily on Javascript and Ajax requests, which meant that I couldn’t use my favorite combination of cURL, grep, cut and Bash to do the scraping. I needed something that would run client-side and execute Javascript.

After thinking about it for a while, I decided I should learn about whether or not I’d be able to create a bookmarklet to do the job. I’ve been learning jQuery over the past few months, so I also wanted to make sure I could pair my developing jQuery skills with this bookmarklet project. I found this great post that provided the exact starting point I was looking for.

After using the framework provided in that post, I was able to complete that project. In fact, the project ended up working so well that I started to wonder about other ways I could use this technique to automate daily tasks.

Blekko’s SEO Inbound Links Report

Very frequently, I use Blekko’s SEO tools to research sites. I’m a big fan of all the free information Blekko provides webmasters and search engine marketers. In particular, I use the Blekko Inbound Links report often. This report shows all the incoming links for any site that Blekko has in its index. It’s really easy to use and navigate. To see this report for yourself, you’ll need to create an account with Blekko (FREE).

After your account is created, you can enter automateeverything.tumblr.com/ /domainlinks to see all the incoming links for this site. My blog is still very young (at the time of writing), so my link profile isn’t very impressive (you can help change that by linking to me!!). Here’s a screenshot of what you get by getting the same report for plus.google.com/ /domainlinks.

So, here’s the rundown of what you’re seeing:

• An overall summary of how many incoming links by how many unique domains.
• A list of domains, sorted by most authority to least (as judged by Blekko’s “Host Rank”).
• The count of how many links there are from each host/domain.

While this is good summary information, I also want to know which pages on the domain the links are coming from, what the anchor text is, what page is being linked to and whether it’s a nofollow link or not. To get that extra detail, you have to click on each of the link counts for each linking domain. That will load a detailed list of links and will show all the information I mentioned above.

Let me say again, I think it’s great that Blekko is providing all this information for free. But…I want more. I want it all in one place. I want it in Excel. I don’t want to try to combine browser addons and/or macros to get all this data. I don’t want to go to each individual from domain links page to get all the to, from and anchor link details. This would take a ton of time to do manually. This time would be far better spent actually analyzing the link data.

At the time of writing, Blekko does not provide an export option. That’s why I’m going to do it for everyone!

The Bookmarklet

This bookmarklet will automate the entire process. In just a second or so, it will scrape all of the information on the page, request each “links” page, scrape all that and then finally output a nicely formatted report in a text box at the top of the page. From there you’ll be able to just copy and paste into Excel to be used in a pivot table, graph or whatever.

I love Ubuntu, so I thought I’d do a demo on UbuntuForums.com to show the power of this bookmarklet.

Like I said, easy and fast! Here’s a few sample lines from the output of the UbuntuForums.com report:

From_Host   Host_Rank   Link_From_URL   Link_From_Anchor    nofollow    Link_To_URL
www.43things.com    468.7   http://www.43things.com/things/view/2140/use-linux      nf  http://ubuntuforums.com/
www.linuxjournal.com    1343.3  http://www.linuxjournal.com/content/post-penguicon-unity-unification-story          http://ubuntuforums.com/
ubuntuforums.org    1167.3  http://ubuntuforums.org/showthread.php?t=520091&page=2351           http://ubuntuforums.com/bump.php?
ubuntuforums.org    1167.3  http://ubuntuforums.org/showthread.php?t=635117 www.ubuntuforums.com        http://www.ubuntuforums.com/
bugs.launchpad.net  653.8   https://bugs.launchpad.net/ubuntu/+source/evolution/+bug/349312     nf  http://ubuntuforums.com/
bugs.launchpad.net  653.8   https://bugs.launchpad.net/ubuntu/+source/fglrx-installer/+bug/545257       nf  http://ubuntuforums.com/
bugs.launchpad.net  653.8   https://bugs.launchpad.net/ubuntu/+source/fglrx-installer/+bug/545257/comments/6        nf  http://ubuntuforums.com/
www.geek.com    927.7   http://www.geek.com/articles/geek-pick/microsoft-expertzone-training-teaches-best-buy-employees-about-linux-inferiority-2009097/        nf  http://www.ubuntuforums.com/
www.ubuntugeek.com  257.5   http://www.ubuntugeek.com/avast-antivirus-for-ubuntu-desktop.html       nf  http://www.ubuntuforums.com/
www.ubuntugeek.com  257.5   http://www.ubuntugeek.com/avast-antivirus-for-ubuntu-desktop.html/comment-page-2        nf  http://www.ubuntuforums.com/
www.piratbyran.org  100.6   http://www.piratbyran.org/index.php?view=forum&a=thread&id=37918&fview=34           http://www.ubuntuforums.com/
www.forevergeek.com 122.7   http://www.forevergeek.com/2005/04/ubuntu_504_hoary_hedgehog_review/    Official Ubuntu forums/suppport site        http://ubuntuforums.com/
www.forevergeek.com 122.7   http://www.forevergeek.com/2005/04/ubuntu_504_hoary_hedgehog_review/?replytocom=21953   Official Ubuntu forums/suppport site    nf  http://ubuntuforums.com/
www.forevergeek.com 122.7   http://www.forevergeek.com/2005/04/ubuntu_504_hoary_hedgehog_review/?replytocom=21959   Official Ubuntu forums/suppport site    nf  http://ubuntuforums.com/
www.forevergeek.com 122.7   http://www.forevergeek.com/2005/04/ubuntu_504_hoary_hedgehog_review/?replytocom=21969   Official Ubuntu forums/suppport site    nf  http://ubuntuforums.com/
www.forevergeek.com 122.7   http://www.forevergeek.com/2005/04/ubuntu_504_hoary_hedgehog_review/?replytocom=21974   Official Ubuntu forums/suppport site    nf  http://ubuntuforums.com/
www.forevergeek.com 122.7   http://www.forevergeek.com/2005/04/ubuntu_504_hoary_hedgehog_review/?replytocom=21985   Official Ubuntu forums/suppport site    nf  http://ubuntuforums.com/www.43things.com    468.7   http://www.43things.com/things/view/2140/use-linux      nf  http://ubuntuforums.com/
www.linuxjournal.com    1343.3  http://www.linuxjournal.com/content/post-penguicon-unity-unification-story          http://ubuntuforums.com/
ubuntuforums.org    1167.3  http://ubuntuforums.org/showthread.php?t=520091&page=2351           http://ubuntuforums.com/bump.php?
ubuntuforums.org    1167.3  http://ubuntuforums.org/showthread.php?t=635117 www.ubuntuforums.com        http://www.ubuntuforums.com/
bugs.launchpad.net  653.8   https://bugs.launchpad.net/ubuntu/+source/evolution/+bug/349312     nf  http://ubuntuforums.com/
bugs.launchpad.net  653.8   https://bugs.launchpad.net/ubuntu/+source/fglrx-installer/+bug/545257       nf  http://ubuntuforums.com/
bugs.launchpad.net  653.8   https://bugs.launchpad.net/ubuntu/+source/fglrx-installer/+bug/545257/comments/6        nf  http://ubuntuforums.com/
www.geek.com    927.7   http://www.geek.com/articles/geek-pick/microsoft-expertzone-training-teaches-best-buy-employees-about-linux-inferiority-2009097/        nf  http://www.ubuntuforums.com/
www.ubuntugeek.com  257.5   http://www.ubuntugeek.com/avast-antivirus-for-ubuntu-desktop.html       nf  http://www.ubuntuforums.com/
www.ubuntugeek.com  257.5   http://www.ubuntugeek.com/avast-antivirus-for-ubuntu-desktop.html/comment-page-2        nf  http://www.ubuntuforums.com/
www.piratbyran.org  100.6   http://www.piratbyran.org/index.php?view=forum&a=thread&id=37918&fview=34           http://www.ubuntuforums.com/
www.forevergeek.com 122.7   http://www.forevergeek.com/2005/04/ubuntu_504_hoary_hedgehog_review/    Official Ubuntu forums/suppport site        http://ubuntuforums.com/
www.forevergeek.com 122.7   http://www.forevergeek.com/2005/04/ubuntu_504_hoary_hedgehog_review/?replytocom=21953   Official Ubuntu forums/suppport site    nf  http://ubuntuforums.com/
www.forevergeek.com 122.7   http://www.forevergeek.com/2005/04/ubuntu_504_hoary_hedgehog_review/?replytocom=21959   Official Ubuntu forums/suppport site    nf  http://ubuntuforums.com/
www.forevergeek.com 122.7   http://www.forevergeek.com/2005/04/ubuntu_504_hoary_hedgehog_review/?replytocom=21969   Official Ubuntu forums/suppport site    nf  http://ubuntuforums.com/
www.forevergeek.com 122.7   http://www.forevergeek.com/2005/04/ubuntu_504_hoary_hedgehog_review/?replytocom=21974   Official Ubuntu forums/suppport site    nf  http://ubuntuforums.com/
www.forevergeek.com 122.7   http://www.forevergeek.com/2005/04/ubuntu_504_hoary_hedgehog_review/?replytocom=21985   Official Ubuntu forums/suppport site    nf  http://ubuntuforums.com/

Notes on Usage

• The bookmarklet is cross-browser and cross-platform. If you run into any compatibility issues at all, please drop me a comment with the details of your platform and the query in Blekko.
• This bookmarklet works by calling the actual Javascript file from my public Dropbox folder. You can see the full code here: http://dl.dropbox.com/u/56691816/automateeverything/bookmarklets/blekko-inbound-links.js
• Since this bookmarklet executes code that’s pulled from an external source, it’s functionality and feature set is subject to change. Not to freak you out but if I decided to do nasty things with the Javascript at some point in the future, the only way you’d know is if you inspected the file each time before running it. But, isn’t that the case with any software that updates its-self?

I hope you enjoy it. Please feel free to let me know if you have feature requests or bugs.

Enjoy and happy automation!