Sopheap
Social Share is very important for growing so much traffic. If you don’t put social share button on your website, you will lose a lot of traffic and money on the table. In this article I will show you how to put social share button on every post without using any plugins. Follow the step by step, if you understand please comment on the box below.
The first thing you need to link font awesome to your website. You can find it here.
Add the code below to your content.php. You can find that file by go to Appearance => Editor and look for it.
[php]
<span class="contents clearfix">
<em>Share this on</em>
<a target="_blank" href="https://twitter.com/share?url=<?php echo get_permalink() ?>" rel="nofollow" class="social-btn twitter"><i class="fa fa-twitter"></i></a>
<a target="_blank" href="https://plus.google.com/share?url=<?php echo get_permalink() ?>" class="social-btn google-plus" rel="nofollow"><i class="fa fa-google-plus"></i></a>
<a target="_blank" href="http://www.facebook.com/sharer/sharer.php?u=<?php echo get_permalink() ?>" class="social-btn facebook" rel="nofollow"><i class="fa fa-facebook"></i></a>
</span>
[/php]
Finally add the style sheet. Open your theme’s style and add the code below
[css]
.contents em{
float: left;
line-height: 48px;
margin-right: 10px;
font-size: 11px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;;
}
a.social-btn {
line-height: 32px;
width: 32px;
font-size: 12px;
text-align: center;
margin: 8px 0 0 2px;
padding: 0;
float: left;
color: #fff;
}
a.social-btn i {
width: auto;
float: none;
border: none;
line-height: 30px;
font-size: 13px;
}
/* — Social Buttons Colors */
.social-btn.facebook {
background-color: #659de3;
}
.social-btn.twitter {
background-color: #65b8e3;
}
.social-btn.google-plus {
background-color: #e3be65;
}
span.contents {
display: block;
}
[/css]
Comments