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.
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.
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.
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.
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.
<div class="fb-like" data-href="<?php the_permalink(); ?>" data-layout="button_count" data-action="like" data-show-faces="true" data-share="true"></div>
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.
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.
Awesome post and information, thanks so much for sharing!
Reading all that makes me happy I stuck with blogger! I have even had to ask (beg, cry) for help with that on occasion. This looks awful complicated to me and I could see me begging for help if I ever switched to wordpress–
It’s much easier to do with a plugin, however, I hate using a lot of plugins because they run your site down and make things load slower. I prefer to hard code the stuff right into my themes so that I can make them look how I want them to look. It is actually really easy to do, especially since you can technically just copy and paste my code and maybe change a couple little things.
Terrific tutorial! I’ve had to cut down on the amount of plugins and been told not to add any more. This is something I was contemplating. If I were using Genesis I’d be following your tutorial now!
I’ve never been big on using a lot of plugins, which is why I started doing these little tutorials because some of the coding is really simple and makes me wonder why they even made plugins for some things. Obviously, something like this is a little more complicated but at the same time I tried to lay out all the details as simple as I could to make it easy for everyone.
You can use pretty much all of the above coding for any WordPress theme, you just need to change I think one line of code and it is probably something easy to change. But since I use Genesis I laid it out for that type of theme.
Great tips for bloggers. I know nothing about it but have been learning. Thanks for sharing.
Thanks for the great how-to! I often get baffled on the techy backside of my blog. lol