CODEWITHSUNDEEP
javascripttumblrtumblr-html
Michaela Wood
Michaela Wood

Reputation: 11

Adding Javascript Widget to a Single Tumblr Post

I only do scientific programming so I am not too familiar with javascript. I am trying to add a widget to one single tumblr post. The website I got the widget from makes it specifically for tumblr and it is:

<div class="shopthepost-widget" data-widget-id="4665345"><script type="text/javascript">!function(w,i,d,g,e,t){d.getElementById(i)||(element=d.createElement(t),element.id=i,element.src="https://widgets.rewardstyle.com"+e,d.body.appendChild(element)),w.hasOwnProperty(g)===!0&&"complete"===d.readyState&&w[g].init()}(window,"shopthepost-script",document,"__stp","/js/shopthepost.js","script")</script><div class="rs-adblock"><img src="https://assets.rewardstyle.com/production/424ab6aff12fe31b5b93d8f5ce7cc70d2953e565/images/search/350.gif" onerror='this.parentNode.innerHTML="Disable your ad blocking software to view this content."' style="width: 15px; height: 15px"><noscript>JavaScript is currently disabled in this browser. Reactivate it to view this content.</noscript></div></div>

If this is added to the actual theme on tumblr, it works great. However, I am trying to put this in just one post on tumblr. When I'm trying to make the post I will go to the html and add it in there but it will not actually show up on the site. Any tips on how to solve this? Thank you in advance.

Upvotes: 1

Views: 158

Answers (1)

lharby
lharby

Reputation: 3265

You have two choices available to you.

First: If you can host the javascript file somewhere remotely you can link it in the bottom of the post via the editor. The beauty of this is that you can update the js without having to update your main template.

For post edits you can select settings and choose HTML markup enter image description here

then add a link to the script in the bottom of the page. enter image description here

Or for a page edit it is the same concept you can switch to HTML markup and add it there. enter image description here

Second: you can create a function in your template and then only fire it on the relevant post or page.

The way I have done this in the past is to get the post/page name from the file path, split the file path into an array and add them to the classnames for the html element. Example here:

const dom = document.querySelector('html');
const path = document.location.pathname.split('/');
const primaryDir = path[1]; // get the primary folder
const secondaryDir = path[2]; // get secondary folder
const tertiaryDir = path[3]; // get the tertiary folder

const setIndexPage = () => {
    if (!primaryDir) { // if there is no primaryDir we should assume we are on the home/index page
        dom.classList.add('index');
    } else if (tertiaryDir) {
        dom.classList.add(primaryDir + ' ' + secondaryDir + ' ' + tertiaryDir);
    } else if (secondaryDir) {
        dom.classList.add(primaryDir + ' ' + secondaryDir);
    } else {
        dom.classList.add(primaryDir);
    }
}

Now we can target our function to run only if it finds the correct selector

if (document.querySelector('.yourClassName').length) {
    // run your function here
}

For .yourClassName you need to pass in the page or post name. By default Tumblr will create a unique post id (integer) and add that to the filepath. But you can also use text/verbose file names in addition.

The beauty of this method, is that the classnames will be added to every page, but you can chose to target only certain posts/pages with your js function.

Alternatively you could use this method and add the html selector only to your post/page content. So wrap your content in a div and give that a unique id or classname, but the method is the same.

Here is an example of a page where I am doing this (although I am concatenating the class names slightly differently). enter image description here

I hope this makes sense.

Upvotes: 1

Related Questions