Over the years of blogging, I’ve added new plugins to do different things to my site. Whether it be a plugin for keeping track of visits, social media sharing, back-end things, or just to add a cute feature to the sidebar. One of the problems with doing this is you can’t always customize the way things look when they are included in a plugin, or the creator stops updating the plugin and it no longer works properly, or the plugin has conflicts with other plugins you are using, and it causes one or more of the features not to work. Plugins can also add a lot of extra steps for your site to go through to load, which can cause problems for the loading of your site and cause extra wear on the server your site is on.

Tired of updating or adding new plugins on WordPress for social media buttons? Add them right to your theme by adding in some code.

Hard Coding Social Media Buttons to your Theme

For these reasons, I have decided to manually add in several different features of my site.  One of these features are the social media buttons at the bottom of my posts and pages. Yes, I still use a plugin for the ones that show up at the top, but mostly because I’m experimenting with it.

Tired of updating or adding new plugins on WordPress for social media buttons? Add them right to your theme by adding in some code.

In order to add the social media buttons like I have done at the bottom of my posts and pages, you will need to add several different sections of code to your site.  If you do not know what you are doing I would recommend that you ask someone else to do the process for you.

You will need to edit your functions.php file, your style.css file, create a social.php file, and either put a line of code into your Genesis Simple Hooks plugin (if you are using a Genesis theme) or include a line of code just after the opening <body> tag.

I’m going write this how to in the best order I think the steps should be done.  Please keep in mind that you will need to have a Genesis theme for your WordPress site for this coding to work, otherwise, you may need to do some altering to the code.

Step 1

The first step is going to be to edit your functions.php file.  You will want to include the below code at the end of your file and save it.

/** Add Social Sharing Links on Single Posts **/
add_action('genesis_after_entry', 'include_social', 9);
function include_social() {
if ( is_single() )
require(CHILD_DIR.'/social.php');
}

You do not need to make any changes to this code.  This is the only part of the code that is specific to using a Genesis theme.

Step 2

For the next step you will need to create your social.php file and upload it into your themes directory (i.e., wp-content/themes/mytheme/).  You can start with a basic social.php file with the following code in it.

<div class="social-button-container">
<!-- Facebook -->
<div class="social-fb"></div>
<!-- Twitter -->
<div class="social-twitter"></div>
<!-- Google Plus -->
<div class="social-gplus"></div>
<!-- LinkedIN -->
<div class="social-linkedin"></div>
</div>

This will give you an idea of where you will need to put the coding from each social media site.

Step 3

This step is only important if you want to use the Facebook social media Like and Share button. If you do not include them at the bottom of your post, then you can skip down to step 4.

You will need to go to the Facebook Developers area, and in the Social Plugins area, you can choose either the Like Button or Share Button.  You need to get a specific piece of code to put into your theme settings in the <body> section. Personally, I just pasted the code in the Genesis Simple Hooks section genesis_before Hook.

To get the code you need, you can technically leave the settings the way they are on the page when you arrive and click the Get Code button.  You will see the following screen pop-up.

Tired of updating or adding new plugins on WordPress for social media buttons? Add them right to your theme by adding in some code.

Step 4

Now it is time to fill in the blanks from step 2.  We’ll be placing some code in between the divs.

Here are the basics for getting the codes for Facebook (Like and Share buttons), Twitter, Google+, StumbleUpon, and Pinterest.

Facebook

Remember that bottom set of coding from step 3 that I said we would get to later?  This is where it comes into play.  You will, however, need to make a little bit of a change to the code to make it work for every page instead of just one specific page.

Tired of updating or adding new plugins on WordPress for social media buttons? Add them right to your theme by adding in some code.

<div class="fb-like" data-href="<?php the_permalink(); ?>" data-layout="button_count" data-action="like" data-show-faces="true" data-share="true"></div>

Twitter

You will need to go to the Twitter Button Resources page to get this code.  Just select which button you want to use (share a link is the one used for the code below) and fill in a few bits of information that tells it what to include when the Twitter button is clicked.  You can just copy and paste the code below for your convenience.

<a href="https://twitter.com/share" class="twitter-share-button"  data-url="<?php the_permalink(); ?>" data-text="<?php the_title(); ?>"  data-via="ShawnAnn" data-count="horizontal">Tweet</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>

You will just need to change the ShawnAnn to your own twitter handle and you are good to go!  The reason you want to change that is because this code will include via @ShawnAnn to the tweet.

Pinterest

For the Pinterest button you need to go to the Pinterest Widget Builder page and select the size, appearance, and a couple additional features.  Most important you want to select Any Image for the Button Type, this will bring up a new page when the Pinterest button is clicked showing all the images you can pin from that page.  This will allow the reader to select the image they want to pin from your post that they like the most.

<a href="//www.pinterest.com/pin/create/button/" data-pin-do="buttonBookmark"  data-pin-config="beside"><img src="//assets.pinterest.com/images/pidgets/pinit_fg_en_rect_gray_20.png" /></a>
<!-- Please call pinit.js only once per page -->
<script type="text/javascript" async src="//assets.pinterest.com/js/pinit.js"></script>

If you want to include any other social media icons to your posts than you will have to use Google to find where to get the code.  However, you’ll basically be doing the same thing as you’ve done thus far.

Here is my social.php file, remember you would need to make a few changes to the codes, but nothing major.

<div class="social-button-container">
<p>
Did you enjoyed this post? Please consider leaving <a href="#comments">a comment</a>, posting it to your favorite social media, or <a href="http://feeds.feedburner.com/shawnann" title="Shawn Ann" target="_blank">subscribing</a>!
</p>
<h3>Share This Post!
<!-- Facebook -->
<div class="social-fb">
<div class="fb-like" data-href="<?php the_permalink(); ?>" data-layout="button_count" data-action="like" data-show-faces="true" data-share="true"></div>
</div>
<!-- Twitter -->
<div class="social-twitter">
<a href="https://twitter.com/share" class="twitter-share-button"  data-url="<?php the_permalink(); ?>" data-text="<?php the_title(); ?>"  data-via="ShawnAnn" data-count="horizontal">Tweet</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>
</div>
<!-- Pinterest -->
<div class="social-pinterest">
<a href="//www.pinterest.com/pin/create/button/" data-pin-do="buttonBookmark"  data-pin-config="beside"><img src="//assets.pinterest.com/images/pidgets/pinit_fg_en_rect_gray_20.png" /></a>
<!-- Please call pinit.js only once per page -->
<script type="text/javascript" async src="//assets.pinterest.com/js/pinit.js"></script>
</div>
</h3>
</div>

Step 5

Now you will need to style the way the buttons will show up in your posts.  This is the basic code for styling, there is no special look to this. For this step you will need to copy and paste the following code into your style.css file.

.social-button-container {
clear: both;
overflow: hidden;
margin: 0 auto;
width: 50%
}
.social-fb, .social-twitter, .social-gplus, .social-linkedin {margin: 7px 0;text-align:left;}

Simple code, but you may have to do some editing.  Below is the exact coding I have in my style.css file

.social-button-container {
overflow: visible;
margin: 0 auto;
padding: 10px 0 10px 0;
width: 100%
}
.social-button-container p {
font-family: Raleway;
font-size: 16px;
margin: 0 0 0 0;
text-align: left;
}
.social-button-container h3 {
font-family: Boogaloo;
font-size: 18px;
margin: 0 0 0 0;
text-align: left;
}
.social-fb {
margin: -21px 0 0 125px;
text-align:left;
}
.social-twitter {
margin: -21px 0 0 275px;
text-align:left;
}
.social-pinterest {
margin: -21px 0 0 575px;
text-align:left;
}

Using this code will make your buttons show up just like my example above, especially if you copy the code from my social.php file.