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.

Transform your Text To Twitter Looking Design Using JQuery

The Code

<pre class="tweetQuote">
 Place Adsense Ads Within Your Posts @ajibanda_pp #Blogger #AdSense

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

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 () {
    $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="$2">#$2</a>').replace(/(^|\s)@(\w+)/g, '$1<a href="$2">@$2</a>');

        nT += "<hr class='tweetHr' /><div class='tweetFooter'><a target='_blank' href='" + t.substring(0, 137) + "...'>Retweet &#8594; </a></div>"

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
  • For a hashtag, we need to replace the # symbol with

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: This automatically directs you to a status box ready for clicking in Twitter.

Transform your Text To Twitter Looking Design Using JQuery

How do I use it?

Simply add the following on you head tags:
<script src="" ></script>
<script src="" ></script>
<link rel="stylesheet" href="" type="text/css" media="screen" />

Then simply call the function by using:


or you can also download the file in this location:

Download Tweetify-041713.rar

No comments :

Post a Comment