A Pinterest Widget

0 notes

Showing Example URLs in Tumblr Posts

I write posts about making Web sites, and occasionally I will need to show an URL in a post, without having it automatically converted to a clickable link. You would think that this sort of thing should be possible with blogging software like Tumblr’s, but you would be wrong.

http://yahoo.com - autoconverts. Um, what?

http://yahoo.com - even though I am using ampersand-pound-four-seven-semicolon instead of the second forward-slash, the thing autoconverts.

http://yahoo.com - nope, ampersand-pound-five-eight-semicolon instead of colon also autoconverts.

http:/∕yahoo.com - Unicode, for the not-quite-win. Sigh. This is cute, but not the right slash; the point is to allow developers to just copy and paste from a post. (Note to self: mischief may be possible for the owner of http://xn—yahoo-1d6b.com/, which is what this converts to when you try to paste it into a browser.)

I know! Let’s try changing my posting method to Markdown! I bet that fixes it … nope. Back to the old drawing board … how about … HTML entities?

http://yahoo.com - maybe I can fool them by using an entity for the colon? Nope. The ampersand gets converted to &amp, leaving my colon twisting in the wind.

Ooh! I know! Let’s try the Markdown backtick-trick:

http://yahoo.com

Nope. Autoconverted.

Really, Tumblr? REALLY? Must I write CUSTOM JAVASCRIPT to PREVENT YOU FROM DOING THIS TO ME?

Okay, fine. Here we go. I am about to try this:

http://yahoo.com

… inside a <pre> tag, with some JavaScript to find and convert it into actual colons. If it works, this should show an unconverted link:

http&colon;//yahoo.com

Yep, that’s got it. Here’s the source:

<script>
  var pre = document.getElementsByTagName('PRE'), i, n;
  for (i = 0, n = pre.length; i < n; i = i + 1) {
    pre[i].innerHTML = pre[i].innerHTML.replace(/\&amp;colon;/g, ':'); 
  }
</script>

Naturally this doesn’t work on my dashboard, which isn’t running JavaScript. >_<

Love you, Tumblr. Love you SO MUCH I COULD SCREAM.

0 notes

How to use Pinterest widgets in Tumblr posts

Tumblr’s most recent post editor is very enthusiastic about stripping “nonstandard” tags and attributes, including many that are standard in HTML5.

Unfortunately, Pinterest widgets are all built around links with configuration instructions—including the ones that tell the widget script that this is a widget, and any special configuration options—are passed as data: attributes. To make Tumblr work, we need to take all of our data: attributes and pass them through an attribute that Tumblr won’t strip. For this example we’ll be using the rev attribute, which is rarely used any more but still perfectly good HTML.

The Tags

Here’s what an embedded pin looks like straight from the Widget Builder:

<a data-pin-do="embedPin" href="http://pinterest.com/pin/99360735500167749/"></a>

Here it is translated for a Tumblr post:

<a class="pinterestWidget" rev="data-pin-do=embedPin" href="http://pinterest.com/pin/99360735500167749/"></a>

Here’s a more complicated example, an embedded board with configuration options:

<a data-pin-do="embedBoard" href="http://pinterest.com/pinterest/pin-pets/" data-pin-scale-width="200" data-pin-scale-height="400" data-pin-board-width="220"></a>

Here it is translated for a Tumblr post:

<a class="pinterestWidget" rev="data-pin-do=embedBoard data-pin-scale-width=200 data-pin-scale-height=400 data-pin-board-width=220" href="http://pinterest.com/pinterest/pin-pets/"></a>

Here’s a Pin It button:

<a href="//pinterest.com/pin/create/button/?url=http%3A%2F%2Fwww.flickr.com%2Fphotos%2Fkentbrew%2F6851755809%2F&media=http%3A%2F%2Ffarm8.staticflickr.com%2F7027%2F6851755809_df5b2051c9_z.jpg&description=Next%20stop%3A%20Pinterest" data-pin-do="buttonPin" data-pin-config="above"><img src="//assets.pinterest.com/images/pidgets/pin_it_button.png" /></a>

Here it is translated for a Tumblr post:

<a class="pinterestWidget" rev="data-pin-do=buttonPin data-pin-config=above" href="//pinterest.com/pin/create/button/?url=http%3A%2F%2Fwww.flickr.com%2Fphotos%2Fkentbrew%2F6851755809%2F&media=http%3A%2F%2Ffarm8.staticflickr.com%2F7027%2F6851755809_df5b2051c9_z.jpg&description=Next%20stop%3A%20Pinterest"><img src="//assets.pinterest.com/images/pidgets/pin_it_button.png" /></a>

The Script

To make these work, you’ll need to edit your Tumblr template. Put this script at the very end, just before the closing </body> tag:

<script>
    // be sure this script doesn't mess up anything else on this page
    (function (d, att) {
	    // declare some variables
	    var link, pair, part, i, j, k, n, hazWidget, script;
	    // find all the links on the page
	    link = d.getElementsByTagName('A');
	    // go through them one at a time
	    for (i = 0, n = link.length; i < n; i = i + 1) {
	        // do we have a rev and a class name that matches our pattern?
	        if (link[i][att]) {
	            // split the attribute into individual directives
	            pair = link[i][att].split(' ');
	            // loop through each directive
	            for (j = 0, k = pair.length; j < k; j = j + 1) {
	                // split into parts: first is key, second is value
	                part = pair[j].split('=');
	                // do we have two parts?
	                if (part[0] && part[1]) {
	                    // set the attribute on the link
	                    link[i].setAttribute(part[0], part[1]);
	                    // after this is all done, build a widget
	                    if (part[0] === 'data-pin-do') {
	                        hazWidget = true;
                        }
	                }
	            }
	        }
	    }
	    // do we need to build a widget?
	    if (hazWidget === true) {
	        // make a script
		    script = d.createElement('SCRIPT');
		    // set the type
		    script.setAttribute('type', 'text/javascript');
		    // set the character set
		    script.setAttribute('charset', 'utf-8');
		    // set the source
		    script.setAttribute('src', '//assets.pinterest.com/js/pinit.js');
		    // carefully append it to the body
		    d.getElementsByTagName('BODY')[0].appendChild(script);
	    }
	// if you would like to use some other attribute instead of rev, change it here
    }(document, 'rev'));
 </script>
0 notes

Pinterest Widget Test

Embedded Pin:

pin

Pin It Button:

image

Embedded Board:

0 notes

Iframe test.

0 notes

bitdrift:

Optimus Prime’s mind &lt;= 1.44 MB (Taken with instagram)

bitdrift:

Optimus Prime’s mind <= 1.44 MB (Taken with instagram)

5 notes

Optimus Prime&#8217;s mind

Optimus Prime’s mind

0 notes

House of the Rising Sun, played by vintage Russian computers. Wonderful!

0 notes

Tinker Bell escaped.

Tinker Bell escaped.

3 notes