Stay connected box for WordPress without a plugin

I’ve done a lot of research to look for a plugin, that can add a “stay connected with us” box below my posts. Unfortunately there is none. The main reason for this, is because there is no proper hook in wordpress to add a content block after the sinlge post. Fortunately, the workaround isn’t too hard. It’s attractive, visitors will love it!

CSS

I’ve done 3 buttons so far: facebook, twitter, and email. You can create new based on this code.

The buttons

[css] a.facebook-small:before,a.twitter-small:before,a.email-small:before {
-moz-border-radius: 6px;
-moz-transform: translate(0,0);
-moz-transition: all .2s ease;
-ms-transition: all .2s ease;
-o-transition: all .2s ease;
-webkit-border-radius: 6px;
-webkit-transform: translate(0,0);
-webkit-transition: all .2s ease;
border-radius: 2px;
color: transparent;
content: "";
cursor: pointer;
display: inline-block;
font: 0/0 a;
height: 27px;
margin: 0 10px 0 0;
overflow: hidden;
position: relative;
text-align: center;
text-decoration: none;
text-shadow: none;
transform: translate(0,0);
transition: all .2s ease;
vertical-align: bottom;
width: 30px;
}

a.social-small:active:before {
-moz-transform: translate(0,3px);
-webkit-transform: translate(0,3px);
transform: translate(0,3px);
}

a.twitter-small:before {
-moz-box-shadow: 0 4px 0 #2695BC;
-webkit-box-shadow: 0 4px 0 #2695BC;
background: #2CA9E1 url(https://i.imgur.com/qAiH79O.png) no-repeat 0 0;
box-shadow: 0 4px 0 #2695BC;
}

a.twitter-small:active:before {
-moz-box-shadow: 0 2px 0 #2695BC;
-webkit-box-shadow: 0 2px 0 #2695BC;
box-shadow: 0 2px 0 #2695BC;
}

a.facebook-small:before {
-moz-box-shadow: 0 4px 0 #293F63;
-webkit-box-shadow: 0 4px 0 #293F63;
background: #3B5997 url(https://i.imgur.com/qAiH79O.pngg) no-repeat -30px 0;
box-shadow: 0 4px 0 #293F63;
}

a.facebook-small:active:before {
-moz-box-shadow: 0 2px 0 #293F63;
-webkit-box-shadow: 0 2px 0 #293F63;
box-shadow: 0 2px 0 #293F63;
}

a.email-small:before {
-moz-box-shadow: 0 4px 0 #A76917;
-webkit-box-shadow: 0 4px 0 #A76917;
background: #f89a1e url(https://i.imgur.com/qAiH79O.png) no-repeat -60px 0;
box-shadow: 0 4px 0 #A76917;
}

a.email-small:active:before {
-moz-box-shadow: 0 2px 0 #A76917;
-webkit-box-shadow: 0 2px 0 #A76917;
box-shadow: 0 2px 0 #A76917;
}
[/css]

 The container

[css].stayconnected-wrap {
background-color: #FFFFFF;
border-radius: 4px;
box-shadow: 0 0.15em 0.35em 0 rgba(0, 0, 0, 0.133);
display: block;
margin: 10px 0 0;
padding: 25px 60px 41px;
}

.stayconnected-wrap a {
color: #777;
}

.stayconnected-wrap a:hover {
color: #444;
}

.stayconnected-wrap h4 {
border-bottom: 1px solid #F5F5F5;
font-size: 1.6em;
font-style: italic;
margin: 0 0 20px;
padding: 0 0 6px;
}

.stayconnected-wrap ul {
list-style-type: none;
margin: 0;
}

.stayconnected-wrap li {
list-style-type: none;
display: inline-block;
margin: 0 15px 0 0;
vertical-align: middle;
}[/css]

 The HTML output

<div class=”stayconnected-wrap stay-connected”>
 <h4>Stay connected</h4>
 <ul>
 <li><a class=”twitter-small social-small” href=”https://twitter.com/ernest_marcinko”>Follow Us on <strong>Twitter</strong></a></li>
 <li><a class=”facebook-small social-small” href=”https://www.facebook.com/pages/WPDreams/383702515034741″>Follow Us on <strong>Facebook</strong></a></li>
 <li><a class=”email-small social-small” href=”http://feedburner.google.com/fb/a/mailverify?uri=wpdreams&amp;loc=en_US” target=”_blank”>subscribe by <strong>e-Mail</strong></a></li>
 </ul>
</div>

The best place for this html code is in the current templates folders single.php file. After some experimenting you will surely find the best location!

Result

Grab the code

DemoDownload