Twitter Button Drupal

Adding Twitter and Facebook Like buttons to your Drupal site

Submitted by Jerry on

It was requested that I post the entire code and steps to recreate the Twitter and Facebook buttons used on this site. So, here it is!

Code:

<div class="social-buttons">
<iframe src="http://www.facebook.com/plugins/like.php?href=<?php $curr_url = check_plain("http://" .$_SERVER['HTTP_HOST'] .$node_url); echo $curr_url; ?>&amp;layout=button_count&amp;show_faces=false&amp;width=200&amp;action=like&amp;font=verdana&amp;colorscheme=light&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:200px; height:21px;" allowTransparency="true"></iframe>
<a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-url="<?php $curr_url = check_plain("http://" .$_SERVER['HTTP_HOST'] .$node_url); echo $curr_url; ?>" data-text="<?php echo $title; ?>" data-via="jerryjr">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
</div>

  1. Find and open the node.tpl.php file in your theme folder. If you want to add the buttons to each and every node, then edit this file. If you want to add it to certain content types, then you can open that specific node.tpl.php file or simply copy this file and rename to node-{insertContentTypeHere}.tpl.php (for a content type of Video, your file will be named node-video.tpl.php. If that was confusing to you, leave a comment and I'll try to explain further.
  2. We will want to insert the code above between <div class="content"> and <?php print $content ?>
  3. Remove "JerryJr" from the code above and insert your own Twitter Username.
  4. Save and upload your modified file to your server.

Next:

Insert the following at the bottom of your theme's CSS file then upload to the server:

.social-buttons{
   width: 125px;
   float: right;
   padding: 10px 10px 6px;
   border: 1px solid #EFEFEF;
   margin-left: 15px;
}

That should do it! The DIV should float to the right. Tweak as required.

Adding Twitter button to your Drupal site

Submitted by Jerry on

Following my post about Adding the Facebook Like button to your Drupal site, I figured I could post about adding a Twitter button to your Drupal site.

As with my previous post about the Facebook Like button, my approach embeds the code within node-{content type}.tpl.php.

Here's my approach...

Code:

<a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-url="<?php $curr_url = check_plain("http://" .$_SERVER['HTTP_HOST'] .$node_url); echo $curr_url; ?>" data-text="<?php echo $title ." | JerryJr.com"; ?>" data-via="jerryjr">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

  1. Find and open the node.tpl.php file in your theme folder. If you want to add the like button to each and every node, then edit this file. If you want to add it to certain content types, then you can open that specific node.tpl.php file or simply copy this file and rename to node-{insertContentTypeHere}.tpl.php (for a content type of Video, your file will be named node-video.tpl.php. If that was confusing to you, leave a comment and I'll try to explain further.
  2. We will want to insert the code above between <div class="content"> and <?php print $content ?>
  3. Change the data-via value to your own twitter username.
  4. Change the | JerryJr.com value to your own domain name.
  5. Save and upload your modified file to your server.

You can test it out on using the TWEET button on the top right of this post. Go ahead, give it a shot!

Updated on 10/06/2010

Subscribe to RSS - Twitter Button Drupal