in ,

Add Social Share button To Your WordPress Site

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]

What do you think?

Written by Sopheap

The goal of me is sharing new ideas, inspiration art, fresh and useful resource, covering web design and development, graphic design, advertising, mobile development and life style.

Comments

Leave a Reply

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

disable right click on wordpress

Disable Right Click On Your WordPress Site

WordPress highlight the differences between two images

WordPress highlight the differences between two images