uri encode shopify url to article - shopify

Question

Is there a way to uri encode a link in shopify:
http://www.tumblr.com/share?v=3&u={{ shop.url }}{{ article.url }}
Building out share buttons and tubmlr doesn't like that they are not encoded.

Answer 1

Not sure if it was recently added, but url_param_escape seems to do exactly what you want. This worked for me:
{{ shop.url | append: article.url | url_param_escape }}

Answer 2

My crude attempt is as follows:
{{ article.url | replace: ' ', '%20' | replace: '&', '%26' | replace: '?', '%3F' | replace: '!', '%21' | replace: ',', '%2C' | replace: "'", "%27" }}
and so on. I haven't mastered the art of writing liquid functions yet.

Answer 3

Unfortunately Shopify does not provide any filters to encode a URI. Your best bet is to use Javascript. For example add data-url="{{ shop.url }}{{ article.url }}" attribute to your HTML markup and give it a unique ID then script:
var x=document.getElementById("uniqueID");
if (x != null) {
var url='http://www.tumblr.com/share?v=3&u='+encodeURIComponent(x.getAttribute("data-url"));
x.setAttribute("href", url);
}
Call it in self invoking or at document ready if you like. Set href in HTML to whatever you wish for non-javascript browsers. You could consider using the Tumblr icon widget builder:
http://www.tumblr.com/buttons and their official JS because you never know when the link syntax may change

Answer 4

Bit late to the party here, but for anyone wondering, Shopify now has a filter for this built in.
{{ my_var | url_param_escape }}
So, in the case above, you could do:
{% capture my_escaped_url %}
{{ shop.url }}{{ article.url }}
{% endcapture %}
http://www.tumblr.com/share?v=3&u={{ my_escaped_url | url_param_escape }}
Hope this helps someone. You can read more here:
https://help.shopify.com/themes/liquid/filters/string-filters#url_param_escape

Answer 5

I ended up doing this using Tumblr's build a button widget and then modifying the JS slightly. Since I wanted to use the Tumblr icon from Font Awesome/Bootstrap, I simply deleted the style attributes that the JS assigns and then assigned the appropriate class to the anchor the JS creates. Instructions are as follows:
1. Get the code:
Choose a random button style (this won't matter because you'll end up deleting the code that specifies the background-image), set the post type to "photo", and select "Javascript" as the programming language (the last two option are found under the "Advanced" accordion). Once you've done that, Tumblr will spit out some code, which you can then modify.
2. Create a new snippet:
Create a new snippet in your theme's editor and then copy and paste in the scripts found in steps 1 and 3 of the button builder.
<script src="http://platform.tumblr.com/v1/share.js"></script>
<!-- Set these variables wherever convenient -->
<script type="text/javascript">
var tumblr_photo_source = "";
var tumblr_photo_caption = "";
var tumblr_photo_click_thru = "";
</script>
<!-- Put this code at the bottom of your page -->
<script type="text/javascript">
var tumblr_button = document.createElement("a");
tumblr_button.setAttribute("href", "http://www.tumblr.com/share/photo?source=" + encodeURIComponent(tumblr_photo_source) + "&caption=" + encodeURIComponent(tumblr_photo_caption) + "&clickthru=" + encodeURIComponent(tumblr_photo_click_thru));
tumblr_button.setAttribute("title", "Share on Tumblr");
tumblr_button.setAttribute("style", "display:inline-block; text-indent:-9999px; overflow:hidden; width:20px; height:20px; background:url('http://platform.tumblr.com/v1/share_4.png') top left no-repeat transparent;");
tumblr_button.innerHTML = "Share on Tumblr";
document.getElementById("tumblr_button_abc123").appendChild(tumblr_button);
</script>
3. Customize the JS:
First, set the variables. Then, you can specify your background image or icon for the anchor. Like I said above, I'm using the Tumblr icon from Font Awesome, so I just deleted all of the style attributes, the innerHTML, and assigned a class of "fa fa-tumblr".
If you want to use a background-image, you could simply replace the URL with your image's and tweak the height and width properties.
<script src="http://platform.tumblr.com/v1/share.js"></script>
<script type="text/javascript">
var tumblr_photo_source = "{{ product.featured_image | product_img_url: "master" }}";
var tumblr_photo_caption = "";
var tumblr_photo_click_thru = "{{ shop.url | append: product.url }}";
</script>
<script type="text/javascript">
var tumblr_button = document.createElement("a");
tumblr_button.setAttribute("class", "fa fa-tumblr");
tumblr_button.setAttribute("href", "http://www.tumblr.com/share/photo?source=" + encodeURIComponent(tumblr_photo_source) + "&caption=" + encodeURIComponent(tumblr_photo_caption) + "&clickthru=" + encodeURIComponent(tumblr_photo_click_thru));
tumblr_button.setAttribute("title", "Share on Tumblr");
document.getElementById("tumblr_button_abc123").appendChild(tumblr_button);
</script>
4. Include the button and snippet in your HTML:
Last, paste the code below wherever you want your button to show up.
<!-- Put this tag wherever you want your button to appear -->
<span id="tumblr_button_abc123"></span>
And add the snippet just before the </body> in your theme.liquid file.
<!-- Scripts for Tumblr Share Button -->
{% include 'your-tumblr-script-name' %}