How to Add Social Media to WordPress without Plugin

Facebook twitter google plus one social media is an important part of any website today and let’s face
it we all want it. WordPress offers lots of plugins to take care of this function for you, but it comes at a
price. Speed!

We all want our sites to load fast but adding plugins for everything causes our sites to slow down,
each plugin comes jam-packed with extra stylesheets and java for you to roll around in, but too many
stylesheets and java scripts equal bad performance and you're left with a site that loads as fast as it
takes me to the moonwalk to the local shop which is about 200 meters away.

The average social media plugin adds 1 javascript per social icon, how many types of social media are
there?

Facebook is the best one, option for Facebook likes and Facebook share, 2 scripts, why? It's the same
thing.

So this code that I have tested will remove all that and give you greater control over where these icons
load.

Simply add this to your themes functions.php, not any other, just the themes. (Hover over and select
the view source icon that appears to see the code as intended. The code contains two java scripts and
styling is included in the function so no extra style sheets to call.

Paste it in at the bottom of the file, but not after the closing ?> <—– Important part or you will break
your theme.

Note that you should do this via FTP so if you do something wrong then you can correct it straight away.
I would save a copy of your functions.php to your computer just in case too.

#Bottom of your functions.php file#

#Some random code that was already there#

function social_media() {

if (is_single()) {

    global $post;

    echo '<div><div style="float:left;"><a href="https://twitter.com/share" data-url="' . get_permalink($post->ID) . '" data-via="#" data-lang="en" data-related="#" data-count="vertical">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script></div>' . "\n";

?>

    <div style="float:left; padding-left: 15px;">

    <div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=144342085643119&amp;xfbml=1"></script><fb:like layout="box_count" href="<?php the_permalink(); ?>" send="false" width="50" show_faces="false"></fb:like>

    </div>

    <script type="text/javascript">

        (function() {

        var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;

        po.src = 'https://apis.google.com/js/plusone.js';

        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);

          })();

    </script>

    <div style="float:left; padding-left: 15px;"><g:plusone size="tall" href="<?php the_permalink(); ?>">
</g:plusone></div></div>

    <?php }

}

?>

Then use this shortcode to paste it where you want the icons to appear.

<?php social_media(); ?>

If you have ever seen your header.php or footer.php you will be familiar with these shortcodes.

If you want to add is to posts, look for single.php and through trial and error find the right location for your
site. Each theme is slightly different so you need to test different places. Usually, placing it above <?Php
get_content(); ?> would place it above, well, your content.

Any troubles send me a message and ill help you out, Good luck with your DIY.

Thesis users do not need to use this function as there is a hook that does the same thing found on the
Thesis blog.

Note – updating your theme will remove the function, simply add it back to continue using, trust me the
benefits outweigh the cost.

Was this helpful? Why not sign up to receive the latest optimization tips.

- Wordpress Customization in Bangladesh