Tumblr like button not working

New Page

Tumblr quick like button not working

Ask

Asked 10 years, 5 months ago

Modified 8 years and 5 months ago

viewed 8k times

This question shows research effort; it is useful and clear

0

This question shows no research effort; unclear or not useful

Bookmark this question.

View activity on this post.

EDIT April 2013: The old code is no longer needed. Use Tumblr’s new shortcodes for the “Like” and “Reblog” buttons instead!

https://developers.tumblr.com/post/49193689915/attn-fantastic-theme-developers-tumblr-users-can

Old code:

I’m using code from @ThinkingStiff (https://stackoverflow.com/a/9048446/351320).

Here is the live example: http://themelab01.tumblr.com/

My html code:

{block:Posts} {block:Text} <li id=”{PostID}” class=”post text”> {block:Title} <h3><a href=”{Permalink}”>{Title}</a ></h3> {/block:Title} {Body} </li> <a href=”{ReblogURL}” class=”reblog”>reblog</a> <a href=”#” class=”like” >like</a> {/block:Text}

CSS

#like-it { display: none; } .liked, .like:hover { color: red !important; }

js

$(document).on(‘click’, ‘.like’, function (event) { event.preventDefault(); var command = $(this).hasClass(‘liked’) ? ‘unlike’ : ‘like’, post = $(this).closest(‘.post’), oauth = post.find(‘.reblog’).attr(‘href’).slice(-8), id = post.attr(‘id’) , likeUrl = ‘http://www.tumblr.com/’ + command + ‘/’ + oauth + ‘?id=’ + id;$(‘#like-it’).attr(‘src’, likeUrl) ; $(this).toggleClass(‘liked’); });

and the empty iframe is at the bottom of the page. However, that doesn’t work. When I click “Like”, it increases the number of posts I like in my dashboard (where it says “N. Liked posts”), but the post does not appear on the Like page likes and the text should stay red, but it’s not. I miss him?

  • javascript
  • tumblr

Compare

Share a link to this question

Copy link CC BY-SA 3.0

improve this question

Follow

Follow this question to receive notifications

modified on May 23, 2017 at 12:21

Community user avatar

Community bot

1 1 1 silver badge

asked on April 25, 2012 at 9:57 am

Barbara user avatar

barbara barbara

10.9k 6 6 gold badges 30 30 silver badges 43 43 bronze badges

1

  • I posted updated code below. In your example above you have {PostID} inside of a {block:Text}. This means it would not be visible on other post types, like pictures. Also, I don’t see the like-it <iframe> so that could be the issue as well. The easiest solution is to use my new code though.

    –  ThinkingStiff

    Apr 25, 2012 at 20:36

Add a comment  | 

1 respuesta1

Ordenado por: Restablecer a predeterminado

Puntaje más alto (predeterminado) Tendencia (los votos recientes cuentan más) Fecha de modificación (más reciente primero) Fecha de creación (el más antiguo primero)

This answer is useful

0

This answer is not useful

Show activity on this post.

Actualicé mi código recientemente para que sea un esfuerzo de cortar y pegar. Esto elimina la necesidad de jQuery y la identificación de la publicación, dos áreas con las que la gente siempre tiene problemas.

El tutorial está aquí: http://like-button.tumblr.com

Cut and paste the following code block into your theme immediately before </head>. This will give you a like button on each post that looks like the default Tumblr grey heart. It will turn red when you hover over it and when you click it. If you click it again, it will turn grey again and delete the Like.

<style> .my-like { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAARCAYAAAA/mJfHAAABH0lEQVQ4y62T30vCUBiGv/9YuhBLkCA08FdogRFFYFEUhhZNCCQoSESiIOii68pl5qV6s8Eb7+SMHXNs6S7ejZ3zvA+ccT4BICofvS88dJ7w8vqG8WQC754K17lPjrx3z3l8D4YoVaqIrWbcJNbzaHefNZjfXPdy5b0jsO/IRqMxUpmSBnhz2bx1QL79GPbpEePmzhdSyW8fBDL0SK68HwiGCT2S3NiKREaPzP7QRRNPZSHpwm4kMnqkYbQikdEjZv8HK2ubS4nY75mD6WU8qzeXkrHvToBlWSjuHC4kYo99V8bwBnM0/iMiz542myq2bSPskcmR/zPos7lvP8Lv/nGd+/N6c2Xq2KcXhiY6qV1rxwotU3n/NHF8fgW+g9hfsHJlJUYljcgAAAAASUVORK5CYII=) !important; height: 17px; width: 19px; cursor: pointer; display: online block; vertical alignment: top; } .my-liked, .my-like:hover { background-image: url(data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAABMAAAARCAYAAAA/mJfHAAABSklEQVQ4y2P4//8/Awy/O3fu/905c/4/2779/69Pn/4jy8Hwz/fv/z/buvX/vfnz/7+/eBFFDZj4cOXK/8O+Pv+36+rA8W4zs/8Ply1DUXx/4cL/u0yMUdQdCQ76/+nWLbA6hq +PH//fbW6OogAZ3+zvByu81t6OU80ea6v/P16//s9wqboKpyIYPhYeTlDN1abG/wz7HR0JKiQGH3Bz+8+ww0CfKobtMjb6z0ANg+CGgQKPKt50dfnPcL6wkCqGXaoo/8/w5tgxyg3T0wUnYHBiPJuZSZFhF8pK/8NzACjrgKKWHINAOef3168Iw0D429OnGFmKEAZlJVDKR8mbMAyy4XRqClEGnc3J+f/nxw/MjI6OQflxh6EBzvR0Z9o0rCUKVsNA+MuD+/9PJiSgGHQmPf0/KDhw6cFpGAy/OnAAbOibEyf+E1ILAFBjDrchm7KrAAAAAElFTkSuQmCC) !important; height: 17px; width: 19px; cursor: pointer; display: online block; vertical alignment: top; } </style> <script> window.onload = function () { document.body.insertAdjacentHTML( ‘beforeEnd’, ‘<iframe id=”my-like-frame” style=”display:none;”></iframe > ‘ ); document. addEventListener(‘click’, function (event) { var myLikeLink = event.target; if( myLikeLink.className.indexOf( ‘my-like’ ) > -1 ) { var myLikeFrame = document.getElementById( ‘my-like-frame ‘ ), liked = ( myLikeLink.className == ‘my-liked’ ), command = liked ? ‘unlike’ : ‘like’, reblog = myLikeLink.getAttribute( ‘data-reblog’ ), postId = myLikeLink.getAttribute( ‘ data-id’ ), oauth = reblog.slice( -8 ), likeUrl = ‘http://www.tumblr.com/’ + command + ‘/’ + oauth + ‘?id=’ + postId; myLikeFrame.src = likeUrl; liked? myLikeLink.className = ‘my-like’: myLikeLink.className = ‘my-liked’; }; }, false ); }; </script>) > -1) { var myLikeFrame = document.getElementById(‘my-like-frame’), liked = (myLikeLink. className == ‘my-liked’ ), command = liked? ‘unlike’: ‘like’, reblog = myLikeLink.getAttribute( ‘data-reblog’ ), postId = myLikeLink.getAttribute( ‘data-id’ ), oauth = reblog.slice( -8 ), likeUrl = ‘http:/ /www.tumblr.com/’ + command + ‘/’ + oauth + ‘?id=’ + postId; myLikeFrame.src = likeUrl; As? myLikeLink.className = ‘my-liked’: myLikeLink.className = ‘my-liked’; }; }, fake ); }; </script> ) > -1 ) { var myLikeFrame = document.getElementById( ‘my-like-frame’ ), liked = ( myLikeLink.className == ‘my-liked’ ), command = liked? ‘unlike’: ‘like’, reblog = myLikeLink.getAttribute( ‘data-reblog’ ), postId = myLikeLink.getAttribute( ‘data-id’ ), oauth = reblog.slice( -8 ), likeUrl = ‘http:/ /www.tumblr. com/’ + command + ‘/’ + oauth + ‘?id=’ + postId; myLikeFrame.src = likeUrl; As? myLikeLink.className = ‘my-liked’: myLikeLink.className = ‘my-liked’; }; }, fake ); }; </script> postId = myLikeLink.getAttribute( ‘data-id’ ), oauth = reblog.slice( -8 ), likeUrl = ‘http://www.tumblr.com/’ + command + ‘/’ + oauth + ‘?id= ‘ + postId; myLikeFrame.src = likeUrl; As? myLikeLink.className = ‘my-liked’: myLikeLink.className = ‘my-liked’; }; }, fake ); }; </script> postId = myLikeLink.getAttribute( ‘data-id’ ), oauth = reblog.slice( -8 ), likeUrl = ‘http://www.tumblr.com/’ + command + ‘/’ + oauth + ‘?id= ‘ + postId; myLikeFrame.src = likeUrl; As? myLikeLink.className=’my-like’: myLikeLink.className=’ my-liked’; }; }, fake ); }; </script>

Next, cut and paste the following button code into your theme where you want to place your like button (it should be inside your {block:Posts} block).

Coded:

<div class=”my-like” data-reblog=”{ReblogURL}” data-id=”{PostID}”></div>

Compare

Share a link to this answer

Copy link CC BY-SA 3.0

Improve this answer

Follow

Follow this answer to receive notifications

modified on April 25, 2012 at 8:32 PM

answered on April 25, 2012 at 7:55 PM

ThinkingStiff user avatar

Thinking Hard Thinking Hard

64.2k 30 30 gold badges 144 144 silver badges 238 238 bronze badges

3

  • Oh great. Thanks! I should’ve re-checked the main source first. Gonna try it now 😀 Btw, is there a way to tweak this so that the js can be placed the bottom of the page instead? I’m using html5 Boilerplate and it would be great to have all the code just in one place. html5boilerplate.com/docs/plugins.js-and-script.js/#scriptjs

    –  Barbara

    Apr 25, 2012 at 20:36

  • @Barbara Yes, it can be at the bottom of the page. I might change my tutorial since more people put code at the bottom.

    –  ThinkingStiff

    Apr 25, 2012 at 20:49

  • That would be awesome. Thanks!

    –  Barbara

    Apr 25, 2012 at 22:10

Add a comment  | 

Your Answer

Thanks for contributing an answer to Stack Overflow!

  • Please be sure to answer the question. Provide details and share your research!

But avoid …

  • Pedir ayuda, aclaraciones o responder a otras respuestas.
  • Make opinion-based statements; Support them with references or personal experience.

To learn more, check out our tips for writing great responses.

saved draft

Draft rejected

Sign up or log in

Sign up with Google

Sign up using Facebook

Sign up using your email and password

Send

Post as guest

name

Email

Required, but never displayed

Post as guest

Yam

E-mail

Required, but never displayed

Post your answer Ignore

By clicking “Post your answer” you agree to our Terms of Service, Privacy Policy and Cookies Policy

Not the answer you are looking for? Browse other tagged questions

  • javascript
  • tumblr

or ask your own question.

  • The overflow blog
  • Ethereum finally merges, semiconductors remain scarce (Ep. 490)

  • Stack Overflow Trends: Weekday and Weekend Site Activity

  • Featured in Meta
  • Recent color contrast changes and accessibility updates

  • Reviewer overboard! Or a request to improve the onboarding guide for new…

  • Collective update: recognized members, articles and GitLab

  • Do I need to explain other people’s answers in code?

Leap

4

heart (like) button on tumblr homepage

1

quick like button on tumblr

Related

1717

JavaScript post request as a submission form

2987

How can I tell which radio button is selected via jQuery?

3937

What is the !! (not not) operator in JavaScript?

2058

Shorting Array.forEach like calling break

3

Tumblr OAuth image post gives me 401/”Invalid OAuth credentials”

2670

Open a URL in a new tab (not a new window)

1

Tumblr online like button on homepage

3105

Why does my JavaScript code get an error “No ‘Access-Control-Allow-Origin’ header is present on the requested resource”, when Postman does not?

burning questions from the net

  • Are a monarch’s title and cipher changed if the queen has the same name as her former king?
  • Any advice for writing scenes between characters where there is no action?
  • Alchemist fire and burn it! Critical damage
  • Which region codes require GDPR compliance?
  • Assign a boolean comparison value to a variable
  • Ripple Voltage Filter Capacitor
  • For linear regression, why do people often normalize the x variables and save the y variables so that they are normally distributed?
  • Does the key in which a piece is written affect the playability of the piano?
  • How to solve this sudoku without guessing?
  • Can prisoners of war be exchanged against their will?
  • How does the SQL database engine swap the values ​​of two columns?
  • Are university groups allowed to use grant funds for currency hedging?
  • Can I run three 3/0 conduits and a 235 foot #1 conduit in a 2″ conduit?
  • Is there a known thing or physical object that cannot be destroyed at all?
  • Is this a breathable atmosphere for human-like extraterrestrials who have blood that is more efficient at carrying oxygen? Normal humans would need a gas (oxygen) mask
  • How to Fix an Underwater Power Line
  • Show long trigonometric identity manipulation
  • HiGHS Resolver Deployment Tutorial Request
  • Are these two sentences equivalent? 「トイレはあそこです。」、「あそこはトイレです。」
  • Trying to identify a novel by Poul Anderson
  • Is my homemade Hiccupera spell any good?
  • Is James Earl Jones the actor who has played the same sci-fi character the longest?
  • How do you know when it’s time to ditch the tires?
  • How can I measure the actual amperage of my circuits so I can compare it to the correct fuses/breakers?

question flow

Subscribe to RSS

question flow

To subscribe to this RSS feed, copy and paste this URL into your RSS reader.


Video Tumblr like button not working

Related Posts

Fatal error require failed opening required

Contents1 Fatal error of PHP No se pudo to open the archive requerido2 Subscribe to RSS3 About WPML3.1 From day one, our priorities have remained the same…

Your media file could not be processed.

Contents1 Fixed: Twitter Error “Your media file could not be processed”1.1 freno de mano1.2 ClipChamp Créer1.3 FilmoraGo1.4 adobe sparkle2 Video Your media file could not be processed….

Gravity forms not sending email

Contents1 [SOLVED] Why doesn’t Gravity Forms send email?1.1 How does Gravity Forms send email?1.2 Résoudre les problèmes liés aux formulaires Gravity qui n’envoient pas d’e-mail1.3 Configure Gravity…

This webpage is not founderr_file_not_found

Contents1 Install and manage extensions1.1 Install trusted extensions1.2 Agregar o eliminar el acceso a un sitio específico1.3 Hide extensions1.4 Show extensions2 5 Ways To Permanently Fix Chrome…

Continue to this website not recommended missing

Contents1 Ignore the “Continue to this website (not recommended)” message1.1 publication information1.2 Information1.3 Contents1.4 Admin Items2 Internet Explorer 10 ‘Continue to this website’ is missing option2.1 Similar…

Error loading stream id not found on server

Contents1 JWPlayer 6 error message “Error loading stream: ID not found on server”1.1 Inscrivez-vous ou connectez-vous1.2 Post as guest1.3 Post as guest2 Subscribe to RSS3 Problems with…