RBA Cash Rate: 4.35% · 1AUD = 0.67 USD · Inflation: 4.1%  
Leading Digital Marketing Experts</strong | 1300 235 433 | Aggregation Enquires Welcome | Book Appointment
1300235433
Example Interest Rates: Home Loan Variable: 5.69% (5.89%*) • Home Loan Fixed: 5.39% (6.59%*) • Fixed: 5.39% (6.59%*) • Variable: 5.69% (5.89%*) • Investment IO: 5.69% (6.48%*) • Investment PI: 5.39% (6.59%*)

Add Floating Social Share Buttons To WordPress

BeliefMedia Logo
1300235433

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 complimentary 650-page guide on marketing for mortgage brokers. We'll show you exactly how we generate billions in volume for our clients.
Finance Guide, Cropped Top and Bottom
  Timezone: 1 · [ CHANGE ]

RELATED READING

Like this article?

Share on Facebook
Share on Twitter
Share on Linkdin
Share on Pinterest
Picture of Martin Khoury

Martin Khoury

Martin is the Managing Director of BeliefMedia Pty Limited, and Australia's leading Finance Marketing Specialist. He is supported by a team of Australia's finest. Read more about Marty here.

Leave a comment

Call us on 1300 235 433
Enquire Online
Make an Appointment
General Enquires: 1300 235 433 • Support: (02) 8765 8887
The comparison rate is calculated on a secured loan of $150,000 with a term of 25 years with monthly principal and interest payments. WARNING: This comparison rate is true only for examples given and may not include all fees and charges. Different terms, fees or other loan amounts might result in a different comparison rate. Important Information: Applications are subject to credit approval. Full terms and conditions will be included in our loan offer. Fees and charges are payable. Interest rates are subject to change. Offer does not apply to internal refinances and is not transferable between loans. As this advice has been prepared without considering your objectives, financial situation or needs, you should consider its appropriateness to your circumstances before acting on the advice. [ Example Credit Guide Link ]
Facebook Twitter Youtube Linkedin Facebook-f
    
© BeliefMedia | Privacy • Terms • Disclaimer
BeliefMedia Pty Limited