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
    <blockquote class="wp-embedded-content" data-secret="PS9dEbOwd6"><a href="https://www.beliefmedia.com.au/floating-social-buttons">Add Floating Social Share Buttons To WordPress</a></blockquote><iframe class="wp-embedded-content" sandbox="allow-scripts" security="restricted" style="position: absolute; clip: rect(1px, 1px, 1px, 1px);" title="“Add Floating Social Share Buttons To WordPress” — BeliefMedia Finance & Mortgage Broker Digital Marketing" src="https://www.beliefmedia.com.au/floating-social-buttons/embed#?secret=PS9dEbOwd6" data-secret="PS9dEbOwd6" width="600" height="338" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
5
*/
6
 
7
 
8
9
 
10
  /* Post ID */
11
  global $post;
12
  $id = $post->ID;
13
 
14
  /* Title, Permalink, Excerpt & Website Name */
15
  $title = get_the_title($id);
16
  $permalink = get_permalink($id);
17
  $sitename = get_bloginfo();
18
  $excerpt = get_the_excerpt($id);
19
  $telephone = '1300235433';
20
 
21
  ?>
22
 
23
  <div class="bm-social-wrapper">
24
        <div class="bmshared sharetitle">
25
            <i class="fa fa-share-alt" aria-hidden="true"></i>
26
    </div>
27
        <div class="bmshare facebook">
28
            <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>
29
        </div>
30
        <div class="bmshare twitter">
31
            <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>
32
        </div>
33
        <div class="bmshare google">
34
            <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>
35
        </div>
36
        <div class="bmshare linkedin">
37
            <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>
38
        </div>
39
        <div class="bmshare bmphone">
40
            <a href="tel:<?php echo $telephone; ?>"><i class="fa fa-phone" aria-hidden="true"></i></a>
41
        </div>
42
        <div class="bmshare bmcontact">
43
            <a href="<?php echo get_site_url(); ?>/contact"><i class="fa fa-address-book" aria-hidden="true"></i></a>
44
        </div>
45
 
46
        <?php if (comments_open($id) !== false) { ?>
47
          <div class="bmshare wpcomments">
48
              <a href="<?php echo $permalink; ?>#respond"><i class="fa fa-comments" aria-hidden="true"></i></a>
49
          </div>
50
        <?php } ?>
51
 
52
  </div>
53
 
54
<?php
55
}
56
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
    <blockquote class="wp-embedded-content" data-secret="PS9dEbOwd6"><a href="https://www.beliefmedia.com.au/floating-social-buttons">Add Floating Social Share Buttons To WordPress</a></blockquote><iframe class="wp-embedded-content" sandbox="allow-scripts" security="restricted" style="position: absolute; clip: rect(1px, 1px, 1px, 1px);" title="“Add Floating Social Share Buttons To WordPress” — BeliefMedia Finance & Mortgage Broker Digital Marketing" src="https://www.beliefmedia.com.au/floating-social-buttons/embed#?secret=PS9dEbOwd6" data-secret="PS9dEbOwd6" width="600" height="338" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
5
*/
6
 
7
 
8
.bm-social-wrapper {
9
  position: fixed;
10
  top: 50%;
11
  transform: translateY(-50%);
12
}
13
 
14
.bmshare {
15
  width: 50px;
16
  height: 50px;
17
  position: relative;
18
  cursor: pointer;
19
  transition: all 0.2s linear;
20
}
21
 
22
.bmshared {
23
  width: 50px;
24
  height: 50px;
25
  position: relative;
26
  cursor: no-drop;
27
  transition: all 0.2s linear;
28
}
29
 
30
.bmshare .fa {
31
  position: absolute;
32
  top: 50%;
33
  left: 50%;
34
  transform: translate(-50%,-50%);
35
  color: #fff;
36
  font-size: 20px;
37
}
38
 
39
.bmshared .fa {
40
  position: absolute;
41
  top: 50%;
42
  left: 50%;
43
  transform: translate(-50%,-50%);
44
  color: #000;
45
  font-size: 20px;
46
}
47
 
48
.bmshared.sharetitle {
49
  background: #F0F0F0;
50
  color: #000000;
51
}
52
 
53
.bmshare.facebook {
54
  background: #3b5998;
55
}
56
 
57
.bmshare.twitter {
58
  background: #55acee;
59
}
60
 
61
.bmshare.reddit {
62
  background: #ff4500;
63
}
64
 
65
.bmshare.google {
66
  background: #dd4b39;
67
}
68
 
69
.bmshare.linkedin {
70
  background: #0098B2;
71
}
72
 
73
.bmshare.whatsapp {
74
  background: #4dc247;
75
}
76
 
77
.bmshare.bmcontact {
78
  background: #FFB301;
79
}
80
 
81
.bmshare.bmphone {
82
  background: #4dc247;
83
}
84
 
85
.bmshare.wpcomments {
86
  background: #0073AA;
87
}
88
 
89
.bmshare:hover {
90
  width: 70px;
91
}
92
 
93
.bmcontainer {
94
  max-width: 700px;
95
  margin: 50px auto;
96
}
97
 
98
.bmcontainer h2 {
99
  margin-bottom: 20px;
100
  text-align: center;
101
}
102
 
103
.bmcontainer .section{
104
  margin-bottom: 15px;
105
  line-height: 22px;
106
}
107
 
108
@media only screen and (max-width : 1000px) {
109
 
110
  .bmshare {
111
    width: 25px;
112
    height: 25px;
113
    position: relative;
114
    cursor: pointer;
115
    transition: all 0.2s linear;
116
  }
117
 
118
  .bmshared {
119
    width: 25px;
120
    height: 25px;
121
    position: relative;
122
    cursor: no-drop;
123
    transition: all 0.2s linear;
124
  }
125
 
126
  .bmshare .fa {
127
    position: absolute;
128
    top: 50%;
129
    left: 50%;
130
    transform: translate(-50%,-50%);
131
    color: #fff;
132
    font-size: 13px;
133
  }
134
 
135
  .bmshared .fa {
136
    position: absolute;
137
    top: 50%;
138
    left: 50%;
139
    transform: translate(-50%,-50%);
140
    color: #000;
141
    font-size: 10px;
142
  }
143
}
144
 
145
@media only screen and (max-width : 768px) {
146
  .bm-social-wrapper {
147
     display:none;
148
  }
149
}

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.

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