7 Easy Steps to Add Social Sharing Buttons Without Using a Plugin

As we all know social media is one of the most effective marketing tools nowadays. Videos of a hero cat or Beyoncé’s new music video spreads through the internet like wildfire.

Ignoring the power of social media marketing is a huge mistake. The best way to make your site or blog social media friendly is to place share buttons below every post. You can do it by installing a plugin or without using one.
Although plugins can be incredibly fast and easy to use, they limit the level of your control on allocation and style of share buttons. If you want them to have special style and specific layout within the page, follow these easy steps to add social sharing buttons without a plugin.
This tutorial includes instructions for Facebook, LinkedIn, Twitter and Google+… and yes, there are people who use Google+ !

image1

google.com

Step 1. Generate code for Facebook

Go to the Facebook developers area. Scroll down and fill in the “Like Button Configurator” form. When you’re done click on the Get Code button.

You’ll see a pop-up like this:

 

image2

 

Copy the code in the first box and paste it right after the opening <body> tag on your page. Don’t do anything with the code in the second box yet, we’ll get to that in a minute.

 

Step 2. Create a .php file

Create a single .php file to house all four social media buttons. In this example we’ll name it social.php. The file will include some <div> tags to control styling the buttons.
Here’s an outline of the structure of social.php. Paste it into the file and in the following steps we’ll fill in the <div> tags.

 <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>

Step 3. Add the Facebook code

Go back to the code we’ve generated from Facebook in step 1. Copy the text from the second box and paste it between the Facebook <div> tags in social.php.
image3

Step 4. Add code for Twitter

Go to the button resource page for Twitter. Choose a button and fill in the form for the button options. Once you’re done, Twitter will automatically generate a code on the right side of the page. Copy that and paste it between the Twitter <div> tags in social.php.

 

image4

 

Step 5. Add code for LinkedIn

Go to LinkedIn’s Share Plugin Generator Tool. Choose your options and then click the Get Code button. Copy the generated code and paste it between the LinkedIn <div> tags in social.php.

 

image5

 

Step 6. Add code for Google +

Go to Google’s developer tools for the +1 button. Choose your options and the code will appear on the right side of the page. There will be four lines of text.
Copy the second line and paste it in your head or just before your close body tag. Copy the last line of code between the <div> tags for LinkedIn in social.php.

 

image6

 

Step 7. FTP social.php

Once you’ve done all the previous steps, the final social.php file should look similar to this:
<div class=”social-button-container”>

<!– Facebook –>
<div class=”social-fb”>
<div class=”fb-like” data-href=”<?php the_permalink(); ?>” data-send=”false” data-width=”150″ layout=”button_count” data-show-faces=”false”></div>
</div>

<!-- Twitter --> <div class="social-twitter"> <a href="https://twitter.com/share" class="twitter-share-button" data-via="cdils">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> </div>

<!– Google Plus –>
<div class=”social-gplus”>
<div class=”g-plusone” data-size=”tall”>
</div>

<!– LinkedIN –>
<div class=”social-linkedin”>
<script src=”//platform.linkedin.com/in.js” type=”text/javascript”> lang: en_US</script>
<script type=”IN/Share” data-url=”example.com” data-counter=”right”></script>
</div>

If it looks good, FTP social.php to the root directory of your theme. It will be under the wp-content/themes/mytheme/ folder.

 

Step 8. Code the placement of the buttons

The final step is making sure that buttons appear where you want them to. You can do this by adding the code to the functions.php file.
If you’re using the Genesis Framework you can copy and paste the following code (this places the buttons right under the post):

/** 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’);
}

The same logic applies to other WordPress themes and frameworks. You’ll only need to change the first line to get the right action hook.
We hope this tutorial helps you and boosts your site’s social media presence.
And of course feel free to share.

1 Star2 Stars3 Stars4 Stars5 Stars (3 votes, average: 5.00 out of 5)
Loading...

Related posts: