Adding Custom Sharing Buttons for Facebook, Twitter and LinkedIn in WordPress

How to Create Social Share Links for Your Website

NOTE: We have created files with the appropriate code for you to include in your WordPress theme. You can download the latest version of this code from our InstaShare Social Sharing GitHub Repository. Installation instructions are included.

You can also download our simple, easy to use InstaShare Social WordPress plugin. It adds Sharing Buttons to the end of content on Posts and Pages, excluding the home page.

In this article, you will learn how to easily create social share links or buttons for Facebook, Twitter and LinkedIn that can be used in your WordPress site. It is important to make it easy for visitors to share your content because that will increase your website’s popularity.

We will also provide you with a list of helpful resources if you wish to develop your own sharing buttons further.

Where should you put social share links?

The most common place to put the social share links is just above and/or below the content of your page or blog post on your WordPress site.

The code we will be generating will go into the themes functions.php file. You will also be adding some styles to your style.css file.

You can edit these files from your Dashboard. First, click on the Appearance menu, and then click on Editor. The resulting screen will show a list of files down the right-hand side with an editor window in the center of the screen.

In the instructions found here, you can link to the social network sharing services using your own image or text.

How to add Facebook share button to WordPress

This button is actually a sharing button.

Go ahead and click on it. It’s ok, nothing is actually shared until you have a chance to review the information.

Clicking on this social share link takes you to a Facebook page in a popup browser window. In this window, you will be presented with the familiar options for sharing a link on your Facebook Profile’s News Feed on Facebook.

Here is the code:

This Facebook link uses two very common WordPress scripts to pass information to Facebook about the URL and Title of the Post you are sharing.

The “anchor” tag wraps around an image I have uploaded to my web site. This can be replaced with text if you wanted. To replace the image with text, the code would look like this:

If you want to use this in a non-WordPress website, simply replace the script calls with actual values like so:

Simple isn’t it?

You need to put this code directly into your post to add Facebook share button to WortdPress. Make sure you are using the WordPress Classic editor and not Gutenburg or another page builder. Also, make sure you are editing your content using the Text tab and not the Visual tab. There are other ways to add this custom code. You could download our Instashare plugin which will add it for you.

Keep in mind, this is just a Facebook sharing button. If you want to add Facebook like buttons to your WordPress site, we will be covering that in a future article.

How to add Twitter Button to my Website

Clicking on this sharing button takes you to your Twitter home page. The box where you type in your tweets will be populated with the information provided in the link. This gives you the option to review the tweet before submitting it.

Examine the code below and notice again the WordPress based scripts. Just like the Facebook button, you can replace the values with static one if you’re not using WordPress.

Here are the code examples for WordPress:

Example for non-WordPress:

We have included values for “text” and “url” in our link. You can also add data for the twitter user making the tweet ( via={user_id} ) and any hashtags you wish to use ( hashtags={hash_tags} ). Just replace the {user_id} and {hash_tags} placeholders with the actual text you wish to use.

This allows WordPress and Twitter to work together so users can easily Tweet about your content.

More information can be found on the Twitter Developers site at http://dev.twitter.com/pages/tweet_button

Adding a LinkedIn Button to Your website

This one was hard to locate. But thanks to some enterprising web developers, I located it on a couple of forums. It seems that LinkedIn has a sharing button generator that forces you to use their button or graphics. This is fine unless you want to use your own icon to match the design of your website.

Clicking on this sharing button takes you to LinkedIn’s sharing window allowing you to review all information before submitting it to your LinkedIn profile.

Here is the share button code we used for LinkedIn on WordPress:

… and here is the code for a non-WordPress website:

That’s all there is to it.

If you are going to use images, it is a good idea to download a set of Social icons for a consistent look on your website.

Resources to Create Your Own Custom Sharing Buttons

One of the biggest challenges in writing this post has been to keep it updated with the most recent sharing links. For us, a very valuable resource has been the Social Share Urls GitHub repository maintained by “bradvin”.

This repository provides a set of social sharing icons. They also keep an updated list of all links for social networks. They have categorized the social network links into convenient groups:

• Multi-Language Social Media
• Non-English Social Media
• Phone/Audio-Based Social Media
• Email-Based Social Media
• Locally/Personally-Run Social Media
• Deprecated Social Media Share Links

Some basic instructions for using the links are also available on the page.

We hope you found this information useful. Please feel free to Share your button settings from your web site in the comments area.

Let us know your comments and ideas for creating share links or sharing buttons on other social networks.

You can stay up to date with our latest posts by subscribing to our monthly Newsletter. Or just let us know if you would like one of our website developers to create a custom solution for you. We promise not to SPAM you.