Australia's Leading Digital Marketing Experts. T. 1300 235 433  |  Aggreagtion Enquires Welcome

Add Floating Social Share Buttons To WordPress

This is likely the first of many posts showing you how to include social share icons to your WordPress website. We recently removed our own in-post sharing icons because aesthetically they just didn't work, and the icons weren't readily available when scrolling. The answer was to include a floating block of most often used icons on the left side of each page. The basic code on this page provides an alternative to bloaty plugins that'll accomplish a similar effect.

We have another article scheduled that will show you how to include social icons and share buttons - or any other content - into the top or bottom of a WordPress post or page.

When using our snippet there's a little bit of work required to build the necessary links but it's almost always a better alternative to a plugin. That said, we will be building a full-featured social sharing plugin soon designed to meet the needs of those people we work with. Important features excluded in this example will be included into our plugin - such as a floating footer for mobile use, custom buttons, conditionally show on different post types, and so on.

The Result

On the chance we're not using the code as described below (which is likely), the icons will look as follows on your page when viewed on a desktop browser.

Floating Social Icons

We've included additional buttons for the WordPress comment area, your website contact form, and a telephone link - all of which may need to be altered.

The Code

Note that FontAwesome is required to render the icons. There's a good chance your website already references the required CSS by default. If not, consider using this code.

Copy and paste the WordPress function into your theme's functions.php file or, if you sensibly have one installed, your custom functions plugin.

1
<?php 
2
/*
3
 Add Floating Social Share Buttons To WordPress
4
 https://www.beliefmedia.com.au/floating-social-buttons
5
*/
6
 
7
8
 
9
  /* Post ID */
10
  global $post;
11
  $id = $post->ID;
12
 
13
  /* Title, Permalink, Excerpt & Website Name */
14
  $title = get_the_title($id);
15
  $permalink = get_permalink($id);
16
  $sitename = get_bloginfo();
17
  $excerpt = get_the_excerpt($id);
18
  $telephone = '1300235433';
19
 
20
  ?><div class="bm-social-wrapper">
21
<div class="bmshared sharetitle">
22
            <i class="fa fa-share-alt" aria-hidden="true"></i>
23
 </div>
24
<div class="bmshare facebook">
25
            <a href="javascript:;" onClick="window.open('https://www.facebook.com/sharer/sharer.php?u=<?php echo urlencode($permalink); ?>','Share <?php echo $sitename; ?> on Facebook','toolbar=1,location=1,directories=0,status=0,menubar=1,scrollbars=1,resizable=1,copyhistory=0,width=550,height=630,left=0,top=0')"><i class="fa fa-facebook" aria-hidden="true"></i></a>
26
        </div>
27
<div class="bmshare twitter">
28
            <a href="javascript:;" onClick="window.open('https://twitter.com/home?status=<?php echo $title . ': ' . $permalink; ?>','Share <?php echo $sitename; ?> on Twitter','toolbar=1,location=1,directories=0,status=0,menubar=1,scrollbars=1,resizable=1,copyhistory=0,width=550,height=630,left=0,top=0')"><i class="fa fa-twitter" aria-hidden="true"></i></a>
29
        </div>
30
<div class="bmshare google">
31
            <a href="javascript:;" onClick="window.open('https://plus.google.com/share?url=<?php echo urlencode($permalink); ?>','Share <?php echo $sitename; ?> on Google','toolbar=1,location=1,directories=0,status=0,menubar=1,scrollbars=1,resizable=1,copyhistory=0,width=430,height=610,left=0,top=0')"><i class="fa fa-google" aria-hidden="true"></i></a>
32
        </div>
33
<div class="bmshare linkedin">
34
            <a href="javascript:;" onClick="window.open('https://www.linkedin.com/shareArticle?mini=true&url=<?php echo urlencode($permalink); ?>&title=<?php echo $title; ?>&summary=<?php $excerpt; ?>&source=<?php echo $permalink; ?>','Share <?php echo $sitename; ?> on LinkedIn','toolbar=1,location=1,directories=0,status=0,menubar=1,scrollbars=1,resizable=1,copyhistory=0,width=550,height=630,left=0,top=0')"><i class="fa fa-linkedin" aria-hidden="true"></i></a>
35
        </div>
36
<div class="bmshare bmphone">
37
            <a href="tel:<?php echo $telephone; ?>"><i class="fa fa-phone" aria-hidden="true"></i></a>
38
        </div>
39
<div class="bmshare bmcontact">
40
            <a href="<?php echo get_site_url(); ?>/contact"><i class="fa fa-address-book" aria-hidden="true"></i></a>
41
        </div>        <?php if (comments_open($id) !== false) { ?><div class="bmshare wpcomments">
42
              <a href="<?php echo $permalink; ?>#respond"><i class="fa fa-comments" aria-hidden="true"></i></a>
43
          </div>        <?php } ?></p></div><?php
44
}
45
add_action('wp_footer', 'beliefmedia_floating_social_shares', 99);

The CSS

In your custom function's CSS file, copy the following:

1
<?php 
2
/*
3
 Floating social buttons
4
 https://www.beliefmedia.com.au/floating-social-buttons
5
*/
6
 
7
.bm-social-wrapper {
8
  position: fixed;
9
  top: 50%;
10
  transform: translateY(-50%);
11
}
12
 
13
.bmshare {
14
  width: 50px;
15
  height: 50px;
16
  position: relative;
17
  cursor: pointer;
18
  transition: all 0.2s linear;
19
}
20
 
21
.bmshared {
22
  width: 50px;
23
  height: 50px;
24
  position: relative;
25
  cursor: no-drop;
26
  transition: all 0.2s linear;
27
}
28
 
29
.bmshare .fa {
30
  position: absolute;
31
  top: 50%;
32
  left: 50%;
33
  transform: translate(-50%,-50%);
34
  color: #fff;
35
  font-size: 20px;
36
}
37
 
38
.bmshared .fa {
39
  position: absolute;
40
  top: 50%;
41
  left: 50%;
42
  transform: translate(-50%,-50%);
43
  color: #000;
44
  font-size: 20px;
45
}
46
 
47
.bmshared.sharetitle {
48
  background: #F0F0F0;
49
  color: #000000;
50
}
51
 
52
.bmshare.facebook {
53
  background: #3b5998;
54
}
55
 
56
.bmshare.twitter {
57
  background: #55acee;
58
}
59
 
60
.bmshare.reddit {
61
  background: #ff4500;
62
}
63
 
64
.bmshare.google {
65
  background: #dd4b39;
66
}
67
 
68
.bmshare.linkedin {
69
  background: #0098B2;
70
}
71
 
72
.bmshare.whatsapp {
73
  background: #4dc247;
74
}
75
 
76
.bmshare.bmcontact {
77
  background: #FFB301;
78
}
79
 
80
.bmshare.bmphone {
81
  background: #4dc247;
82
}
83
 
84
.bmshare.wpcomments {
85
  background: #0073AA;
86
}
87
 
88
.bmshare:hover {
89
  width: 70px;
90
}
91
 
92
.bmcontainer {
93
  max-width: 700px;
94
  margin: 50px auto;
95
}
96
 
97
.bmcontainer h2 {
98
  margin-bottom: 20px;
99
  text-align: center;
100
}
101
 
102
.bmcontainer .section{
103
  margin-bottom: 15px;
104
  line-height: 22px;
105
}
106
 
107
@media only screen and (max-width : 1000px) {
108
 
109
  .bmshare {
110
    width: 25px;
111
    height: 25px;
112
    position: relative;
113
    cursor: pointer;
114
    transition: all 0.2s linear;
115
  }
116
 
117
  .bmshared {
118
    width: 25px;
119
    height: 25px;
120
    position: relative;
121
    cursor: no-drop;
122
    transition: all 0.2s linear;
123
  }
124
 
125
  .bmshare .fa {
126
    position: absolute;
127
    top: 50%;
128
    left: 50%;
129
    transform: translate(-50%,-50%);
130
    color: #fff;
131
    font-size: 13px;
132
  }
133
 
134
  .bmshared .fa {
135
    position: absolute;
136
    top: 50%;
137
    left: 50%;
138
    transform: translate(-50%,-50%);
139
    color: #000;
140
    font-size: 10px;
141
  }
142
}
143
 
144
@media only screen and (max-width : 768px) {
145
  .bm-social-wrapper {
146
     display:none;
147
  }
148
}

Considerations

  • Popups are never a good idea. That said, we've included popups in this post only because we haven't shared a modal plugin solution yet. The solution we'll be using soon includes the Twitter, Facebook, LinkedIn and other share pages as an iframe in a nicely formatted CSS modal. Expect it soon.
  • If you're a client - past or present - send us specific feature requests you'd like to see in your BeliefMedia client plugin.
  • Remember to change hard-coded text such as your phone number and contact page URL.
  • We've only included a few commonly used social networks. Add others as necessary by simply copying the code.

Download our 650-page guide on Finance Marketing. We'll show you exactly how we generate Billions in volume for our clients.

  AUS Eastern Standard Time (Washington)

  Want to have a chat?
 

Like this article?

Share on facebook
Share on Facebook
Share on twitter
Share on Twitter
Share on linkedin
Share on Linkdin
Share on pinterest
Share on Pinterest

Leave a comment

READY TO HAVE A CHAT? CALL US ANYTIME ON 1300 235 433