Implementing Social Icons
Visit nearly any website these days and there will be one or more groups of social icons inviting visitors to share the site or page with a social network or to follow the site’s related page or feed on a social network. For some developers, adding these icons to a site can yield much frustration as the documentation is scarce or scattered, and sometimes conflicting. Herein is a discussion on implementing the two more common uses of social media: sharing and following. Additional aspects, such as that of providing the social network, is a much more vast discussion, and while there are some tools to help facilitate that, it is a topic left for another day. Similarly, utilizing other services offered by social network sites, such as integrating comments or authentication, is a topic for another day.
There’s a subtle difference between sharing and following, at least where implementing them on a website is concerned, but there are important differences between them and their interactions with the visitor. Which method to use depends on the goal and the effort necessary to maintain the information relationship. While very often both are implemented, it may be the case that only one use is necessary.
It is generally easier to implement “follow” icons. They are usually icons indicating the social network, often with simple links to the site’s page or profile on that service.
In social networking terms, “following” is when one user establishes the right kind of relationship to another, and generally accepts content from the “followed party” into their stream. This does add to required effort as that profile or page needs to be maintained continue to have content added in order to appear in the content feeds. Thereafter, when the follower visits the social networking site, they’ll see the updates without having to return to your website. If content isn’t added, users may have to directly visit the page in order to see the content delivered previously, which arguably defeats the purpose of “following.” There may be ways to help feed content from a site into those services, but generally they each require a direct injection of information, either by visiting the social networking site, using the site’s application, or finding a third-party application capable of adding posts.
Because of this expectation of ongoing content generation, having followers provides continuous marketing opportunities. While users can “un-follow,” it will generally be the case that they will continue to follow as long as they continue to find the posts useful or interesting. Periodic updates means periodic appearances on the followers’ feeds. This can mean periodic return visits to the original site, if the content is intriguing enough.
Additionally, for most services there’s a way for those followers to share posts, both implicitly or explicitly. Users on Twitter, for example, have an ability to re-tweet; users on Facebook can “like,” comment on, and even share posts. All of these examples, and the similar actions on other services, make your post visible to your follower’s followers.
A downside to all of this “follow me” interaction is that except for the “follow me” icon, the interaction with the original website needs to be made in the content on the social network. That is, to get users back to the site, posts need to provide a link away from the social network. Of course, this is only important if the goal of the “follow me” relationship is to have the users continue to return to the original website.
That’s not entirely true for all social networking sites, as Facebook, for one, allows creating applications on their service, so you can provide a rich experience once they reach your pages on that service. Again, this adds to the effort necessary to provide a rich experience.
Implementing “follow” links can be fairly passive. Usually this is done by directing the user to the page and allowed to follow that page or user directly on that site. For example, Object Partners has a page on Facebook (http://www.facebook.com/objectpartners) and a feed on Twitter (http://twitter.com/objectpartners). Clicking on any kind of link to those pages, with or without icons, gives the user an opportunity to choose some form of “like” or “follow” or “subscribe” button. Most often those links are shown with icons representing the service, as the example image shows.
In the example above, we see icons that would lead to Facebook, Twitter, LinkedIn, Google+, and even an RSS feed. The combination is totally dependent on the participation in social networking sites; it doesn’t make sense, for example, to provide a link to follow a site on a service where that site has no participating page.
All that is required is knowledge of the URL to the page on the social networking site, and an image. Usually the site has preferred or example icons to use available for download or linking somewhere on their site. Usually the image would be copied and used from the hosting site and not directly from the service, but some like the analytic information and offer to provide the image for you. For example, making a “follow” link to the Object Partners’ Twitter page is as easy as adding this simple HTML to a page.
<a href=“http://twitter.com/objectpartners”><img src=“/path/to/twitter.img”></a>
As with any link, choosing how to represent it is up to the site on which it is displayed. Some sites choose simple text links, although most use the familiar icons. Here, for example, are the icons presented by the openSUSE news site (http://news.opensuse.org); notice the addition of the SUSE lizard to most of the icons (I’m sure they’ll add the lizard to the Google+ icon soon).
For the most part, there aren’t any restrictions or mandates on what the link must say or look like, so adding an icon matching the theme of the site hosting the link, and not necessarily the service, is common. There are many stylized icon libraries out there, such as those offered at http://www.iconarchive.com/category/social-network-icons.html or http://vandelaydesign.com/blog/social-media/icons/ and from many other sites.
For example, adding a “follow” button for Google+ will allow users to add the profile or page to their circles right from the page. From the example on the Google+ buttons page (linked below), adding just these two lines to the HTML will put the interactive button on the page where the tag appears (the script can be in the header or the body):
The more robust set of icons are the “share” icons. These icons help visitors include content in their streams, generally with a link back to the page or site on which the buttons are found.
“Sharing” icons differ from “follow” icons in that they are usually used to drive traffic to sites and specific pages on sites. When a user clicks on a “share” link on a web page a bit of content is added to that user’s social networking page; usually a bit of commentary from the user, a link to the page, and probably an image and blurb of text from the page. Generally, offering more diverse pages for visitors to share can improve the likelihood of sharing. For example, the share button for different blog or news articles, or different catalog items, or different images will result in different content on the social network.
It’s this injecting of content that starts to get a little tricky. Some services like a little bit of helper meta data to be added to a page, but most will make due with a bit of page parsing. Many accept some additional data to be added with the set-up of the button. This, sadly, is entirely service-dependent, and may require some duplicated effort on pages in order to reflect the same information on different services.
As with the “follow” icons, these buttons provide an easy mechanism for the user to share your content with their friends or followers. Once they’ve shared, that content can generally be commented upon or shared again, which propagates the content. Since this mechanism generally shares a link back to your site, there is no need to participate in the other services. Users of the social networking site will see the content on that site with the link back to the original site.
As with the “follow” version above, the script will be loaded and find the div with the right class and inject the necessary bits for it to behave as expected.
For example, to provide a simple “share” link on a page to post to a visitor’s Twitter feed, as the example from the Twitter page noted above shows, simply adding this kind of URL will do the trick.
<a href="https://twitter.com/share?url=http%3A%2F%2Fdev.twitter.com%2Fpages%2Ftweet-button" target="_blank">Tweet</a>
There may be a desire to implement both styles of icons on the same web page. This is acceptable where the site has pages on the service, and wants to drive “following” traffic to their pages on the social networks, and where the site also wants to drive traffic back to the site using “share” links.
An additional complication can come where there may be a need to have several icons on the same page. This is usually for a “share” implementation, where a list of items, such as a page of search results, might want to have share icons for each result. The desire for those instances is usually that each share icon would result in the target page, not the search result page, getting the share from the user. Most services offer some additional attributes or hints that can be given to solve this multiple button problem. Continuing our Google+ example, they offer the data-href attribute to allow naming a URL for the link:
<div class="g-plusone" data-annotation="inline" data-width="300" data-href="http://objectpartners.com/page1"></div> <div class="g-plusone" data-annotation="inline" data-width="300" data-href="http://objectpartners.com/page2"></div> <div class="g-plusone" data-annotation="inline" data-width="300" data-href="http://objectpartners.com/page3"></div>
Obviously real URLs would be used. The implementation is fairly similar for all of the services, but checking their specific documentation is recommended.
Social Networking Sources
Here’s a quick list of some popular services and their button-building pages:
https://developers.facebook.com/docs/reference/plugins/like/ https://developers.google.com/+/plugins/+1button/ https://dev.twitter.com/docs/tweet-button http://pinterest.com/about/goodies/ http://www.reddit.com/buttons/
For the most part, hitting a “developer” page or FAQ, or even searching for “button” on the service will lead to the correct page. Using a search engine like Google or Bing may increase frustration as the links to try to find tips to add the buttons lead to sites like this one, and not to the sites themselves.
To aid the frustrated developer or webmaster, there are several scripts and services available that can help provide easy implementations of multiple services at the same time. Often these come with additional analytics to help track which domains or pages are getting traffic, and even to which social networking service. Some are free, some are not, some are free with fees for extras.
Two big reasons to use services like this are the ease they provide in implementing the buttons, and the analytics they can provide. Self-served analytics can be provided by injecting bits into the URLs being shared or followed, or by careful review of server logs or other means of finding page referrers. These services take care of that, either by tweaking the URL being shared or followed, or capturing the user’s action when using the link.
Here are two examples, chosen for their simplicity and lack of intrusiveness. Neither seems to affect any parts of the page on which they’re rendered, except for rendering the buttons and the bits that may go with that (iframes or pop-ups, for example). That is, they don’t affect any URLs on the page (like rewriting ads), nor do they inject any additional content (like ads). Both of these services offer enhanced services for their revenue, but these free services of handling the social icons is still full-featured.
Both of these examples are free, and registration is optional. Inclusion here is for discussion purposes and this should not be seen as an endorsement or recommendation.
AddThis (http://addthis.com) boasts more than 300 social network options. They offer several options for customizing the views, and offer not only the same kind of share and follow options discussed above, but also banners and toolbars, and sign-on, trending, and personalization.
The website offers wizards for selecting the buttons to display, with a variety of styles, and for a variety of websites (e.g., WordPress and Blogger and more). Right from their page the following code is offered, and can be added to any site, and social icons are suddenly there.
That bit of HTML will populate the area with popular icons as determined by their script, based, it seems, on what services visitors choose to use. From their page, where the code was swiped, these are the offerings (the selection may vary depending on the user):
They provide the icons, they provide the script to do the share or follow as is desired. That last icon, the orange plus, is their “more” button, and clicking on it offers access to the more than 300 other services.
Of course, selecting the icons to display is also an option. Lots of options are available, all configurable using their wizard or found in the documentation.
Similar in its offerings, and second only due to alphabetizing, ShareThis (http://sharethis.com) offers wizard-based configuration, and likewise takes a small amount of HTML injected to place the buttons. They do tend toward the “share” and don’t seem to have a similar script for adding “follow” buttons.
Stepping through their wizard offers a bar that looks like this:
Based on the selections in the wizard, clicking on the green, forking icon can pop-up a dialog box in which the user can enter what they want to share, and then select multiple services to which they wish to share what they’ve entered.
Stepping through their wizard offers a bar that looks like this:
Note that publisher in the example is randomly generated by the site; after registering it will be the same for all sites on which the analytics are desired.
Whether either of these services, or another service, meets the needs of the site or the privacy concerns of users or administrators is left for the reader to decide. Again, these are offered only as an example of a mechanism for implementing the social icons.
It doesn’t matter if a site implements social networking buttons explicitly or with a service. Making the decision to “share” or “follow” must be made in advance.
“Follow” usually does require participation in the service to be successful.
“Share” provides quick and easy returns to the site the button serves.
Both are valid for marketing and social participation.