Media Art, User Experience Design, and Interface Development

Simple share functionality for multiple social networks

Posted on 2011-04-18

Social Networks Icons

Whether it’s a game, a website, a video or even a subsection in these projects, it seems that they all need a share button. I personally believe it is sometimes too much, to the point that it seems that the PR and media teams avoid doing their work in the hopes that the customer/user will spread the word for them. But that may be just me complaining again.

Nevertheless, I will present here how to use the simple sharing functionality of some of the most prominent social networks around. Remember that Facebook and Twitter are not king and queen everywhere, you may want to target your markets properly.

Facebook

The infamous social network. As a developer, I kind of like to hate this network, for its documentation is poor and quickly outdated. On the other hand, if Facebook changes its API this often, it allows them to implement new stuff quicker.

Facebook has a relatively simple sharing functionality, even some additional info that you can put on your site metadata to display on the user’s wall. I am not taking here about the Like button, which would display number of “likes”—although these two functionalities were merged.

In order to share, you do not need Facebook connect at all, you would only need it if your application, game or site requires access to the user’s data. You simply need to call a URL:

http://www.facebook.com/sharer.php?u=http://example.com&t=The Post's Title

If we deconstruct the URL, it’s pretty easy to see what is what:

  • http://www.facebook.com/sharer.php: the URL to the PHP function that will share on Facebook
  • u=http://example.com:u is the variable name which represents the URL that you want to share
  • t=The Post's Title: t is the variable name which represents the title of what will be shared on the wall

Keep in mind however that if the site that you share has a title and description metadata, the value that you set to t will be overwritten.

You may also want to push it further and set yourself the title, the description and even a thumbnail for your site. For example, this is what was done for the adidas Porsche Design site:

adidas Porsche Design sharing on Facebook

In order to set those values, simply add the Facebook metadata tags on the page you wish to share, like so:

HTML:

<meta property="og:title" content="Your website title goes here"/>
<meta property="og:description" content="Your website description goes here"/>
<meta property="og:image" content="http://www.dummyimage.com/50x50"/>

You may read more in the Facebook documentation. (I can’t believe I just wrote that…)

Twitter

The way to share on Twitter is pretty similar to Facebook’s, if not simpler. Here as well, you may simply use a URL with some parameters:

http://twitter.com/share?url=http://example.com&text=This tweet has been shared via a URL.

Here again, here is a breakdown of the URL:

  • http://twitter.com/share: the URL to the function that will share on Twitter
  • url=http://example.com: url is the variable name which represents the URL that you want to share
  • text=This tweet has been shared via a URL.: text is the variable name which contains the tweet

LinkedIn

LinkedIn also offers a simple URL for sharing:

http://www.linkedin.com/shareArticle?mini=true&url=http://example.com&title=The Post's Title

Their share URL contains an additional parameter:

  • http://www.linkedin.com/shareArticle: the URL to the function that will share on LinkedIn
  • mini=true: for some reason, the API requires this mini parameter to always be present and set to true.
  • url=http://example.com:url is the variable name which represents the URL that you want to share
  • title=The Post's Title: title is the variable name which represents the title of what will be shared

LinkedIn provides well explained documentation on how to use their sharing functionality. Although for the life of me I don’t get why I would ever use the summary parameter.

ВКонтакте (vKontakte)

ВКонтакте’s share is well documented. Can’t read Russian? Get Google Chrome, it translates websites quite well.

Even though there is a lot of options available for sharing, let’s look at a simple share:

http://vkontakte.ru/share.php?url=http://example.com&title=The Post's Title

Pretty much the same as Facebook:

  • http://vkontakte.ru/share.php: the URL to the PHP function that will share
  • url=http://example.com:url is the variable name which represents the URL that you want to share
  • title=The Post's Title: title is the variable name which represents the title of what will be shared

 

人人网 (RenRen)

We now enter the realm of assumptions, I simply relay information I found about how to share on RenRen. A user named Yuao shared his knowledge, and it seems that again, a simple URL with some parameters do the trick:

http://share.renren.com/share/buttonshare.do?link=http://example.com&title=The Post's Title

Let’s see what that URL is made of:

  • http://share.renren.com/share/buttonshare.do: the URL to the function that will share on RenRen
  • link=http://example.com: link is the variable name which represents the URL that you want to share
  • title=The Post's Title: title is the variable name which represents the title of what will be shared

Due to the documentation being all in Chinese, it’s kind of hard to obtain more information. As far as I know, Google cannot sift through stuff in China easily. Also, the company itself did not want to provide help unless huge sums were paid upfront.

Other networks

There are obviously other networks, but as you can see from the last one of which I spoke, my knowledge gets thin. Hyves, Orkut and Mixi may be of interest if your data shows that your users are part of such networks.

As for every project, make sure that implementing the sharing functionality makes sense. It may be obvious, but not all networks need to be targetted for every single project.

If you target multiple markets and social networks, do look into the proper etiquette of each. Last I heard, commercial presence was a bit frowned upon on Mixi.


Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.