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:
1 2 3 | <a href="https://www.facebook.com/sharer?u=<?php the_permalink();?>&t=<?php the_title(); ?>" target="_blank" rel="noopener noreferrer"> <img src="https://www.siamcomm.com/wp-content/uploads/2011/05/facebook.png" /> </a> |
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:
1 | <a href="https://www.facebook.com/sharer?u=<?php the_permalink();?>&t=<?php the_title(); ?>" target="_blank" rel="noopener noreferrer">Share this on Facebook</a> |
If you want to use this in a non-WordPress website, simply replace the script calls with actual values like so:
1 | <a href="https://www.facebook.com/sharer?u=https://www.siamcomm.com&t=Siam-Communications" target="_blank" rel="noopener noreferrer">Share this on Facebook</a> |
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:
1 2 3 | <a title="Click to share this post on Twitter" href="http://twitter.com/intent/tweet?text=Currently reading <?php the_title(); ?>&url=<?php the_permalink(); ?>" target="_blank" rel="noopener noreferrer"> <img title="twitter sharing button" src="<?php bloginfo('template_url'); ?>/images/twitter.png" alt="twitter sharing button" /> </a> |
Example for non-WordPress:
1 2 3 | <a title="Click to share this post on Twitter" href="http://twitter.com/intent/tweet?text=Currently reading http%3A%2F%2Fwww.siamcomm.com%2Fhow-tos%2Fadding-custom-sharing-buttons-for-facebook-twitter-and-linkedin-in-wordpress" target="_blank" rel="noopener noreferrer"> <img title="twitter sharing button" src="twitter.png" alt="twitter sharing button" /> </a> |
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:
1 2 3 | <a href="http://www.linkedin.com/shareArticle?mini=true&url=<?php the_permalink() ?>&title=<?php the_title(); ?>&summary=&source=<?php bloginfo('name'); ?>" target="_new" rel="noopener noreferrer"> <img title="linkedin sharing button" src="https://www.siamcomm.com/wp-content/uploads/2011/05/linkedin.png" alt="linkedin sharing button" /> </a> |
… and here is the code for a non-WordPress website:
1 2 3 | <a href="http://www.linkedin.com/shareArticle?mini=true&url=https://www.siamcomm.com&title=The title of the page or post&summary=&source=Siam-Communications" target="_new" rel="noopener noreferrer"> <img title="linkedin sharing button" src="https://www.siamcomm.com/wp-content/uploads/2011/05/linkedin.png" alt="linkedin sharing button" /> </a> |
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.
Vilma
8 August 2013 at 08:50Tienes seguro el mejor sitio web sobre el tema.
Gracias !
mobile application development
5 August 2013 at 12:53Hello this is kind of of off topic but I was wondering if blogs use WYSIWYG editors or if you have
to manually code with HTML. I’m starting a blog soon but have no coding experience so I wanted to get guidance from someone with experience. Any help would be greatly appreciated!
ramesh
23 July 2013 at 05:55I like what you guys are up too. Such clever work and reporting!
Keep up the terrific works guys I’ve included you guys to our blogroll.
Sunil
22 March 2013 at 16:48Thanks A lot
Carlos Aguilar
5 January 2013 at 02:45The build in sharing buttons from the WordPress Jetpack Plugin are pretty sweet, I’ve been looking for some that I can personalize even further, nice list
Nitin
10 October 2012 at 14:54I there any way for google plus
ErBuc
12 October 2012 at 17:45The best way to get a Google+ button is to use the online tool from Google and follow the instructions to insert it into your website.
You can find the details here: https://developers.google.com/+/plugins/+1button/
Derick
30 August 2012 at 10:22Hi, May I know how to add the meta tag to the website. When I share it on Facebook, it can see the image and the description instead of just an URL.
Thank you very much
ErBuc
31 August 2012 at 09:31Hi Derick,
This is probably best done using a plugin. As you probably already know, these Facebook meta tags allow for the image and description to be shared automatically as well. A quick search gave me this link “http://wordpress.org/extend/plugins/facebook-meta-tags/”. It seems to do just that … adds Facebook meta tags to your posts.
I hope this helps.
E.
Sully
13 June 2012 at 02:49Thanks! I tweaked the code a bit and was finally able to get some cool looking share buttons up on my website (www.sullivansweet.com).
ErBuc
13 June 2012 at 10:14Your share buttons look very nice. Well done.
Sully
19 June 2012 at 04:33:) Thanks, I recently changed the theme of my blog, so they’re different now so that they don’t look out of place.
Hettie Hanlin
31 May 2012 at 13:49Very good site thank you so much for your time in writing the posts for all of us to learn about.
eric
18 April 2012 at 03:41Hello
can you share these amazing tips on how to add a google plus button in the same simple code?
this was exactly what i was looking for.
a simple solution.
thanks
外遇
27 May 2011 at 01:38This is my first time i visit here. I found so many useful stuff in your website especially its discussion; From the a lot of comments on your articles; I guess Im not the only one receiving the many satisfaction right here! keep up a good job.
Video watch
27 May 2011 at 00:1270. I like what you guys are up also. Such clever work and reporting! Keep up the superb works guys I¡¦ve incorporated you guys to my blogroll. I think it will improve the value of my website
Mentions