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

    • profile image

      Walied 

      4 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.

    • profile image

      Joshua 

      4 years ago

      Worked just fine!

    • Ali Darakhshaan profile imageAUTHOR

      Ali Ahmed 

      4 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

      Ali 

      4 years ago

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

    • Ali Darakhshaan profile imageAUTHOR

      Ali Ahmed 

      4 years ago from Karachi, Pakistan

      You're welcome Evrim

    • profile image

      Evrim 

      4 years ago

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

    • Ali Darakhshaan profile imageAUTHOR

      Ali Ahmed 

      5 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

      Mika 

      5 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 imageAUTHOR

      Ali Ahmed 

      5 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

      Bill 

      5 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?

    • sharingknowledge profile image

      SHAR NOR 

      5 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.

    working

    This website uses cookies

    As a user in the EEA, your approval is needed on a few things. To provide a better website experience, hubpages.com uses cookies (and other similar technologies) and may collect, process, and share personal data. Please choose which areas of our service you consent to our doing so.

    For more information on managing or withdrawing consents and how we handle data, visit our Privacy Policy at: https://hubpages.com/privacy-policy#gdpr

    Show Details
    Necessary
    HubPages Device IDThis is used to identify particular browsers or devices when the access the service, and is used for security reasons.
    LoginThis is necessary to sign in to the HubPages Service.
    Google RecaptchaThis is used to prevent bots and spam. (Privacy Policy)
    AkismetThis is used to detect comment spam. (Privacy Policy)
    HubPages Google AnalyticsThis is used to provide data on traffic to our website, all personally identifyable data is anonymized. (Privacy Policy)
    HubPages Traffic PixelThis is used to collect data on traffic to articles and other pages on our site. Unless you are signed in to a HubPages account, all personally identifiable information is anonymized.
    Amazon Web ServicesThis is a cloud services platform that we used to host our service. (Privacy Policy)
    CloudflareThis is a cloud CDN service that we use to efficiently deliver files required for our service to operate such as javascript, cascading style sheets, images, and videos. (Privacy Policy)
    Google Hosted LibrariesJavascript software libraries such as jQuery are loaded at endpoints on the googleapis.com or gstatic.com domains, for performance and efficiency reasons. (Privacy Policy)
    Features
    Google Custom SearchThis is feature allows you to search the site. (Privacy Policy)
    Google MapsSome articles have Google Maps embedded in them. (Privacy Policy)
    Google ChartsThis is used to display charts and graphs on articles and the author center. (Privacy Policy)
    Google AdSense Host APIThis service allows you to sign up for or associate a Google AdSense account with HubPages, so that you can earn money from ads on your articles. No data is shared unless you engage with this feature. (Privacy Policy)
    Google YouTubeSome articles have YouTube videos embedded in them. (Privacy Policy)
    VimeoSome articles have Vimeo videos embedded in them. (Privacy Policy)
    PaypalThis is used for a registered author who enrolls in the HubPages Earnings program and requests to be paid via PayPal. No data is shared with Paypal unless you engage with this feature. (Privacy Policy)
    Facebook LoginYou can use this to streamline signing up for, or signing in to your Hubpages account. No data is shared with Facebook unless you engage with this feature. (Privacy Policy)
    MavenThis supports the Maven widget and search functionality. (Privacy Policy)
    Marketing
    Google AdSenseThis is an ad network. (Privacy Policy)
    Google DoubleClickGoogle provides ad serving technology and runs an ad network. (Privacy Policy)
    Index ExchangeThis is an ad network. (Privacy Policy)
    SovrnThis is an ad network. (Privacy Policy)
    Facebook AdsThis is an ad network. (Privacy Policy)
    Amazon Unified Ad MarketplaceThis is an ad network. (Privacy Policy)
    AppNexusThis is an ad network. (Privacy Policy)
    OpenxThis is an ad network. (Privacy Policy)
    Rubicon ProjectThis is an ad network. (Privacy Policy)
    TripleLiftThis is an ad network. (Privacy Policy)
    Say MediaWe partner with Say Media to deliver ad campaigns on our sites. (Privacy Policy)
    Remarketing PixelsWe may use remarketing pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to advertise the HubPages Service to people that have visited our sites.
    Conversion Tracking PixelsWe may use conversion tracking pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to identify when an advertisement has successfully resulted in the desired action, such as signing up for the HubPages Service or publishing an article on the HubPages Service.
    Statistics
    Author Google AnalyticsThis is used to provide traffic data and reports to the authors of articles on the HubPages Service. (Privacy Policy)
    ComscoreComScore is a media measurement and analytics company providing marketing data and analytics to enterprises, media and advertising agencies, and publishers. Non-consent will result in ComScore only processing obfuscated personal data. (Privacy Policy)
    Amazon Tracking PixelSome articles display amazon products as part of the Amazon Affiliate program, this pixel provides traffic statistics for those products (Privacy Policy)