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.

Following

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.

There are also more active methods of implementing a “follow me” icons. These typically require some JavaScript and often results in an iframe to place the icon and any features around it. These kinds of buttons offer visitors the opportunity to follow the related social networking profile or page in one swift action, and without leaving your site.

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):

<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<g:plus href="https://plus.google.com/{pageId}"></g:plus>

When the JavaScript run in the Google-provided plusone.js is run, the tag will be found and replaced with the goods Google deems necessary to provide the desired experience. Most of the social networking services offer similar examples (links follow below).

Sharing

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.

Usually the “share” buttons won’t direct the user away from the website they’re visiting. This then requires a bit of JavaScript on the page. Most of these buttons inject an iframe into the website to avoid cross-site scripting errors. This is so that the features such as an optional count or faces or names can be displayed. Generally these icons will pop-up a floating div or open a new browser window to allow the user to connect to the service and add their comments. When the user finishes, the pop-up or other window is closed and the user can continue visiting the site.

Here’s an example from the Google+ page to inject the very common G+ button with a count using JavaScript.

<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<div class="g-plusone" data-annotation="inline" data-width="300"></div>

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.

Rather than using JavaScript, some of the services offer straight URLs to allow the same kind of sharing, but they tend to pull the user away from the site containing the icon. Optionally, there can be additional scripting done to provide a pop-up or open a new browser window.

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>

Of course, the URL parameter would be changed to reflect the page the site is trying to Share. Using a straight URL means that some of the additional information around the link or icon may be missing, like the counters or other users’ images who have shared the same link. At the same time, it’s a light-weight solution that offers capabilities when JavaScript isn’t available or desired.

Implementing Both

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.

When using the URL-only solutions, this is a trivial effort, and the correct links in the HTML simply need the correct targets. When implementing the JavaScript versions, there can be potential conflicts, or at the very least, opportunities for streamlining. For example, here are the two forms of the Google+ icons, copied from above for easier reading:

<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<g:plus href="https://plus.google.com/{pageId}"></g:plus>

<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<div class="g-plusone" data-annotation="inline" data-width="300"></div>

The thing to notice is that both snippets include the same JavaScript. Easily, this can be reduced to just including that JavaScript once. Notice also that the implementations are different, where the “follow” implementation (top) uses a non-standard <g:plus> tag, and the “share” implementation uses a standard <div> with some non-standard attributes.

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

Because the tweaks to the attributes and JavaScript to include these icons can sometimes be daunting to try to scratch out of web pages that contain them, it’s usually easier to visit the site directly. While this is the part that many developers find frustrating, most of the bigger services have helper pages that will generate the necessary script, and even offer implementation examples and suggestions.

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.

Third-party Options

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

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.

<!-- AddThis Button END -->
div class="addthis_toolbox addthis_default_style addthis_32x32_style">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-503e75fe1553f897"></script>
<!-- AddThis Button END -->

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.

ShareThis

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:

They have options for the buttons with counters, bars and menus, and even a slick hovering side button. ShareThis provides the icons and does all of the busy work of adding whatever JavaScript is required to make the buttons to look and behave as desired. That green, forking icon is their “more” button, and it offers access to hundreds of services.

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:

<span class='st_sharethis_large' displayText='ShareThis'></span>
<span class='st_facebook_large' displayText='Facebook'></span>
<span class='st_twitter_large' displayText='Tweet'></span>
<span class='st_linkedin_large' displayText='LinkedIn'></span>
<span class='st_googleplus_large' displayText='Google +'></span>
<script type="text/javascript">var switchTo5x=true;</script>
<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
<script type="text/javascript">stLight.options({publisher: "ur-a446a30d-3a9a-1dfc-50d4-a5ef77b9d611"}); </script>

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.

Conclusion

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.

The implementation doesn’t need to be difficult. A few lines of HTML, a little JavaScript, or both, and social network interaction is done.