Widget Wonderland: Adding Social Media Buttons and Widgets to Your Website or Blog
Getting the word out has never been something you can do all by yourself: It takes a village. Even Paul Revere, as he galloped from town to town in 1775, needed to enlist the help of influential networkers in each community to make sure his message got to everyone who needed to hear it.
In the social media age, reaching the widest possible audience involves encouraging your audience to assist you in getting the word out — by making it as easy as possible for them to reshare your content with their own friends and followers.
Case in point: Several weeks ago, when I updated my website to announce a new session of the social media class I teach, one of my friends tweeted a response asking me why there were no built-in sharing buttons on the page for the class.
Figure 1: Adding sharing buttons to your site encourages your website’s visitors to share your content with their own friends and followers.
Hmm. Fair question, I thought. The truth is, I’ve always had a fairly DIY approach to my own social media sharing, because that tends to give me the most control over how I set up my posts. So even though lots of websites and blogs have sharing buttons embedded right on the page these days, I often look right past them. If I want to share a link on Facebook, I usually just copy the URL from my browser’s address bar and paste it into Facebook’s publisher. (Or if I do use a Share button, the one on the Facebook toolbar for Firefox is usually handiest.) If I want to tweet a link, I usually start by shortening the link (I like to use the J.mp version of Bit.ly’s URL shortener) and then paste that into the tweet composer on Twitter.
But it’s important not to be limited by our own biases. Obviously, lots of people do take advantage of the convenience of using those built-in buttons or they wouldn’t be so widespread. And since the goal is to make it as easy as possible for my audience to share my content, I was missing an opportunity to do that by not making those buttons available.
Plus, even for those of us who don’t tend use the embedded sharing buttons, their presence on the page can serve as a subtle visual reminder that the content we’re looking at is ready and willing to be shared.
Of course, sharing buttons are just the beginning of the nifty social media bells and whistles you can decorate your site with. Each of the major social media sites (and plenty of the minor ones, too) offer an array of customizable widgets and plugins you can place on your own site that allow you to do things like display some of your recent postings, encourage people to follow your social media accounts, allow visitors to your site to register or comment using their own social media accounts, and much more.
So in this article, I’ll start by looking at how you can easily add a set of social media sharing buttons to your site or blog, by using a handy all-in-one service. And then we’ll go on a little tour of the various buttons and widgets that are available from the four biggest fish in the social media sea: Facebook, Twitter, Pinterest, and LinkedIn.
One Stop-Shopping for Social Media Buttons
If you’re daunted by the idea that rounding up and adding buttons for a bunch of different social media sites might be a time-consuming project, don’t worry — you don’t have to add them one at a time. There are a number of services that are designed to make it easy for you to add a customizable set of social media sharing buttons to your site, all in one swoop.
In deciding which of these services to use for my own website, I compared several of them, including two of the most popular — AddThis and ShareThis. I found ShareThis to be the clear winner, both in terms of how easy it was to customize the buttons and get the necessary code and instructions, and also how well the buttons worked once I added them to my site.
Here’s how the process of creating buttons with ShareThis works. Start by visiting the ShareThis homepage, and click Get Sharing Tools in the menu bar at the top.
Figure 2: Click Get Sharing Tools in the menu bar at the top of ShareThis’s homepage.
On the next page, you’ll see a list of platforms to choose from. If the buttons are for a freestanding website, you’ll be able to choose a style for your buttons and customize them right on the ShareThis site. (If you choose certain blogging platforms such as WordPress and Blogger, or content management systems like Drupal and Joomla, you’ll be given handy instructions on how to install and customize the ShareThis plugin for your chosen platform.)
Figure 3: Choose whether the buttons you’re creating are for a freestanding website, or for one of several popular blogging or content management platforms.
Let’s move ahead with the options for a website. Clicking the “Step 2. Style” tab takes you to the page where you can choose how you’d like your buttons to appear.
Figure 4: A few of the available styles you can choose for your ShareThis buttons: a vertical bar; a horizontal row of simple buttons; a horizontal row of buttons with counters at the top showing how many times the content has been shared by each method; and a horizontal row with the counters at the right side of each button.
The options include everything from horizontal rows of simple buttons, to bars that can float vertically on the left or right side of the web page, or horizontally along the top or bottom, to the rather amazing “ShareEgg” that slides open to reveal buttons when you move your cursor over it.
Figure 5: The animated ShareEgg. When you move your cursor over it ...
Figure 6: ... The ShareEgg slides open to hatch a row of sharing buttons.
Once you’ve chosen a style, click the “Step 3. Customization” tab, and you’ll arrive at the page where you can choose exactly which social media sites and services you’d like to include in your button set and in what order they appear — as well as options such as how your buttons are positioned and what size they are.
Figure 7: Some of the customization options in Step 3. You can reorder the buttons by dragging them up or down in the list on the left, remove buttons by clicking the x that appears when you mouse over them, and add more buttons from the list on the right by dragging them over.
Once you’re finished customizing, click the green “FINISH: Get the Code” button.
Figure 8: Click the green button when you’re ready to grab your code.
ShareThis will ask you if you’d like to create an account, which will give you access to analytics — data on how many people are using your ShareThis buttons to share your content.
Figure 9: You can choose to create a ShareThis account if you’d like access to analytics data, or skip that by clicking “No thanks, just give me the code!” in the upper-right corner of the window.
Figure 10: The window that delivers your code, along with instructions for where to place it in your HTML file
Here’s another thing I really like about ShareThis. When you click ShareThis’s Twitter button, the tweet it generates contains a URL that’s already shortened to conserve characters, using ShareThis’s own URL shortener (shar.es).
Figure 11: The tweet window that opens when you click ShareThis’s Twitter button contains a pre-shortened link to save space.
By contrast, the Twitter button that AddThis supplies includes the full-length URL in the tweet it creates, eating up precious tweeting space. Sure, you could copy the URL and shorten it yourself using another service, but by the time you do that there’s no longer any real advantage to using the button rather than tweeting the long way.
Getting Buttons, Widgets, and Plugins Direct from the Source
As I mentioned earlier, all of the major social media sites offer an array of customizable buttons, widgets, and plugins that you can add to your own site. For each of the following sites, the process is largely the same as the one we went through above: You can start by browsing the selection of goodies that are available and choosing the button or widget you want. For widgets, you may be presented with a few options to customize how they appear on your site. Once you’ve made your selection and finished tweaking it, you’ll be provided with the necessary code to add to your website.
Facebook’s Social Plugins
Now let’s look at some of the buttons and widgets that the major social media sites offer directly, starting with Facebook.
Facebook calls its various buttons and widgets social plugins, and when you’re ready to install, or at least browse through them, there are two easy ways to get to them.
You can access them through the admin panel for your page by choosing Update Info from the Edit Page menu at the top of the screen, and then clicking the Resources tab in the right-hand column. On the Resources tab, click the “Use social plugins” link under the “Connect with people” heading.
But there’s an even quicker way to get there. Just use this handy URL: http://developers.facebook.com/docs/plugins/.
The selection includes three different buttons: the Like button, the Send button (which allows users to send the content as Facebook messages), and the Follow button (which allows users to follow a particular Facebook user).
Figure 12: Facebook’s Like, Send, and Follow buttons
The Comments plugin allows users to comment on your site’s content using their Facebook accounts. (You might find that having users post under their real names improves the quality of the comments that get posted, since the ability to hide behind anonymity sometimes brings out the worst in Internet commenters.)
Figure 13: Facebook’s Like Box is shown on the right, with some of the options you can customize on the left.
Some of Facebook’s available widgets include:
The Like Box, which displays the most recent postings from your Facebook page and includes a Like button at the top
The Activity Feed, which shows visitors to your site which of their Facebook friends have Liked or commented on your site’s content
The Registration plugin, which allows users to register for your site using their Facebook account
The Facepile plugin, which displays pictures of Facebook users who have Liked your page or registered for your site
Note that the Like Box shown above can only display content and a Like button for an official page on Facebook — the Like Box isn’t available for a personal profile. If you’d like to feature your personal Facebook profile on your website, your best option is to create a profile badge, which you can do via the Facebook Badges page.
Figure 14: A profile badge points people toward your personal profile on Facebook.
Twitter’s Buttons and Widgets
You can access Twitter’s selection of buttons by clicking the Resources link in the bottom panel of Twitter’s left-hand column, and then clicking the Buttons tab on the Resources page. Or go there directly via this link: https://twitter.com/about/resources/buttons.
Figure 15: The four buttons available from Twitter
In addition to the sharing button, there’s a Follow button to encourage people to follow your Twitter account, a Hashtag button that lets you point people toward any particular hashtag you want to promote, and a Mention button that encourages people to address tweets to your account.
You can get to Twitter’s widgets by choosing Settings from the Account menu in the upper-right corner of the Twitter website, and then choosing the Widgets tab from the left-hand column. (And once again, there’s a handy link you can use to go there directly: https://twitter.com/settings/widgets.) On the Widgets tab, click the “Create new” button, which takes you to the rather dashingly named Widgets Configurator.
Figure 16: An example of the User Timeline widget, which shows off a few recent tweets
Twitter offers four types of widgets:
The User Timeline widget, which displays recent tweets from your account, with a Follow button at the top
The Favorites widget, which displays tweets from other users that you’ve favorited recently
The List widget, which allows you to feature one of your Twitter lists (you can choose any list that you’ve created or that you follow, and the widget will display recent tweets by members of the chosen list)
The Search widget, which lets you display recent tweets that include a particular search term, such as a hashtag you’d like to promote
Pinterest’s Buttons and Widgets
You can access Pinterest’s buttons and widgets by choosing “Pin It Button” from the About menu on Pinterest, or via this direct link: http://about.pinterest.com/goodies/
Figure 17: Pinterest’s buttons and widgets
Pinterest’s goodies include two buttons and two widgets:
The Pin It button, which lets users pin images from your site
The Follow button, which lets users follow your Pinterest account
The Profile widget, which displays up to 30 of your recent pins along with a “See on Pinterest” link to your account
The Board widget, which is similar to the Profile widget but lets you put the focus on a particular board from your collection
Figure 18: An example of a Pinterest Board widget
LinkedIn’s Buttons and Widgets
You can get to LinkedIn’s buttons and widgets by clicking the Developers link in LinkedIn’s footer, and then choosing “Plugins” from the Documentation menu at the top of the page. Or to go there directly, bookmark this link: https://developer.linkedin.com/plugins.
Figure 19: LinkedIn’s Share, Follow, and Recommend buttons
In addition to its Share button, LinkedIn’s available buttons include a Recommend button that lets LinkedIn users recommend your business’s products and services, and a Follow Company button that lets users subscribe to updates from your business’s Company Page on LinkedIn.
Figure 20: An example of a LinkedIn Member Profile
Other widgets and plugins that LinkedIn offers include:
The Member Profile, which displays a business card-like summary of your Linkedin profile on your webpage
The Company Profile, which displays a summary of key information about a Company Page on LinkedIn, and includes a Follow button
The Company Insider box, which displays customized information about a company — including who in the user’s network works at the company, as well as recent new hires and job changes
The Jobs You May Be Interested In box, which allows you to display a selection of job listings — you can choose to have the box display either a selection of listings posted by your company, or a selection of jobs on LinkedIn that are personalized for each user
The Sign In with LinkedIn plugin, which allows users to register for your site using their LinkedIn identities
The Apply with LinkedIn plugin, which lets users respond to job listings on your site using their LinkedIn identities
Don’t Let the Bells and Whistles Take Over
Whew! Now that we’ve looked at the options, it’s up to you to decide which ones you’d like to install on your website, and where. The key is to find the right balance between utility and clutter, since overloading your site with too many widgets could wind up distracting visitors from your content. Don’t be afraid to ask for feedback on what’s useful and what isn’t; another great aspect of the social media age is that it’s easy to find out what your audience is thinking.
Dave Awl is the author of Facebook Me! from Peachpit Press. He currently teaches social media marketing classes, in addition to helping organizations large and small successfully develop and maintain their social media presences. For more info, you can visit his website at Awlpoint.com and the official Awlpoint page on Facebook.
Liked This? Read These!
The original inspiration for the Seattle Seahawks logo has been uncovered in a museum in Maine. Read More
Learn how one panel in Illustrator gives you the ability to control everything about the appearance of an object, plus the secrets for applying gradient fills and great-looking strokes to live text. Read More
Apple introduced the Apple Watch and with it, a brand new typeface. Read More
Learn about the amazing effects you can create with the tools in Photoshop's Blur Gallery Read More