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&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