How to Add Social Media Buttons in WordPress

How to Add Social Media Buttons in WordPress

When you are using WordPress, then in order to gain traffic for your site, you must have made pages/profiles of your site on different social media websites. You must’ve often shared the posts that you put up on your WordPress to the social media websites YOURSELF. Why not leave this option for your users to do? They can share whatever post they like by just clicking on some simple buttons. These are the same buttons that we found on every other website so that their content spreads like fire with our every share and every like, you can have similar too without any need of a hassling job. In this tutorial, we will show you how to add social media buttons in WordPress.

The first thing you need to know is that you need to download the desired social media buttons first, whatever you want (Facebook, Twitter, Google+) every button is available and is accessible for free and easy download. Also, you can easily get these buttons icons too because these needs to be uploaded in the next step.

Social Buttons

To add the new social media icons, you need to visit the “media’ tab on your dashboard and proceed to “add new” under it. You’ll then have to upload the icons of the social media that you want on your WordPress.

Add Media to WordPress

Once uploaded, you’ll need to visit the library as it is the location from where you can access the uploaded images. In the library you need to copy the URL of the icons of the uploaded images to be used later. Visit “library” under the “media” tab on your dashboard and then click “edit” on the image of any recently uploaded social media button.

Edit Media WordPress

When on the edit screen, just copy the file URL and save it somewhere else, preferably in a text editor because it will be needed later.

URL of the Post

Then all you need to do is copy the following code in your functions.php file of your theme on WordPress. You jupbst have to edit the code at some places where you need to enter the copied file URL.

[php]
// Adds Custom Feed Content for You
function wpr_add_feed_content($content) {

// Content you want to display below each post
if(is_feed()) {

// Getting post title
$permalink_encoded = urlencode(get_permalink());

// Getting post title for the tweet
$post_title = get_the_title();

// Content you want to display below each post
// This is where we will add our icons

$content .= ‘<p>
<a href="http://www.facebook.com/sharer/sharer.php?u=’ . $permalink_encoded . ‘" title="Share on Facebook"><img src="<strong>Facebook icon file url goes here</strong>" title="Share on Facebook" alt="Share on Facebook" width="64px" height="64px" /></a>

<a href="http://www.twitter.com/share?&text=’. $post_title . ‘&amp;url=’ . $permalink_encoded . ‘" title="Share on Twitter"><img src="Twitter<strong> icon file url goes here</strong>" title="Share on Twitter" alt="Share on Twitter" width="64px" height="64px" /></a>
</p>’;
}

return $content;
}

add_filter(‘the_excerpt_rss’, ‘wpr_add_feed_content’);
add_filter(‘the_content’, ‘wpr_add_feed_content’);
[/php]

All you need to do now is just replace the highlighted text with the URLs that you copied earlier and then save it. This code is optimized for only facebook and twitter buttons, however you can add as many buttons as you want by tweaking the code a little bit but following the same pattern as Facebook and Twitter’s script. This will now add the buttons that you have wished for beneath all of your post without any wait.

Editorial Team at WPResearcher is a bunch of WordPress Geeks led by Syed Faizan Ali who loves to provide well researched tutorials on WordPress.

Subscribe to our Mailing List

Follow us via email and get access to all teh latest juicy updates of WordPress news, tips, tutorials and deals.

Add a Comment:

We’re eager to see your comment. However, Please Keep in mind that all comments are moderated manually by our human reviewers according to our comment policy, and all the links are nofollow. Using Keywords in the name field area is forbidden. Let’s enjoy a personal and evocative conversation.

*