Add Social Media Buttons to Blog Post Signature: Tuesday Tutorials

Tonya from Sprinkle on Glitter asked if I could do a tutorial on how to add social media buttons to blog post signature.  No prob… here’s how…

Step 1 – Create your signature image you want & your social media buttons (If you need help creating your social media buttons see this tutorial)

Step 2-  Paste the following code into your functions.php file

// Add Signature Image after single post
add_filter('the_content','add_signature', 1);
function add_signature($text) {
 global $post;
 if(($post->post_type == 'post') || ($post->post_type == 'page'))
    $text .= '<div class="signature"><img src="Your URL"></div>'; 
    return $text; 
<a title="Follow Me On Bloglovin" href="https://www.bloglovin.com/people/nickilewis65-3684003"><img alt="Follow Me On Bloglovin" src="http://www.lewislanedesigns.com/images/social_media_buttons/bloglovin_button.png" height="36" border="0" width="36"></a><a title="Follow Me On Facebook" href="http://facebook.com/lewislanedesigns"><img alt="Follow Me On Facebook" src="http://www.lewislanedesigns.com/images/social_media_buttons/facebook_button.png" height="36" border="0" width="36"></a><a title="Follow Me On Twitter" href="http://twitter.com/LewisLaneDesign"><img alt="Follow Me On Twitter" src="http://www.lewislanedesigns.com/images/social_media_buttons/twitter_button.png" height="36" border="0" width="36" ></a><a title="Follow Me On Pinterest" href="http://www.pinterest.com/LewisLn/"><img alt="Follow Me On Pinterest" src="http://www.lewislanedesigns.com/images/social_media_buttons/pinterest_button.png" height="36" border="0" width="36"></a><a title="Follow Me On Instagram" href="http://instagram.com/Lewis_Lane"><img alt="Follow Me On Instagram" src="http://www.lewislanedesigns.com/images/social_media_buttons/instagram_button.png" height="36" border="0" width="36" ></a><a title="Follow Me On Google+" href="https://plus.google.com/115702573885155648416/posts"><img alt="Follow Me On Google+" src="http://www.lewislanedesigns.com/images/social_media_buttons/google+_button.png" height="36" border="0" width="36"></a><a href="mailto:nicki@lewislanedesigns.com"><img src="http://www.lewislanedesigns.com/images/social_media_buttons/email_button.png" alt="Email Me" height="36" width="36"></a>
}

This is the same code that was used in How to Add a Signature to Your Blog Post with just the minor tweaks highlighted in yellow.

Step 3 –  Just replace the URLs you see with the URLs for your social media accounts, and the URLs for your social media buttons

Viola this is how it turns out!

 

 

 

 

This will put the signature & buttons on all pages. If you do not want to see the signature on certain pages you can use CSS to remove your signature from those pages.

Have a tutorial you would like to see on a future Tuesday Tutorial? Click here to send a request.  If I don’t know the answer, I’ll find out then share with you guys!