Add Social Media Sharing Buttons To WordPress Without Plugin

Add Social Media Sharing Buttons To WordPress Without Plugin-Social Media has to turn out to be a whole thing about every internet site. In case you haven’t equipped your website with the proper sort of social media icons, you’re probably lacking out on gathering the eye of centered customers. WordPress is the website improvement platform that has made it viable for individuals to personal a perfectly purposeful and visually attractive web portal.

There are lots of plugins for WordPress that are built primarily for adding Facebook, Twitter, Google Plus, LinkedIn, etc. widgets. But, if you want to reduce the number of WordPress add-ons, then you can manually add sharing codes to your articles. It is a simple process. You just have to copy paste some code provided by Facebook/Twitter/Google Plus etc.

Why put into effect your own Social Sharing Button?

Now not all but a maximum of social sharing plugins aren’t optimized in your need and they will load social sharing icons for my part which multiplied unnecessary HTTP requests for your server. In case you are the usage of legit social sharing buttons then it loads JavaScript for each Sharing button which finally impacts your web page load velocity considerably. If your web page speed is high, your website online will rank excessive in Google seek. If your web page speed is high, there are extra probabilities customers will go back in your site extra frequently because it’s easy to enjoy for them

A characteristic for including Facebook, Twitter and Google+ buttons

That is an easy, flexible feature that must work without difficulty with any subject. It’s a first rate, the lightweight solution in case you’re now not inquisitive about the multiplied social media functions many plugins bring with them. To apply this characteristic, you may want to feature this code fragment for your theme’s capabilities.Hypertext Preprocessor file:

function social_media() {

if (is_single()) {
global $post;
echo ‘<div class=”social-post”>
<div class=”counter-twitter”><a data-related=”DIY_WP_Blog” href=”” class=”twitter-share-button” data-text=”‘ . get_the_title($post->ID) . ‘ —” data-url=”‘ . get_permalink($post->ID) . ‘” data-count=”vertical”>Tweet</a></div>’ . “n”;
<div class=”counter-fb-like”>
<div id=”fb-root”></div><fb:like layout=”box_count” href=”<?php the_permalink(); ?>” send=”false” width=”50″ show_faces=”false”></fb:like>
<div class=”counter-google-one”><g:plusone size=”tall” href=”<?php the_permalink(); ?>”></g:plusone></div>
<?php }

function java_to_bottom() {
if (is_single(array())) { // Change the name to match the name(s) of the pages using the form ?>
(function(d, s) {
var js, fjs = d.getElementsByTagName(s)[0], load = function(url, id) {
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.src = url; = id;
fjs.parentNode.insertBefore(js, fjs);
load(‘//’, ‘fbjssdk’);
load(‘’, ‘gplus1js’);
load(‘//’, ‘tweetjs’);
}(document, ‘script’));

<?php } }
add_action(‘wp_footer’, ‘java_to_bottom’);

Use the following code <?php social_media(); ?> shortcode to position them at the location which you want the social media icons to appear.

For Google+, inside the code stated within the first factor, you can see size=”tall.” right here, you could additionally use small, medium and fashionable.

For FB, within the code cited inside the first point, you may see format=”box_count.” right here, you may also use modern and button_count.

For Twitter, in the code cited within the first factor, you may see the records-rely=”vertical.” here, rather than vertical, you could also use horizontal or none.

Now add a bit of style to proceedings with the following CSS code:

social-buttons a {
background: #ccc;
border-radius: 50%;
display: inline-block;
height: 30px;
line-height: 30px;
margin: 2px 4px;
overflow: hidden;
width: 30px;


social-buttons a:hover {
background: #ddd;
text-decoration: none;

social-buttons a:before {
color: #fff;
font-family: FontAwesome;
content: “f099”;
padding: 12px 9px;

.gk-social-buttons .icon-fb:before {
content: “f09a”;

social-buttons .icon-gplus:before {
content: “f0d5”;

social-buttons a:hover:before {
color: #000;

This technique isn’t the exceptional for each person through any manner, however, in case you’re prudent about plugins and need to keep away from them anywhere feasible, realize that obtaining the ones social icons up and going for walks isn’t as hard as it may seem! Recollect to that the flexibility of CSS lets in us to carry out a whole variety of changes to the icons to get a huge range of consequences and coloring, so you can fashion matters until they’re just right for your website. I hope this newsletter has helped get you shifting,


We hope this article about how you can  Add Social Media Sharing Buttons To WordPress Without Plugin will help you. If there are any components of making those icons, you’d like us to comply with-up on within the future simply drop us an Email(contact us) and we will help you further.

Rakesh Chadda
Trickbugs: Tips and Tutorials