In our previous article, we demonstrated how to create retweetable hyperlink within WordPress posts with Twitter icon, like this one – Tweet this real working link . We Can Create Retweetable Blockquote in WordPress Posts With CSS, Js For Special Articles Too. Embedding the CSS and Javascript in Post Will Do the Job. Below is screenshot after hover for post decoration (real working thing is after it).
How To create Retweetable Blockquote in WordPress Posts
First, study the previous work :
|
1 |
<a class="twitter" title="Click to tweet this" href="http://twitter.com/home/?status=Twitter Hashtag, @ and Inline Tweet in WordPress https://thecustomizewindows.com/2014/08/integrate-twitter-hashtag-and-inline-tweet-in-wordpress/ by @AbhishekCTRL" target="_blank" rel="noopener nofollow">Tweet this real working link <i class="icon-twitter"></i></a> |
Twitter server automatically handles the Base64 encoding.
This is result of poor man’s way :
– Abhishek Ghosh, TWEET THIS QUOTE
---
Poor man’s server and CDN is slower – loading too much Js will kill the need. This is what is used above :
|
1 2 3 |
<blockquote><a class="twitter" title="Click to tweet this" href="http://twitter.com/home/?status=Twitter Hashtag, @ and Inline Tweet in WordPress https://thecustomizewindows.com/2014/08/integrate-twitter-hashtag-and-inline-tweet-in-wordpress/ by @AbhishekCTRL" target="_blank">Those junk vintage javascripts not needed to retweet. <i class="icon-twitter"></i></a> </blockquote> <small><a class="twitter" title="Click to tweet this" href="http://twitter.com/home/?status=Twitter Hashtag, @ and Inline Tweet in WordPress https://thecustomizewindows.com/2014/08/integrate-twitter-hashtag-and-inline-tweet-in-wordpress/ by @AbhishekCTRL" target="_blank">- Abhishek Ghosh, TWEET THIS QUOTE</a></small> |
You can see, the above is just matter of presentation. The thing does the job and hardcoded. In case you are not that much impressed, I have funky way using javascript :
See the Pen vrgBEL by Abhishek Ghosh (@abhishekghosh-the-encoder) on CodePen.
You can see the full code here on CodePen (which is a modified rip-off from one StackOverflow answer). In that code, you need lot of changes to modify for your own. By the way, you need jQuery loading on front-end to make it working. First part is HTML, which you need to change :
|
1 2 3 4 5 |
<div align="center"><div style="width:60%"> <a style="text-decoration: none;" class="autotweet" href="javascript:void(0)" shorturlrt="https://thecustomizewindows.com/2014/08/integrate-twitter-hashtag-and-inline-tweet-in-wordpress/" urlrt="https://thecustomizewindows.com/2014/08/integrate-twitter-hashtag-and-inline-tweet-in-wordpress/"><div ><div class="textrt">Those junk vintage javascripts not needed to retweet.</div><i class="fa fa-twitter fa-lg" aria-hidden="true"></i><small>-Abhishek Ghosh, TWEET THIS</small></div></a> </div></div> |
On CSS, you do not need style for body, you need only this :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
.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:hover > div::before { content: "\201C"; font-family: Georgia, serif; font-size: 65px; font-weight: bold; color: #ffffff; 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; } |
And the Js needs moification :
|
1 2 3 4 5 6 7 8 9 |
$( 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=AbhishekCTRL&related=AbhisheCTRL&hashtags=AbhishekGhosh&url='+urlToRt+'&counturl='+shortUrlToRt, 'mini_tweet', 'height=320, width=640, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, directories=no, status=no'); }); }); |
Note hashtags=AbhishekGhosh, I used AbhishekGhosh as hashtag.
About Abhishek Ghosh
Here’s what we’ve got for you which might like :
Additionally, performing a search on this website can help you. Also, we have YouTube Videos.
Take The Conversation Further ...
We'd love to know your thoughts on this article.
Meet the Author over on Google+ or Twitter to join the conversation right now!
If you want to Advertise on our Article or want Business Partnership, you are invited to Contact us.
Contact Us