How to Transform Texts To Twitter Like Format Using JQuery

This tutorial is just for design and fun. What we aim here is to transform your texts to Twitter looking style and make it tweetable with a single click of a button.

The Code

HTML

<pre class="tweetQuote">
 Place Adsense Ads Within Your Posts http://fb.me/NjqXLCYR @ajibanda_pp #Blogger #AdSense
</pre>

CSS

.tweetQuote { display: block;
              font-family: Georgia,"Times New Roman",Palatino,serif;
              border-style: solid;
     background-color: #F8F7F7;
              border-width: 1px;
              border-color: #EEE #DDD #BBB;
              max-width: 99%;
              min-width: 220px;
              border-top-left-radius: 5px;
              border-top-right-radius: 5px;
              border-bottom-right-radius: 5px;
              border-bottom-left-radius: 5px;
              box-shadow: rgba(0, 0, 0, 0.14902) 0px 1px 3px;
              padding: 20px;
              width: 50%;
              word-wrap: break-word;
              font-weight: bold;
              color: #5A5252;
              margin: auto;
              margin-bottom: 10px;
              margin-top: 10px;
            }
.tweetQuote a { text-decoration: none;
                color: #0084B4;
              }
.tweetFooter { text-align: right;
               font-size: 12px;
               font-family: Calibri;
             }
hr.tweetHr { height: 0.00025em;
             background-color: #FFF;
             border-color: #FFF;
           }

JQuery

WARNING: Take note that we will be using JQuery library for this script. Make sure that you have added JQuery on your web page

$.fn.tweetify = function () {
    console.log($(this));
    $e = $(this);
    $e.each(function () {
        t = $(this).text();
        nT = t.replace(/((ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?)/gi, '<a href="$1">$1</a>').replace(/(^|\s)#(\w+)/g, '$1<a href="http://twitter.com/search?q=%23$2">#$2</a>').replace(/(^|\s)@(\w+)/g, '$1<a href="http://twitter.com/$2">@$2</a>');

        nT += "<hr class='tweetHr' /><div class='tweetFooter'><a target='_blank' href='http://twitter.com?status=" + t.substring(0, 137) + "...'>Retweet &#8594; </a></div>"
        $(this).html(nT);
    });
}

How it Works?

First thing to do is to process the text inside the element. What we need to look for are the following:

• A link that we can convert to a valid HTML link tag
• A mention that starts with @ that we can link to a twitter handler
• A hashtag that starts with # that we can link to twitter search handler

Upong searching on these items on the text, we need to replace them with a HTML link tag and assign a corresponding link for them.

• For a link, we just simply use the text itself. It's already a link after all.
• For a mention, we just need to extract the twitter handler by removing the prefix @ and replacing it with http://twitter.com/
• For a hashtag, we need to replace the # symbol with http://twitter.com/search?q=%23

Another cool feature about this too is the ability to make the text tweetable. What we did is to simply add a link below and attach the following URL in it: http://twitter.com?status=INSERT-TEXT-HERE. This automatically directs you to a status box ready for clicking in Twitter.

How do I use it?

Simply add the following on you head tags:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<script src="https://dl.dropboxusercontent.com/u/78775250/downloads/tweetify/ajtweetify.041713.min.js" ></script>
<link rel="stylesheet" href="https://dl.dropboxusercontent.com/u/78775250/downloads/tweetify/ajtweetify.041713.css" type="text/css" media="screen" />

Then simply call the function by using:

$(".tweetQuote").tweetify();

or you can also download the file in this location:

Download Tweetify-041713.rar