Retweetable Blockquote in WordPress Posts With CSS, Js

Abhishek Ghosh

By Abhishek Ghosh June 8, 2018 10:19 pm Updated on June 8, 2018

Retweetable Blockquote in WordPress Posts With CSS, Js

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 :

<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>

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 :

Those junk vintage javascripts not needed to retweet.

– Abhishek Ghosh, TWEET THIS QUOTE

---

Poor man’s server, CDN are slower! Loading too much Js will kill the need. This is what is used above :

<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>

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 :

<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>

1

2

3

4

5

<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 :

.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;
}

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 :

$( 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');
});
});

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.

Retweetable Blockquote in WordPress Posts With CSS, Js

How To create Retweetable Blockquote in WordPress Posts

About Abhishek Ghosh

Here’s what we’ve got for you which might like :

Take The Conversation Further ...

How To create Retweetable Blockquote in WordPress Posts

About Abhishek Ghosh

Here’s what we’ve got for you which might like :

Articles Related to Retweetable Blockquote in WordPress Posts With CSS, Js

Take The Conversation Further ...