Adding Custom Sharing Buttons for Facebook, Twitter and LinkedIn in WordPress
In this article you will learn how to easily create customized share buttons or share links for Facebook, Twitter and LinkedIn that can be used in your WordPress blog. It is important to make it easy for visitors to share your content because that will increase your website’s popularity. We have not included Google Plus here because they offer a wonderful tool here to create a Google Plus Button.
Where should you put social sharing buttons or share links?
The most common place to put the sharing buttons, and the code you are about to view, is in the Sidebar of your WordPress blog.
You can edit this file from your Dashboard from the Appearance menu item, and then clicking 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. Select, by clicking the file named “sidebar.php” (in most themes) and it’s contents will be displayed in the editor box. If you need help with an exact location in the sidebar, leave us a comment and we can guide you further.
In the instructions found here, you can link to the sharing services using your own image or text.
Start with a Facebook Share button
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 link takes you to a Facebook page in a new browser window. In this window you will be presented with the familiar options for sharing a link on your wall in Facebook.
Here is the code:
Notice the “href” value?
It uses two very common WordPress scripts to pass information to Facebook about the URL and Title of the Post you are sharing.
The link, of “anchor” tag wraps around an image I have uploaded to my web site. This can be replaced with text is I wanted to so that the code would look like this:
Share this on Facebook
If you want to use this in a non-WordPress website, simply replace the script calls with actual values like so:
Share this on Facebook
Simple isn’t it?
Now let’s try a Share button for Twitter
UPDATE: It seems as though Twitter has recently changed the format of their submit URL. It is actually a bit easier to implement now.
Clicking on this share 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 (Updated 2011 May 23):
Example for non-WordPress (Updated 2011 May 23):
More information can be found on the Twitter Developers site at http://dev.twitter.com/pages/tweet_button
A Share button for LinkedIn
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 share button generator that forces you to use their button or graphics. This is fine unless you want to use your own icon to match your web sites design.
Clicking on this share button takes you to LinkedIn’s sharing window allowing you to review all information before submitting it to your 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.
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 buttons or share links on other social networks.