Social media links can help a site gain a following. They can allow people to share pages and follow your social media pages. There are several plugins that can add links for you and they can work quite well. The problem is that these plugins hook your page into a third party application. I wouldn’t have too much trouble with this on its own. These applications seemed quite well put together. Then I found that my page load speed was increasing by an average of 3-4 seconds!
Thus I began a quest to figure out how to add social media links without plugins. I decided to have two places for social media links. The first at the end of each post, allowing users to share pages. The second would be links to follow my Twitter, Facebook and Google+ pages. These would appear in the sidebar.
The simplest way to add twitter buttons can be found on their website. It’s as simple as selecting the type of button you want and copy/pasting the code.
I wanted to have a vertical follow button like I was using for the others. There was no option for styling the button on the page. After a brief search I found this page. Here it lists a bunch of options for changing the style of the button.
Twitter code requires a URL. Each page and post in your website has a different URL so it’s not ideal to add one for each by hand. Fortunately you can replace the link with a WordPress function. If you look at the code provided you find it has something like data-url="http://www.your-link-here.com/subpage". We can add a call to get_permalink which provides the link to the current page.
The other thing you need to do is make sure that data-via references your screen name. The final code for my share button looks like this:
<a href="https://twitter.com/share" class="twitter-share-button"
data-url="" data-via="" data-lang="en" data-related="anywhereTheJavascriptAPI" data-count="vertical">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
I modified single.php to include a share button after the article. If you don’t know how to do this look under Appearance->Editor. Be careful when editing these files as you can break your site when you do this. Always make a backup of your site at regular intervals. That way if you screw up, and you will, you can always go back to your backup.
To add the follow link on the sidebar I added a Text Widget to my sidebar. Look under Appearance->Widgets if you don’t know where this is. Using this I can add any arbitrary text or HTML. It was as simple as pasting the link to follow my twitter account in the text box.
<a href="https://twitter.com/BokMcDok" class="twitter-follow-button" data-show-count="false">Follow @BokMcDok</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
Facebook like, share and follow buttons can be found on their developer website. There are a couple of extra little steps you need before this will work.
First, Facebook requires a script include just below the opening <body> tag. You can find this in your theme’s header.php. If you paste the code into this file then it will be included in all your website’s pages.
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_GB/sdk.js#xfbml=1&appId=1379538969011712&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
Similar to Twitter, Facebook code requires a URL. We just need to do the same as what we did with Twitter, only the attribute we need to change is data-href:
<div class="fb-like" data-layout="box_count" data-action="like" data-show-faces="true" data-share="false"></div>
<div class="fb-follow" data-href="https://www.facebook.com/BokMcDok" data-colorscheme="light" data-layout="button_count" data-show-faces="false"></div>
Google+
Google+ also provides a similar thing to Facebook. Like Facebook, Google+ requires a script in the header section of your website. You can add this in header.php. Make sure you include it within the <head> tags on the page.
<!-- Place this tag in your head or just before your close body tag. -->
<script src="https://apis.google.com/js/platform.js" async defer>
{lang: 'en-GB'}
</script>
Unlike Facebook, Google+ doesn’t need you to have a link in its code. So you can just copy and paste the code needed to your site.
<div class="g-follow" data-annotation="bubble" data-height="20" data-href="//plus.google.com/u/0/111067423292508560131" data-rel="publisher"></div>
<div class="g-plus" data-action="share" data-annotation="vertical-bubble" data-height="60"></div>
In my opinion, reddit is the least painful of all the social media plugins I’ve added. You can select the kind of button you want and copy and paste the code direct to where it’s needed. It also has a whole bunch of options so you can customise it as much as you like. Just scroll down the page and you can see what’s possible.
<script type="text/javascript" src="//www.redditstatic.com/button/button2.js"></script>
Other Social Media
After adding a few it becomes easier to add more. The basics are:
1. Do a Google search. Most social media networks will provide the code you need.
2. Copy and paste code that needs to go at the top to header.php.
3. Replace links to content with <?php get_permalink(); ?>
4. Just copy and paste the link code to where you want it to appear on your page.
Once you get the hang of it, it’s easy to socialise.
