stayconnected3

Stay connected box for WordPress without a plugin

Ernest Marcinko Tutorials, Wordpress 1 Comment

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
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;
}
 The container
.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;
}
 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
Stay connected box

Stay connected box

Grab the code

DemoDownload

Ernest Marcinko

WordPress developer, javascript enthusiast, photoshop clicker and the founder of wp-dreams.com

Stay connected

Related Posts
Filter by
Post Page
Blog Tutorials Wordpress Hosting Testing jQuery Commercial Plugins Wordpress
Sort by

Comments 1

  1. Pingback: Maximum performance with WordPress | WordPress Dreams

Leave a Reply

Your email address will not be published. Required fields are marked *