Wifeo Creative Code

<<< back to homepage for others creatives tricks

CLICK-TO-TWEET BOX WITH QUOTE

An awesome "click to tweet" box for tweet a quote of your article. You can integrate this "click to tweet" box into your blog to encourage sharing of your article.

An awesome retweet box from Wifeo Code

CLICK TO TWEET

BLOGGERS, SHARE THIS CREATIVE DEMO ON YOUR WEBSITE :

     
    <p data-height="360" data-theme-id="9277" data-slug-hash="yayzvk" data-default-tab="result" data-user="wifeo" class='codepen'>See this Pen on <a href='http://codepen.io/wifeo/pen/yayzvk'>Codepen</a>
<script async src="//codepen.io/assets/embed/ei.js"></script><div align="center">View source code on <a href="http://www.wifeo.com/code/64-click-to-tweet-box-with-quote.html">wifeo/code</a></div>

On Facebook

On Twitter

On Google+

On LinkedIn

CSS CODE :

.autotweet > div{
border:2px solid #0084B4;
color:#0084B4;
border-radius:5px;
padding:15px;
text-align:right;
font-size:13px;
font-weight: 400;
position: relative;
}
.autotweet:hover > div{
box-shadow: 0px 0px 3px 0px #656565;
background-color:#60A8DC;
color:#ffffff;
}
.autotweet > div::before {
content: "\201C";
font-family: Georgia, serif;
font-size: 65px;
font-weight: bold;
color: #0084B4;
position: absolute;
left: 10px;
top:0px;
}
.autotweet > div::after{
content: "";
}
.autotweet > div > div{
font-size:20px;
text-align:left;
font-weight: 300;
padding-left:35px;
}

JAVASCRIPT CODE :

$( document ).ready(function() {$(".autotweet").on("click", function(){
	var textToRt=encodeURIComponent($(this).find('.textrt').text());
    var shortUrlToRt=encodeURIComponent($(this).attr('shorturlrt'));
    var urlToRt=encodeURIComponent($(this).attr('urlrt'));

	window.open('https://twitter.com/intent/tweet?text='+textToRt+'&via=wifeo&related=wifeo&url='+urlToRt
+'&counturl='+shortUrlToRt,
'mini_tweet', 'height=320, width=640, toolbar=no, menubar=no, scrollbars=no');
});
});

HTML CODE :

<a style="text-decoration: none;"
class="autotweet" href="javascript:void(0)"
shorturlrt="http://www.wifeo.com/code/64-click-to-tweet-box-with-quote.html"
urlrt="http://www.wifeo.com/code/64-click-to-tweet-box-with-quote.html">
<div >
<div class="textrt">
An awesome retweet box from Wifeo Code
</div>
<i class="fa fa-twitter fa-lg" aria-hidden="true"></i> CLICK TO TWEET</div>
</a>