JS: CUSTOM TWEETER EMBED BOX FOR WEBSITE

Custom Twitter Box Tutorial - Tweets on tweeter can be embed on any website and any webpage. This is modification or customisation of twitter box, so it can be more stylish and using flat design.

JS: CUSTOM TWEETER EMBED BOX FOR WEBSITE

CSS

Save these CSS code before tag ]]></b:skin> or </style> or in CSS template's area.

.tweet-box{
background:#55acee;
padding:20px;
margin:20px auto;
color:#fff;
font-family:Georgia;
border-radius:5px;
border:1px solid transparent;
}
.tweet-box p{
font-size:130%;
font-style:italic;
margin:0!important;
line-height:1.3em;
}
a.tweet-this{
display:block;
float:right;
margin-top:10px;
color:#fff;
text-decoration:none;
transition:all .4s ease-in-out;
}
a.tweet-this:hover{
color:#002039
}

HTML: FULL VERSION

This is full version Tweet's box, including the custom title and url link to your original tweets.

<div class="tweet-box">
<p id="p1">YOUR CUSTOM TEXT</p>
<script>
var twurl = window.location.href;
var twcontent= document.getElementById("p1").textContent;
var twesc=escape(twcontent);
document.write('<a class="tweet-this" href="https://twitter.com/intent/tweet?text='+twesc+'&url='+twurl+'&via=USERNAME_HERE&related=USERNAME_HERE" target="_blank" title="Tweet This">\
<i class="fa fa-twitter"></i> Tweet This</a> \
<div style="clear:both"></div> \
');
</script>
</div>

CHANGEABLE

USERNAME_HERE : Change it to your twitter's username.
YOUR CUSTOM TEXT: Free text.

HTML: CLEAN VERSION WITHOUT LINK

For optional style, if you want to erase the link's url of your tweets, then find and delete this code based on previous code:

var twurl = window.location.href;

AND ...

&url='+twurl+'

So, the result of Tweet box clean version would be like this:

<div class="tweet-box">
<script>
var twcontent= document.getElementById("p1").textContent;
var twesc=escape(twcontent);
document.write('<a class="tweet-this" href="https://twitter.com/intent/tweet?text='+twesc+'&via=USERNAME_HERE&related=USERNAME_HERE" target="_blank" title="Tweet This">\
<i class="fa fa-twitter"></i> Tweet This</a> \
<div style="clear:both"></div> \
');
</script>
</div>