Post navigation

#25 Shortcode Twitter

Happy Monday! I hope you have all had a lovely weekend! Yesterday was all about Pinterest and today I am sticking with Social Media and moving onto to Twitter! I will be using a shortcode again but this time it will allow me to add tweetable links to a post instead. This shortcode will make your content tweetable for your readers quicker and easier.

This is a simple task and should not take you more than an hour, an easy task to start our final week of coding! Can you believe it?!

Let’s get started!

First you will need to add this section of code to your functions.php file, add it underneath the pinterest_function you will of added if you completed day 24 shortcode Pinterest code (if not simply add to the end of your functions.php file).

If you have not completed the pinterest tutorial add this section of code instead to the bottom of your functions.php file:

1

2

3

4

5

functionregister_shortcodes(){

add_shortcode('tweetable','tweetable_function');

}

add_action('init','register_shortcodes');

Next add the styling to the tweetable shortcode:

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

45

46

47

48

49

50

51

52

/*Tweetable shortcode

-------------------------*/

.tweetable{

margin:15px;

}

.tweetable-header{

text-align:center;

font-size:25px;

margin-bottom:30px;

}

.tweetable-main{

position:relative;

text-align:center;

margin:5px;

}

.tweetable-maina{

max-width:500px;

margin:0auto;

display:block;

line-height:19px;

}

a.tweetable-click{

font-size:12px;

margin:5pxauto;

display:block;

}

a.tweetable-click:hover{

color:#000;

}

.tweetable.fa-quote-left{

position:absolute;

font-size:25px;

margin:5px;

left:50px;

top:-20px;

}

.tweetable.fa-quote-right{

position:absolute;

font-size:25px;

margin:5px;

right:50px;

bottom:-20px;

}

If you decided to change the styling remember that the maximum tweet you will be allowing people to send out is 140 characters so test out your styling with a piece of text that is 140 characters.

Finally to add a tweetable to your post, use your newly made shortcode, change what is written in between the tags to be more suitable to your blog:

1

[tweetable]Thispost isamazeballs![/tweetable]

NB- Make the text inside only 100 characters long as when a person clicks to tweet it will also include your twitter handler and a link back to the blog post. Still test each quote to make sure it is the correct length.

The Fashion Technologist is brought to you by

The goal of this blog is to show how loving fashion and code can be a natural occurrence for someone. The team behind chloédigital wanted to give insight into what life is like in this new and exciting industry of Fashion and Technology in London... Find Out More