Rather than passing up all that potential traffic, I’ve found that offering a link somewhere within your post (optimally at the bottom of each post) is a great way to help your readers and incoming search engine traffic to promote your content for you.  When people find great content they like to share it with others, so why not make it easy for them?

Not only is adding a “Tweet This!” link a great choice, but it is really easy to do.  Chances are if you do a search on Google for code to use you’ll find something like the following:

<a href="http://twitter.com/home?status=Currently reading <?php the_permalink(); ?>" title="Click to send this page to Twitter!" target="_blank">Tweet This!</a>

This code works just fine, but is not the most optimal solution in my opinion.  Depending on the permalink structure your WordPress blog uses, combined with the length of your domain name, it may be difficult to fit the link into a 140 character tweet.  It also doesn’t leave room for the person to add their own comments to the tweet.

As a proposed solution, I recommend using some WordPress code like the following:

<a href="http://twitter.com/home?status=RT @HackWordPress <?php the_title ();?> <?php echo get_settings('home'); ?>/?p=<?php the_ID(); ?>">Tweet This</a>

This code will automatically insert the “RT” and your Twitter account name (the above example uses our Twitter account, @HackWordPress) then use the ID form of your post with the tweet.  When people click the link in the tweet, they will then be redirected to the actual post using your blog’s selected permalink structure, making a convenient and typically short URL.

Have you integrated Twitter into your WordPress blog? Share your strategies in the comments!

You are reading How To: Add a Twitter Link to Your WordPress Blog © 2010 | WordPress Hacks | WordPress Directory | WordPress Forums | WordPress eBook

Enjoy writing about WordPress? Get your blog more exposure by joining the WordPress Hacks writing team!

<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/><script type='text/javascript'>$(document).ready(function(){

$(&quot;ul.subnav&quot;).parent().append(&quot;<span/>&quot;); //Only shows drop down trigger when js is enabled - Adds empty span tag after ul.subnav

$(&quot;ul.topnav li span&quot;).click(function() { //When trigger is clicked...

//Following events are applied to the subnav itself (moving subnav up and down)$(this).parent().find(&quot;ul.subnav&quot;).slideDown('fast').show(); //Drop down the subnav on click

$(this).parent().hover(function() {}, function(){$(this).parent().find(&quot;ul.subnav&quot;).slideUp('slow'); //When the mouse hovers out of the subnav, move it back up});

//Following events are applied to the trigger (Hover events for the trigger)}).hover(function() {$(this).addClass(&quot;subhover&quot;); //On hover over, add class &quot;subhover&quot;}, function(){ //On Hover Out$(this).removeClass(&quot;subhover&quot;); //On hover out, remove class &quot;subhover&quot;});

});</script><style type='text/css'>ul.topnav {list-style: none;padding: 0 20px;margin: 0;float: left;width: 100%;background: #222;font-size: 1.2em;background: url(http://1.bp.blogspot.com/_4HKUHirY_2U/SuvG9uqdygI/AAAAAAAAAGg/RGkds76x-Ks/topnav_bg.gif) repeat-x;}ul.topnav li {float: left;margin: 0;padding: 0 15px 0 0;position: relative; /*--Declare X and Y axis base--*/}ul.topnav li a{padding: 10px 5px;color: #fff;display: block;text-decoration: none;float: left;}ul.topnav li a:hover{background: url(http://2.bp.blogspot.com/_4HKUHirY_2U/SuvHEn2GZ9I/AAAAAAAAAGo/s4ncczdnOd0/topnav_ho ver.gif) no-repeat center top;}ul.topnav li span { /*--Drop down trigger styles--*/width: 17px;height: 35px;float: left;background: url(http://2.bp.blogspot.com/_4HKUHirY_2U/SuvHKqBeOXI/AAAAAAAAAGw/qGYlY4ckLWc/subnav_btn.gif) no-repeat center top;}ul.topnav li span.subhover {background-position: center bottom; cursor: pointer;} /*--Hover effect for trigger--*/ul.topnav li ul.subnav {list-style: none;position: absolute; /*--Important - Keeps subnav from affecting main navigation flow--*/left: 0; top: 35px;background: #333;margin: 0; padding: 0;display: none;float: left;width: 170px;-moz-border-radius-bottomleft: 5px;-moz-border-radius-bottomright: 5px;-webkit-border-bottom-left-radius: 5px;-webkit-border-bottom-right-radius: 5px;border: 1px solid #111;}ul.topnav li ul.subnav li{margin: 0; padding: 0;border-top: 1px solid #252525; /*--Create bevel effect--*/border-bottom: 1px solid #444; /*--Create bevel effect--*/clear: both;width: 170px;}html ul.topnav li ul.subnav li a {float: left;width: 145px;background: #333 url(http://3.bp.blogspot.com/_4HKUHirY_2U/SuvHPYoc82I/AAAAAAAAAG4/3DDzBwklYpw/dropdown_linkbg.gif) no-repeat 10px center;padding-left: 20px;}html ul.topnav li ul.subnav li a:hover { /*--Hover effect for subnav links--*/background: #222 url(http://3.bp.blogspot.com/_4HKUHirY_2U/SuvHPYoc82I/AAAAAAAAAG4/3DDzBwklYpw/dropdown_linkbg.gif) no-repeat 10px center;}#header img {margin: 20px 0 10px;}</style>

Please host image here for free.

You can change width,height,color,… as your choice.

4.Now go to Layout–>Page Element and click on "Add a gadget".

5.Select "html/java script" and add the code given below and click save.

<ul class="topnav">

<li><a href="#">Home</a></li><li><a href="#">Tutorials</a><ul class="subnav">  <li><a href="#">HTML Tutorials</a></li>  <li><a href="#">CSS Tutorials</a></li>  <li><a href="#">PHP Tutorials</a></li>  <li><a href="#">SQL Tutorials</a></li>  <li><a href="#">jQuery Tutorials</a></li> </ul></li><li><a href="#">Templates</a> <ul class="subnav">   <li><a href="#">1 Column</a></li>   <li><a href="#">2 Column</a></li>   <li><a href="#">3 Column</a></li>   <li><a href="#">4 Column</a></li>   <li><a href="#">Premium</a></li>   <li><a href="#">Buy Now</a></li>  </ul></li><li><a href="#">About Us</a></li><li><a href="#">Advertise</a></li><li><a href="#">Subscribe</a></li><li><a href="#">Contact Us</a></li>

</ul>

I hope you like this. Happy blogging……

<script type='text/javascript'>window.onload = function() { var paras = document.getElementById('content').getElementsByTagName('p'); if(paras.length) {  paras[0].className = paras[0].className + ' intro'; }};</script> <style type='text/css'> #hover-me  { padding:50px 100px; border:2px solid #fc0; background:#d3ea74; }</style><script src='http://ajax.googleapis.com/ajax/libs/mootools/1.2.3/mootools.js' type='text/javascript'/><script type='text/javascript'>

 /* usage */ window.addEvent('domready',function() {

  /* hover! */  Element.implement({   'hover': function(fn1,fn2) {    this.addEvents({     'mouseenter': function(e) {      fn1.attempt(e,this);     },     'mouseleave': function(e) {      fn2.attempt(e,this);     }    })   }  });

  $('hover-me').hover(function(e) {   this.fade('out');  }, function(e) {   this.fade('in');  }); });

</script>

4.Whenever you have to write some codes or text,write it between the following tags :

<div id="hover-me">

Your Text/Code

</div>

<style type='text/css'>

ul#topnav {margin: 0; padding: 0;float: left;width: 100%;list-style: none;position: relative;font-size: 1.2em;background: #383838;}ul#topnav li {float: left;margin: 0; padding: 0;border-right: 1px solid #fff;}ul#topnav li a {padding: 10px 15px;display: block;color: #f0f0f0;text-decoration: none;}ul#topnav li:hover { background: #1376c9 url() repeat-x; }ul#topnav li span {float: left;padding: 15px 0;position: absolute;left: 0; top:35px;display: none;width: 100%;background: #1376c9;color: #fff;-moz-border-radius-bottomright: 5px;-khtml-border-radius-bottomright: 5px;-webkit-border-bottom-right-radius: 5px;-moz-border-radius-bottomleft: 5px;-khtml-border-radius-bottomleft: 5px;-webkit-border-bottom-left-radius: 5px;}ul#topnav li:hover span { display: block; }ul#topnav li span a { display: inline; }ul#topnav li span a:hover {text-decoration: underline;}</style><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'/><script type='text/javascript'>$(document).ready(function() {

$(&quot;ul#topnav li&quot;).hover(function() { //Hover over event on list item$(this).css({ 'background' : '#1376c9 url() repeat-x'}); //Add background color + image on hovered list item$(this).find(&quot;span&quot;).show(); //Show the subnav} , function() { //on hover out...$(this).css({ 'background' : 'none'}); //Ditch the background$(this).find(&quot;span&quot;).hide(); //Hide the subnav});

});</script>

You can change width,height,color,… as your choice.

4.Now go to Layout–>Page Element and click on "Add a gadget".

5.Select "html/java script" and add one of code below and click save.

<ul id="topnav">

<li><a href="#">Home</a></li><li><a href="#">Blogger</a><span><a href="#">Widgets</a> |<a href="#">Tip And Tricks</a> |<a href="#">Basic</a></span></li><li><a href="#">Tutorials</a><span><a href="#">HTML</a> |<a href="#">Java Script</a> |<a href="#">CSS</a><a href="#">jQuery</a><a href="#">MooTools</a></span></li><li><a href="#">Templates</a><span><a href="#">1 Column</a> |<a href="#">2 Column</a> |<a href="#">3 Column</a> |<a href="#">4 Column</a> |<a href="#">Premium</a></span></li><li><a href="#">Subscribe</a></li><li><a href="#">Advertise</a></li><li><a href="#">Contact</a></li>

</ul>

<style type='text/css'>ul#topnav {margin: 10px 0 20px;padding: 0;list-style: none;font-size: 1.1em;clear: both;float: left;width: 99%;}ul#topnav li{margin: 0;padding: 0;overflow: hidden;float: left;height:40px;}ul#topnav a, ul#topnav span {padding: 10px 20px;float: left;text-decoration: none;color: #fff;text-transform: uppercase;clear: both;height: 20px;line-height: 20px;background: #1d1d1d;}ul#topnav a { color: #7bc441; }ul#topnav span {display: none;}

ul#topnav.v2 span{background: url(http://4.bp.blogspot.com/_ar9PeTUrwMY/SurvAv9Rh3I/AAAAAAAAAzg/6yumbEnfpmA/a_bg.gif) repeat-x left top;}ul#topnav.v2 a{color: #555;background: url(http://4.bp.blogspot.com/_ar9PeTUrwMY/SurvAv9Rh3I/AAAAAAAAAzg/6yumbEnfpmA/a_bg.gif) repeat-x left bottom;}</style><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'/><script type='text/javascript'>

$(document).ready(function() {

$(&quot;#topnav li&quot;).prepend(&quot;<span/>&quot;); //Throws an empty span tag right before the a tag

$(&quot;#topnav li&quot;).each(function() { //For each list item...var linkText = $(this).find(&quot;a&quot;).html(); //Find the text inside of the a tag$(this).find(&quot;span&quot;).show().html(linkText); //Add the text in the span tag});

$(&quot;#topnav li&quot;).hover(function() { //On hover...$(this).find(&quot;span&quot;).stop().animate({marginTop: &quot;-40&quot; //Find the span tag and move it up 40 pixels}, 250);} , function() { //On hover out...$(this).find(&quot;span&quot;).stop().animate({marginTop: &quot;0&quot; //Move the span back to its original state (0px)}, 250);});

});</script>

Please host image yourself.

You can change width,height,color,… as your choice.

4.Now go to Layout–>Page Element and click on "Add a gadget".

5.Select "html/java script" and add one of code below and click save.

Code 1:

<div class="container">

<ul id="topnav" class="v2">

<li><a href="http://bloggertipandtrick.blogspot.com">Home</a></li><li><a href="http://bloggertipandtrick.blogspot.com/search?max-results=999">TOC</a></li><li><a href="http://www.bloggertipandtrick.blogspot.com/search/label/widget?max-results=1000">Widgets</a></li><li><a href="http://bloggertipandtrick.blogspot.com/search/label/Templates?max-results=1000">Templates</a></li><li><a href="http://bloggertipandtrick.blogspot.com/search/label/jQuery?max-results=1000">jQuery</a></li><li><a href="http://bloggertipandtrick.blogspot.com/2009/01/blogger-tips-and-tricks-ads-details.html">Advertise</a></li><li><a href="http://bloggertipandtrick.blogspot.com/2009/01/contact-me.html">Contact</a></li>

</ul>

</div>

Result:

Code 2:

<div class="container">

<ul id="topnav">

<li><a href="http://bloggertipandtrick.blogspot.com">Home</a></li><li><a href="http://bloggertipandtrick.blogspot.com/search?max-results=999">TOC</a></li><li><a href="http://www.bloggertipandtrick.blogspot.com/search/label/widget?max-results=1000">Widgets</a></li><li><a href="http://bloggertipandtrick.blogspot.com/search/label/Templates?max-results=1000">Templates</a></li><li><a href="http://bloggertipandtrick.blogspot.com/search/label/jQuery?max-results=1000">jQuery</a></li><li><a href="http://bloggertipandtrick.blogspot.com/2009/01/blogger-tips-and-tricks-ads-details.html">Advertise</a></li><li><a href="http://bloggertipandtrick.blogspot.com/2009/01/contact-me.html">Contact</a></li>

</ul>

</div>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>//<![CDATA[

$(function(){

$('a[href*=#top]').click(function() {

if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')&& location.hostname == this.hostname) {

var $target = $(this.hash);

$target = $target.length && $target || $('[name=' + this.hash.slice(1) +']');

if ($target.length) {

var targetOffset = $target.offset().top;

$('html,body').animate({scrollTop: targetOffset}, 1000);

return false;

}

}

});

});//]]></script><!-- end scrolltop -->

4.Now scroll down where you see <body> tag .

5.Replace <body> tag with <body id=’top’> .

6.Now again scroll down where you see </body> tag .

7.Copy below code and paste it just before </body> tag:

<div id='goingtop'><a href='#top' title='Go Top'><img src='http://1.bp.blogspot.com/_4HKUHirY_2U/Sujr21YfikI/AAAAAAAAAGM/mPXYFXAepV4/top.png' style='right:20px; bottom:20px; position: fixed;'/></a></div>

Now you can change your background image replacing above red colored code with your image URL. For getting image URL you can host free image here

8.Click on save template and you are done.

<!-- Import jQuery and SimpleModal source files --><script src='http://h1.ripway.com/bns/lightbox-comment/jquery.js' type='text/javascript'></script><script src='http://h1.ripway.com/bns/lightbox-comment/jquery.simplemodal.js' type='text/javascript'></script>

<!-- Contact Form JS and CSS files --><script src='http://h1.ripway.com/bns/lightbox-comment/basic.js' type='text/javascript'></script><link type='text/css' href='http://h1.ripway.com/bns/lightbox-comment/basic.css' rel='stylesheet' media='screen' />

<!-- IE 6 hacks --><!--[if lt IE 7]><link type='text/css' href='http://h1.ripway.com/bns/lightbox-comment/basic_ie.css' rel='stylesheet' media='screen' /><![endif]-->

9.Now again scroll down to where you see </body> tag .

10.Copy below code and paste it just before the </body> tag and save your template.

<div id="basicModalContent" style='display:none'>

ENTER XHTML FORM CODE HERE(in step 5)

</div>

Now replace "ENTER XHTML FORM CODE HERE" with your XHTML Code.

11.Now Add below code Anywhere in your blog to bring contact us form.

<div id='basicModal'><a href='#' class='basic'>Contact US</a></div>

Now you are done. I hope you are enjoying it now. Let me know about your experience. Happy blogging..

#nav, #nav ul{margin:0;padding:0;list-style-type:none;list-style-position:outside;position:relative;line-height:26px;}#nav a:link,#nav a:active,#nav a:visited{display:block;color:#FFF;text-decoration:none;background:#444;height:26px;line-height:26px;padding:0 6px;margin-right:1px;}#nav a:hover{background:#0066FF;color:#FFF;}#nav li{float:left;position:relative;}#nav ul {position:absolute;width:12em;top:26px;display:none;}#nav li ul a{width:12em;float:left;}#nav ul ul{width:12em;top:auto;}#nav li ul ul {margin:0 0 0 13em;}#nav li:hover ul ul,#nav li:hover ul ul ul,#nav li:hover ul ul ul ul{display:none;}#nav li:hover ul,#nav li li:hover ul,#nav li li li:hover ul,#nav li li li li:hover ul{display:block;}

Note: If you want you can change above code as you like.

4.Now again Scroll down to where you see </head> tag.

5.Now Copy below code and paste it just before </head> tag.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/><script type='text/javascript'>function showmenu(){$(&quot;#nav li&quot;).hover(function(){$(this).find('ul:first').css({visibility:&quot;visible&quot;, display:&quot;none&quot;}).show();}, function(){$(this).find('ul:first').css({visibility:&quot;hidden&quot;});});}

$(document).ready(function(){showmenu();});</script>

6.Now save your template.

7.Go to Layout–>Page Elements.

8.Click on "Add a Gadget" and select ‘HTML/Javascript’ and add the code given below.

<ul id="nav">

<li><a href="#">Link 1</a></li>

<li><a href="#">Link 2</a><ul><li><a href="#">Link 2.1</a></li><li><a href="#">Link 2.2</a></li><li><a href="#">Link 2.3</a></li><ul></ul></ul></li>

<li><a href="#">Link 3</a><ul><li><a href="#">Link 3.1</a></li><li><a href="#">Link 3.2</a></li><li><a href="#">Link 3.3</a></li><ul></ul></ul></li>

<li><a href="#">Link 4</a><ul><li><a href="#">Link 4.1</a></li><li><a href="#">Link 4.2</a></li><li><a href="#">Link 4.3</a></li><ul></ul></ul></li>

<li><a href="#">Link 5</a><ul><li><a href="#">Link 5.1</a></li><li><a href="#">Link 5.2</a></li><li><a href="#">Link 5.3</a></li><ul></ul></ul></li>

<li><a href="#">Link 6</a></li>

</ul>

Replace # with your link urls and Link 1….n with the text of links.

9.Now click save and you are done.

Related posts:

1. Get A WordPress API Key For The Akismet WordPress Plugin
2. Make your WordPress blog secure !
3. import blogspot/blogger blog to wordpress