ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel

Adding Facebook "Like" and Twitter "Tweet" buttons to your Tumblr posts

Updated on November 27, 2013

Hi, my name is Allah Dad "Ali" Ahmed. I'm new here and this is my first hub. Today we see social buttons in every website for everything, encouraging viewers to like the article, picture, video or share it with the people following them on Twitter or their friends in Facebook. Tumblr is a really good micro-blogging platform and I use it in a more micro way, to share all the funny gifs that I find interesting when I stumble upon them surfing to pass my time. I posted many gifs but only notes weren't enough I wanted people to share them in their other social networks. So I started digging for a way to include Facebook "Like" and Twitter tweet button in my Tumblr posts. I came through many tutorials but they didn't work for me, only one did and I had to read two different articles for these two buttons. Therefore I'm covering them both in this one article. Enough chit-chat let's get to the business.

Facebook "Like" button:

Many articles would send you to the Facebook developers website where you would have to specify the settings you want and then a code is generated, implementing that code is really a pain in the ass. You can configure this button easily.

<iframe src="http://www.facebook.com/plugins/like.php?href={Permalink}&amp;layout=button_count&amp;show-faces=false&amp;width=450&amp;action=like&amp;colorscheme=light&amp;send=false" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width: 300px; height:30px;"></iframe>

Okay this is the code but different people want different styles for this button because obviously every one of you won't be using the same style. Therefore I'll explain it's properties so you can configure it the way you want.

{Permalink} is a Tumblr code, its your posts link. So every time someone clicks the button that person is liking your link.

layout - You can see this property in the link above. This is the layout of your "Like" button. There are three options for this property.

  1. Standard
  2. Button_count
  3. Box_count

Standard - Standard is the layout which shows the number of people who like your post and along with it asks the visitor to be the first one like this post for his/her network.

Button_count - This is the one I used, it shows a small and simple like button with the number of Likes

Box_count - This is the like button which has a bit big box above it, in the middle of which the number of likes is written.

After layout we've got show-faces which accepts two options True or False. If you turn this option on then visitors will be shown pictures of their friends just below the like button if their friends have liked the post. Well I didn't want it so I turned it off.

And then we've got width you can set it to whatever you like just don't set it too low it will make the button invisible.

Action which is obviously "like".

Color Scheme - This is also an important one. You have to chose this according to your Tumblr theme. Mine is light because I have a light theme.


And the last but not least. The Send button, if you want your users to be able to directly message your post to their facebook friends

then this comes in handy. Turning this on will include a send button right next to the like button.
Those were the main parts of the code. Now we are going to head over to the Twitter Tweet button.


Twitter Tweet Button

For Facebook the developer sites generator code didn't work for me but for twitter their goodies section worked. Head over to this link. Choose the type of button, I chose "Share a link". Then you're gonna get a code which will be similar to the below one.

<a href="https://twitter.com/share" class="twitter-share-button" data-via="TeenLeakss">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

I added three more options in the <a> attribute, mentioned below:

data-url="{ShortURL}" data-counturl="{Permalink}" data-text="Check this out!"

The above code works to ensue that the tweet button is linked to your post instead of your hompage. This code tells Twitter to use the post's short url when referencing the full link. It enables the short url to correctly count towards the post's retweet count and data-via="TeenLeakss" is to mention your twitter account in every visitors tweet.


and the data-text="Check this out!" adds the sentence into the tweet if someone clicks the tweet button this line would be written in the beginning of the tweet.

So after applying these codes, your final code should look like:

<a href="https://twitter.com/share" style="padding: 0px; margin: 0px; height: 40px;"class="twitter-share-button" data-url="{ShortURL}" data-counturl="{Permalink}" data-text="Check this out!" data-via="TeenLeakss">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

So how do you implement them in your Tumblr theme? into every post? Well that's what this article is about. You can put them anywhere between {block:Posts} to {/block:Posts} . You can see a live demo at my Tumblr blog. So that's enough for this one, in the next article, I will show you how to implement facebook comments too, which is also a bit hard.

Facebook Like button code:
<iframe src="http://www.facebook.com/plugins/like.php?href={Permalink}&amp;layout=button_count&amp;show-faces=false&amp;width=450&amp;action=like&amp;colorscheme=light&amp;send=false" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width: 300px; height:30px;"></iframe>

Twitter button Generated Code:
<a href="https://twitter.com/share" class="twitter-share-button" data-via="TeenLeakss">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

Twitter button Final code:
<a href="https://twitter.com/share" style="padding: 0px; margin: 0px; height: 40px;"class="twitter-share-button" data-url="{ShortURL}" data-counturl="{Permalink}" data-text="Check this out!" data-via="TeenLeakss">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

Comments

    0 of 8192 characters used
    Post Comment

    • sharingknowledge profile image

      SHAR NOR 4 years ago from Miami, FL

      Great hub I must admit. I never knew about doing this on Tumblr but now I can too do it myself. Thanks.

    • profile image

      Bill 4 years ago

      The problem is that your Tweet and Like buttons appear on the main page! But it's completely unneeded! I want them to appear on posts only.

      How to fix this?

    • Ali Darakhshaan profile image
      Author

      Ali Ahmed 4 years ago from Karachi, Pakistan

      @Bill: Just before the like and Twitter code add "{block:PermalinkPage}" and right after the code add"{/block:PermalinkPage}". This tells Tumblr that the code between these two is supposed to be shown only in post page not the main page.

    • profile image

      Mika 4 years ago

      Thanks for the tutorial. But I am a total failure when it comes to things like this so I encountered a few problems.

      How do I place the tweet and Facebook like button at the bottom of every post?

      How to reset the tweet and Facebook Like button counter to zero?

      How do I adjust the codes so that the the tweet and Facebook Like buttons are linked to my tumblr and posts?

    • Ali Darakhshaan profile image
      Author

      Ali Ahmed 4 years ago from Karachi, Pakistan

      If you post it in the post block it will be linked to your post. You have to understand the structure of your theme if you visit my blog http://rofl-gifs.tumblr.com/ you can see that I've placed the buttons before the date stamp so the code was placed before the {block:Date}

    • profile image

      Evrim 3 years ago

      This is like literally the only tutorial I've found that works properly. Thank you :))

    • Ali Darakhshaan profile image
      Author

      Ali Ahmed 3 years ago from Karachi, Pakistan

      You're welcome Evrim

    • profile image

      Ali 3 years ago

      hi, the like and share buttons apear - but only for a second. then they disapear!

    • Ali Darakhshaan profile image
      Author

      Ali Ahmed 3 years ago from Karachi, Pakistan

      Well you can see the same code working at http://rofl-gifs.tumblr.com/

      There must be something else on your page which is interfering with these codes.

    • profile image

      Joshua 2 years ago

      Worked just fine!

    • profile image

      Walied 2 years ago

      Man, you've made my day.

      I've been trying this for a full day. It just worked with your tip.

      very thankful & appreciated.

    Click to Rate This Article