View my page to see in action.
On Friday I posted about loading Tumblr’s reblog “notes” via AJAX into a custom theme. I’ve had enough interest via email to release it as a plugin of sorts. Here’s a brief run-through of how to install it:
While logged in to Tumblr, go to the Dashboard page that lists all your posts, view its source code, and search for the first occurrence of
display_post_notes. This is a function call with two parameters, the second of which you need to remember (it’s a short string such asoUVPjZYNo). This we’ll call your “user key”.In the
<head>of your custom theme, include links to the jQuery library and the notes.js file as follows:<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script> <script type="text/javascript" src="http://theme.matthewbuchanan.name/tumblr/tools/proxy/notes/notes.js"></script>Feel free to host the notes.js file or link to it on my server. If you wish to strip avatar images from the notes, you’ll need to host a copy of the file and modify the AJAX request to include
&noimages=1as a query string parameter.In your custom theme, for every post, include a Notes link as follows:
<a href="http://theme.matthewbuchanan.name/tumblr/tools/proxy/notes/?url=http://www.tumblr.com/dashboard/notes/{postID}/[user-key]" rel="{postID}" class="notes-button">Notes</a>Replace
[user-key]in the above URL with the user key string from Step 1. Leave both occurrences of{postID}as they are, they will be replaced by Tumblr’s theme engine with the ID of the current post. This proxy link converts the HTML fragment into a JSONP callback function, and is based in part on Troy Wolf’s PHP Proxy. (If JavaScript is disabled, the link falls back to loading an unstyled notes view as a new page.)Near the Notes link, add an empty
<div>as follows:<div class="notes-container" id="notes-{postID}"></div>Add styles to your CSS for the classes
.notes-button,.notes-container(and its descendant<ol>element containing the notes), and.notes-hide(the button that closes the notes once they’re open). (The styles for the button and container elements should both be set todisplay: none;initially.) If there are 15 notes or more, the button element gets a class of.faveadded to it, which I’ve used to style my notes icon differently for popular posts. Here’s the bare minimum CSS you’ll need to add:.notes-button, .notes-container { display: none; } .notes-container ol { list-style: none; }All feedback is welcomed, especially if anything’s unclear in these instructions. I’ll reserve the right to remove the scripts if anyone from Tumblr finds them objectionable. (This won’t break your theme, as nothing is visible on the page until the notes have loaded for a particular post.) Email me via the “By Day” link on this page.
Update: I’ve included explicit code for including the JavaScript files and for initially hiding the notes with CSS. Thanks for your feedback.
-
trk88 liked this
-
csebastian liked this
-
buckt liked this
-
number13 reblogged this from matthewb
-
insanedreams liked this
-
duongnv reblogged this from matthewb
-
nerowinger liked this
-
thefoodparty liked this
-
cuong205a liked this
-
truehearts liked this
-
mipovia liked this
-
todaywithme liked this
-
edk liked this
-
vitiation liked this
-
colinkloecker liked this
-
electronicalrattlebag liked this
-
nbr liked this
-
redcloud liked this
-
bananacasts liked this
-
indianjesus liked this
-
dawnowar reblogged this from nonlinearmind and added:
nonlinearmind’s instructions I’ve been meaning to figure out how to do this. Thanks!
-
cosmicdancer liked this
-
wyliefisher reblogged this from matthewb
-
coyotesqrl liked this
-
badarama liked this
-
starsgoingbleu liked this
-
timestolen liked this
-
lilykily liked this
-
nonlinearmind reblogged this from matthewb and added:
action. matthewb:
-
standingby liked this
-
bochenn liked this
-
richard-harrison liked this
-
victoriajean liked this
-
supernature liked this
-
bandit liked this
-
mercurypdx liked this
-
meagannnn liked this
-
betanight liked this
-
nifer liked this
-
michaellynton liked this
-
lifeinsideout liked this
-
anhelika liked this
-
102828 reblogged this from matthewb and added:
matthewb I just added...my site. Feedback would...nice. I’m...
-
furryrabbits liked this
-
jonaha liked this
-
callmepaul liked this
-
magicrob liked this
-
mojaam liked this
-
lo-in-sojo liked this
-
anthropophagous liked this
-
cirqueduliz liked this
-
shaneblog liked this
-
sparo liked this
-
alaskamiller liked this
-
keino liked this
-
bscgtanh liked this
-
regiie05 liked this
-
poortaste liked this
-
tappy liked this
-
mediumtedium liked this
-
jesslynteo liked this
-
twink reblogged this from makou
-
tenerifetenerife liked this
-
coffeestained liked this
-
kiela liked this
-
makou reblogged this from matthewb
-
katieparker liked this
-
aaronjennings liked this
-
blerg liked this
-
mattschwarz liked this
-
moofish liked this
-
chvnx liked this
-
ivanadaime liked this
-
nttm reblogged this from bip and added:
¡Sus deseos son órdenes e-amigo! ya incluí una “traducción” de las instrucciones y en el fondo agregué un ejemplo de CSS...
-
bip reblogged this from mattabad and added:
También quiero que esté en la wiki, yo de momento no entiendo algunos pasos como los de la CSS que no están explicados...
-
mattabad reblogged this from nttm
-
nttm reblogged this from matthewb and added:
Hoy me topé con este post de matthewb En el habla de cómo hacer para mostrar los “Tumblr Notes” en nuestra página...
-
ferrydust liked this
-
tarts liked this
-
toyra liked this
-
spreadyourlove reblogged this from matthewb
-
florencio liked this
-
listenandenjoy liked this
-
daryn liked this
-
andytlr liked this
-
icememine liked this
-
rnyhrt reblogged this from handa
-
johnzanussi liked this
-
chopan liked this
-
alohanico liked this
-
savvymac liked this
-
joker1007 reblogged this from handa
-
handa reblogged this from matthewb
-
westin liked this
-
rubendomfer liked this
-
aja liked this
-
kiske liked this
-
sneak liked this
-
michelenicole liked this
-
davesparks reblogged this from matthewb
-
kateoplis liked this
-
brier liked this
-
lallygagging liked this
-
stevekinney liked this
-
saitamanodoruji reblogged this from cxx
-
jarredbishop liked this
-
trumcgowan reblogged this from matthewb
-
tooepic liked this
-
digitalyn liked this
-
hud liked this
-
drazin liked this
-
petervidani liked this
-
elt liked this
-
dydric liked this
-
jotterbook liked this
-
yvynyl liked this
-
bwstarkey liked this
-
danielholter liked this
-
pierreism liked this
-
wickedmumi liked this
-
qiring liked this
-
pixihorrific liked this
-
jonascarlsson liked this
-
windroses liked this
-
griffinandhoxie liked this
-
arood liked this
-
migsambo liked this
-
sailingonthesea liked this
-
ontheroad liked this
-
puscic liked this
-
pdl2h reblogged this from cxx
-
reblogcentral reblogged this from matthewb
-
cxx reblogged this from matthewb and added:
画像でなくJavaScriptでやるのでスマート、後で導入するかも
-
acc liked this
-
idiophonebox liked this
-
nostrich liked this
-
roads2roam liked this
-
themarkpike liked this
-
joshjenkins liked this
-
larryh liked this
-
cubicle17 liked this
-
lenier reblogged this from matthewb and added:
new theme soon too.
-
eush liked this
-
iboong liked this
-
nikography liked this
-
fuen liked this
-
matthewb posted this