How to Add Evernote Site Memory Button to Tumblr Blog
To accomplish this we will need a few things:
Your customize Tumblr URL
Your Evernote Site Memory button Code
Getting to Your Customize Theme Page
We will need to edit your Tumblr theme to include the Evernote Site Memory button and add some jQuery to manipulate the showing and hiding of the button where applicable.
To access your Tumblr Theme code got to the customize URL (http://www.tumblr.com/customize) or click "Customize" in the right hand column.
Click the "Theme" link on the customize toolbar to open your Theme HTML context. The Theme HTML is where we make the magic happen.
Evernote Site Memory Button
In a new tab go to the Evernote Site Memory Button Builder. On this page you can build you site memory button. Evernote has provided a few different options to fit into various layouts. After you build your button copy the code from the Button Preview section.
My tumblr site uses the following button code:
<script type="text/javascript" src="http://static.evernote.com/noteit.js"> <a href="#" onclick="Evernote.doClip({contentId:'post',providerName:'Andrew Epperson\'s blog'}); return false;"><img alt="Clip to Evernote" src="http://static.evernote.com/article-clipper-vert.png" border="0" /></a>
Take your copy of the code and insert it into your Theme HTML at the desired spot. Wrap the site memory button code inside of a div with and id of "enClip". We will use this id for the jQuery. The code should like this:
<div id="enClip"> <script type="text/javascript" src="http://static.evernote.com/noteit.js"> <a href="#" onclick="Evernote.doClip({contentId:'post',providerName:'Andrew Epperson\'s blog'}); return false;"><img alt="Clip to Evernote" src="http://static.evernote.com/article-clipper-vert.png" border="0" /></a></div>
We now need to give our post content the id of "post" that we are declaring in the "contentId" parameter of the Evernote clip javascipt. Assign the div that contains your posts elements the id of "post". Yes on the homepage this will create duplicate IDs which should be unique, but the HTML will still render and Evernote requires an ID and not a class for this purpose.
Using jQuery to Show the Button
Now we want the Evernote Site Memory Button to show an the individual post, but not on the homepage with multiple post. This is desired because of how Tumblr repeats posts in the theme our post id of "post" is repeated on the homepage and the button wouldn't know which id to pull content from.
Within your <style></style> tag add the styling to hide the "enClip" div and any other styling that is required for layout on the page. My css looks like:
#enClip {float:left; padding-right:10px; display:none;}
Now we add our jQuery library and code to show the button on the individual post pages. Add the following code before your tag (replacing YOURURL with your Tumblr blog username:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"> <script type="text/javascript"> $(function() { var wl = window.location.href; if ( wl != "http://YOURURL.tumblr.com/" ) { $("#enClip").show(); } }); </script>
The above code checks to see if the URL does not equal the path to your homepage. If it does not match then we show the enClip div that contains the Evernote Site Memory Button.
Now you can save your Theme edits by click the "Save" button in the upper right corner of the customize page and then view your Tumblr blog to see the results.