Home Latest Articles Contact

How To Add Click To Tweet Button in Website (Blogger/WordPress)

By Ajay Malik
How To Add Click To Tweet Button in Website (Blogger/WordPress) How To Add Click To Tweet Button in Website (Blogger/WordPress)
Twitter is one of the most popular social media to attract influencers. Traffic from twitter is highly engaging and converting.
This is why most business uses the various tactic to attract traffic from twitter. Like twitter chat session, click to tweet button or twitter giveaway.
Are you taking benefit if this huge platform? if not, then you're losing your next customer.
click to tweet button for blogger and wordpress

According to most marketers, Twitter traffic is more genuine than any other social media and highly converting.
Today, I'm going to share with you how you can use Click to tweet button in your website and get free traffic from Twitter.
Also Read: How to Add Whatsapp Share button in your website

Add Click to tweet button in any website

Before starting let me clear one doubt, this widget isn't made for any special CMS or platform. It can be used on any platform or CMS which use HTML, CSS and javascript.
This button can work on all platform such as blogger, WordPress or any other CMS.
Here a demo:


(Like This button?)
This Button is made up of pure HTML, CSS and Javascript.
Follow below Steps to Add This Cool Feature in Your Website:
warning: Only place one button per post
1. Add Html -  Add Below HTML inside your post where you want to show this button
<div class='clicktotweet' id='ctt'>
<div id='twusername'>YOUR_USERNAME</div>
  <div id='twurl'>URL_YOU_WANT_TO_SHARE</div>
<a href='' id='tweet' target='_blank'>YOUR_TWEET_HERE</a><br/>
<div class='send-btn'>
<a href='' id='tweetbtn' target='_blank'>Click to tweet</a><svg version="1" xmlns="http://www.w3.org/2000/svg" height='18' width='18' viewBox="0 0 410 410"><path d="M404 74l-29 10c11-10 19-23 24-37 1-4-3-8-7-6a163 163 0 0 1-46 18l-8-2a88 88 0 0 0-86-18c-29 9-51 32-58 62-3 10-3 21-2 32l-1 3a3 3 0 0 1-3 1c-62-6-119-36-159-85-2-3-6-3-7 0a88 88 0 0 0 14 108l-20-8c-3-2-7 0-7 4-1 35 20 67 52 81a79 79 0 0 1-17-1c-4-1-7 3-6 6 11 32 38 55 70 60-27 18-58 28-91 28H7c-3 0-6 2-7 5s1 6 4 8a246 246 0 0 0 226 11 251 251 0 0 0 139-221v-2c0-4 2-9 5-11 14-11 26-24 35-39 3-4-1-9-5-7z" fill="#76a9ea"/></svg></div>
</div>
Customize button - Change YOUR_USERNAME with your username without @
Change URL_YOU_WANT_TO_SHARE with Url you want to share.
Change YOUR_TWEET_HERE with your words.
2. Add Javascript - Add Below Javascript code inside your HTML anywhere. I prefer above closing body tag.
<script>
var tweet = document.getElementById('tweet').innerHTML;
var user = document.getElementById('twusername').innerHTML;
var tweeturl = document.getElementById('twurl').innerHTML;
document.getElementById('tweet').href="https://twitter.com/intent/tweet?url="+tweeturl+"&text="+tweet+"&via="+user;
document.getElementById('tweetbtn').href="https://twitter.com/intent/tweet?url="+tweeturl+"&text="+tweet+"&via="+user;

</script>
3. Add CSS/Style - add below CSS in your post to decorate this button.
.clicktotweet{border:2px solid #00aced;border-radius:15px;background:#eee;padding:1em;font-size:18px; }
.clicktotweet a{color:#0084b4;text-decoration:none;}
#twurl,#twusername{display:none}
.send-btn{padding:5px 0;}
.send-btn{text-align:right}
.send-btn svg{margin-left:10px;margin-bottom:-5px}
4. Add Done! - Save Changes, your Click to tweet button is ready to use.
Customize Button Style - Change #00aced with your colour code to change border colour.
change #eee with you colour code to change the background of this button
Change #0084b4 with you colour code to change link colour.
You can Find All HTML colour code here.
To Improve Your Twitter Preview use Twitter Card in Your Website.

Conclusion

I'll Hope this guide will help you to add "Click to tweet" button inside your post. If you're facing any issue than comment below. I'll answer them soon.
July 23, 2018 2018-07-23T13:13:51Z

3 comments:

  1. hey! Make It Somewhat Like One I am Using On my Site...
    My Site

    ReplyDelete
    Replies
    1. Thanks for your suggestion! I Provided customization option so, people can add there favorite color by themselves

      Delete
    2. yep! thats true...
      Whatever Its superb

      Delete