Add Beautiful "Click To Tweet" Box Using Shortcodes In Blogger!

It's has been a long time since we have published any shortcode. I was unable to think that now, which type of shortcodes should I create? After thinking too much, I decided to build a shortcode that will help our visitors to get some more shares on Twitter.

So, I have created a beautiful, responsive and fast loading "Click-To-Tweet" box. This box doesn't need any Twitter's JavaScript or CSS from their server; so, it would not increase the page loading time of your blogger blog. You can add this shortcode not only on your blogger blog but also on WordPress blog; but as you know, we are "Blogger" Guider, so we will only tell you some easy steps to the implementation of this "Click-To-Tweet" box and some information about how to use it on Blogger.

Firstly, let's see the demo:

[quote via='BloggerGuider']Now you can add "Click To Tweet" box with link in blogger using shortcodes![/quote]

Note: We request you to click on the above box's link to share this tweet. This can help others too who want to add this box using just a few words and without coding! We hope you will tweet it. :)

How Can It Help You?

It's straightforward. Sometimes, you write a beautiful quote and want it to get shares and for this, you install "Tweetable" jQuery widget.

If you don't know what is "Tweetable," then let me share a screenshot with you that is taken from Rohan Chaubey's blog:
So, can you see Tweetable text? If you press that Tweet button, a new window will open up and then you will be able to tweet that "Tweetable" followed text.

Now, to make it easier, I have created a shortcode (as explained above) that will help you to do that "Tweetable" work more cleanly and with more eye-catchiness.
[quote via="BloggerGuider" url="nothing"]In the business world, the person who is most liked and the most well networked typically wins." - Neil Patel.[/quote] Now, you can get more shares using this Click-To-Tweet widget because it support many functions and is immaculate and eye-catching. WordPress blogs like shoutmeloud.com are using it for many years, but I have never seen this widget in any Blogger Blog. Well, it's another matter. :)

Was Adding Click-To-Tweet Widget Hard For Bloggers Earlier?

Yes. Of course. Actually it was not so hard but still it was hard but not now. Even, blogtyrant.com has mentioned it as "Hard."

Actually it was not hard. But was time taking. You were needed to add this code by going to "HTML" mode from "Compose" in blogger editor and then add this code where you want the click-to-tweet widget appear and then replace the following things:

<div>YOUR TEXT MESSAGE <a href="http://twitter.com/home/?status=YOUR TEXT MESSAGE. via @YOUR_USERNAME">tweet this </a>

So, it's really time taking. And the cons of this code was:

• You can't inform the code that you don't want URL or want URL after the tweetable text.
• You can't add it without going into HTML mode.

So, to erase all these cons, we have created this shortcode. That will allow you to:

• Add Click-To-Tweet widget without going to HTML mode.
• Inform that you want URL after tweetable text or not.
• It will allow you to put your text and username and will also show the username as "Related."

How To Add This Shortcode On Your Blog?

It's easy and simple. You just have to add a CSS chunk and an external JavaScript which is not heavy!

We have split the whole steps into two part. Let's now add it!

1. Add The Required JavaScript

I hope you have added the JavaScript URL that is required for proper working of Shortcodes. If you haven't, please add it before doing other steps (add it above </body>)

<script src='https://googledrive.com/host/0B8acxOz46qBZb2p3dDJoT1RNTjQ' type='text/javascript'/>

For more information, you can go here:

[embed url='http://www.bloggerguider.com/2015/08/a-link-for-all-shortcodes.html'/]

 2. Add The Required CSS

I have written that this click-to-tweet widget is very neat, in many places and for making it clean, I have used this CSS. Just add it above ]]></b:skin> in your template:

/*********************************************
Twitter Click TO Tweet By BloggerGuider.com
*********************************************/
.twitter-quote a:hover {
color: #545454!important;
}
.twitter-quote a {
color: #999!important;
text-decoration: none;
transition: .6s;
font-family: sans-serif;
}
.twitter-quote a:before, .twitter-quote a:after {content:none!important}
.twitter-quote {
border: 1px solid #DDD;
border-radius: 4px;
padding: 2pc;
margin-top: 2pc;
padding-top: 1pc;
padding-bottom: 2pc;
margin-bottom: 2pc;
}
.quote-tweet {
font-size: 24px;
margin-bottom: 1pc;
letter-spacing: 0.05em;
line-height: 35px;
}
.link-tweet {
text-transform: uppercase;
font-size: 12px;
font-weight: 700;
position: relative;
float: right;
background: rgba(0, 0, 0, 0) url(http://s12.postimg.org/vb1hpl4yh/twitter_little_bird.png) no-repeat right top;
}
.link-tweet a {
position: relative;
left: -23px;
top: -4px;
}

• Now, save your template.

How To Use This Shortcode On Your Template?

By following above steps, you have integrated this Shortcode in your template and now, for using it, I have some simple points:

• Start writing of shortcode statement with [tweet-quote
• You now have to remember your username and add it after [tweet-quote as via="username."
• Now, don't you want URL of your post after the text you want on click-to-widget? Just add url="nothing" but if you want URL, just skip this step.
• At last, type your text after adding ] after the above attributes. 
• Close the shortcode statement.

Now, the shortcode statement you have made is:

[tweet-quote via="username" url="nothing"]YOUR TEXT[/tweet-quote]

It was for click-to-tweet widget without URL. Now, for post URL:

[tweet-quote via="username"]YOUR TEXT[/tweet-quote]

 Demos:

Here are two demos of 1) Widget with URL and 2) Widget without URL:

[quote via="BloggerGuider"]It's now easier than ever to create Click-To-Tweet widget![/quote]

[quote via="BloggerGuider" url='nothing']It's now easier than ever to create Click-To-Tweet widget![/quote]

Okay. Now, click on the two widgets above. On the first widget, you will see post's URL at the of sharing but on the second widget, you will not. :)

Final Words

I hope you have liked this shortcode. Give your reviews and feedbacks about this widget on the comments section below. I would love to read them and answer and thank them. There's another way of showing your happiness. Just by tweeting from click-to-tweet widgets above ;). Take care!

Share this post