Sharing

The sharing function allows users to share videos or articles.


DO

  • Consider the type of content and target audience’s behavior when choosing which sharing options to display.
  • Make sure that image previews are displayed when the content is shared. Social media posts with pictures have increased click-through and engagement rates.
  • Write a call to action close the icon: “Dela”, when no counter value exists or share-count is 0.

DON'T

  • Don’t remove or hide the sharing buttons behind collapsible menus. They serve as a reminder for users to share content.
  • It’s important to consider the placement of the sharing function so it doesn’t interfere with the experience of the content.
  • Don't display the sharing counter with a 0 value.
  • Don’t display unnecessary, outdated seldom used social sharing options.
  • Don’t use the official or 3rd party buttons for social media services. Build custom buttons since otherwise they can compromise performance.

Nudge some more people to share

Sharing should always be visible but without interfering with the user’s experience of the content.

Even though most users share content manually, not by clicking on the sharing buttons, shares made through the buttons have generated considerably high spreading rates throughout the SVT sites. It’s also worth mentioning that mobile visitors use the sharing buttons more often than desktop visitors, along with the built-in function found in mobile browsers.

We avoid embedding third party-scripts with sharing-functionality on our sites for integrity- and security-reasons.

Visual design

Generally, the recommendation is to use icons from the SVT icon library and follow the guidelines for color use and contrast.

Here are the profile colors correspondent to each social media:

Sharing colors

Facebook

Base Color
#0064a5
Hover/Active
#008de9

Twitter

Base Color
#008de9
Hover/Active
#aad6f2

Google+

Base Color
#a90213
Hover/Active
#ee041b

WhatsApp

Base Color
#00ad00
Hover/Active
#a1d9a2

Example buttons

When Facebook shares are less than 5

Accessibility

Use clear text with the icons for the sharing options or clear alternative text describing where the actions will take the user (E.g. "Share the article on Facebook"). This is especially important for visitors using screen readers.

Share counter

The SVT Shared Count service let you request multiple social network APIs using a single HTTP endpoint. This is the recommended way to fetch values for a share counter, even if you’re only interested in a single value. To speed up response time, the service will also cache the response for up to 20 minutes.

HTTP-request

https://svt-sharedcount-production.herokuapp.com/shares?url=http://www.svt.se/example

Response

{facebook: 12, twitter: 0, googlePlus: 10}

Twitter is also represented (for backward compatibility) but since they have removed the count feature from the API, the value will always be 0.

The information displayed on tweets and Facebook posts

Use OpenGraph Debugger and Twitter Card validator to make sure that the content is displayed properly on Facebook and Twitter posts.