Adding Social Buttons to WordPress Without a Plugin

8

Social Media has become a inseparable component of every website. If you haven’t equipped your website with the right kind of social media icons, you’re probably missing out on gathering the attention of targeted customers. WordPress is the website development platform that has made it feasible for individuals to own a flawlessly functional and visually appealing web portal.

Although WordPress has a variety of plugins to take care of social media integration for your website, there’s one major downside of using these plugins – a visible decrease in the website’s loading speed. Who doesn’t want their website to load faster? Everybody does, right? The addition of several plugins serves as a major reason behind the slow speed of a website. Backed with extra stylesheets, every single plugin is responsible for the bad performance of a website. Hence, it is recommended to opt for manual addition of social media icons into a WordPress website. In this tutorial, you’ll learn about all the steps that are involved with manual social media integration for a WordPress website.

1. Add the Following Code to Your Theme’s functions.php File

As an approach to adding popular social media icons, such as a Facebook Like button, Facebook Share button, Twitter Follow button, Google+ button etc., you can simply add the below code to the bottom of your theme’s functions.php file. Adding this code will give you greater control over the locations where these social media icons will load on the web pages.

function social_media() {

if (is_single()) {
    global $post;
        echo '<div class="social-post">
        <div class="counter-twitter"><a data-related="DIY_WP_Blog" href="http://twitter.com/share" 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>
        <div class="counter-google-one"><g:plusone size="tall" href="<?php the_permalink(); ?>"></g:plusone></div>
</div>
        <?php }
}

function java_to_bottom() {
    if (is_single(array())) { // Change the name to match the name(s) of the pages using the form ?>
<script>(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; js.id = id;
    fjs.parentNode.insertBefore(js, fjs);
  };
  load('//connect.facebook.net/en_US/all.js#xfbml=1', 'fbjssdk');
  load('https://apis.google.com/js/plusone.js', 'gplus1js');
  load('//platform.twitter.com/widgets.js', 'tweetjs');
}(document, 'script'));</script>

        <?php } }
add_action('wp_footer', 'java_to_bottom');

It is recommended to add the above code via FTP, so that you can correct any mistakes made during the process quickly and efficiently.

2. Using the Below Shortcode

You should now use the following PHP shortcode to position them at the location which you want the social media icons to appear.

<?php social_media(); ?>

3. Moderating the Size of Each Social Media Button

In order to change the size of specific social buttons, you can simply choose to make the following alterations to the respective social media function.

For Google+, in the code mentioned in the first point, you can see size="tall". Here, you can also use small, medium and standard.

For Facebook, in the code mentioned in the first point, you can see layout="box_count". Here, you can also use standard and button_count.

For Twitter, in the code mentioned in the first point, you can see the data-count="vertical". Here, instead of vertical, you can also use horizontal or none.

4. Tweaking the Site’s CSS

As the last step, you need to make a few changes to your site’s CSS in order to position the social media buttons. For this, all you need to do is simply add the below lines of code to your theme’s style.css file:

.social-post { top:3.0em; padding-left:120px; }
.counter-twitter { float:left; margin-left:0em; }
.counter-fb-like { float:left; margin-left:0.5em; }
.counter-google-one { float:left; margin-left:0.2em; padding-right:10px; }

In this snippet, the very first line of code will move your social media buttons left and right, depending on whether you’re inclined on making it a larger or smaller number.

In Summary

Adding social media widgets to your WordPress website is definitely something you can’t afford to miss. Unlike the trend of using plugins for this purpose, opting for a manual social media integration approach definitely has benefits which outweigh the efforts. Please feel free to share your views and opinions on this post in the comments below!

Update: Thanks to Webucator for producing the video tutorial for us. You can learn more about their WordPress training classes on their website.


This post was written by Maria Mincey. We are very grateful that Maria has written this post for us, however, the views expressed here belong to the author, and do not necessarily reflect the views and opinions of wpContent.

Share.

About Author

Maria is a blogger who loves to share everything about web development and new web design technologies initiatives. She currently works as a chief writer for WordPrax Ltd. a WordPress Conversion Service company and has a quantum experience to share.

Leave A Reply

  • http://hoempler.com Carlos Hoempler

    Hi, Maria. Want to do this, but with follow buttons. How do I chage the htlm code? Thanks for your answer =)

  • siva

    very nice this program how do i change plugin please reply me…

    • http://www.samberson.com Sam Berson

      What changes are you wanting to make?

  • http://www.reegan.in/ Reeganindia

    Thanks for sharing with us

  • saurabh singh

    hi maria how r u, very nice this program

  • http://www.clarkedesign.co.uk/ Clarke Design

    Lovey and simple to follow and implement.
    Have you considered updating this to add in LinkedIn, Pinterest and Tumblr?

  • http://www.needrombd.com/ Needrombd.com

    thnaks

  • https://medium.com/@yarddiant/wordpress-advantages-and-key-features-f72375bc0a96 shimna

    Excellent post. Very useful for beginners.