Configuring Your Social Sharing Buttons

Social sharing button offers an easy way to distribute your content to a wider audience. The major social providers allow options to configure the content that will be shared programmatically. In this guide we explore the options that you can use in order to configure the shared content of your social shares including: Message, URL, Image, and Image Caption/Description.

Facebook

Facebook utilizes Open Graph Tags which are meta tags that can be included on your page and are scrapped by Facebook when determining the content that should be shared with a specific button. These tags can be included in the head section of your page. All meta tags should be formatted with a property value of “og:<tag-name>”, some useful tag names are:

  • title- The title of your article.
  • type- The media content that is included in the shared article. This is defaulted to “website”.
  • image- The image that will be included in the share.
  • url- The canonical URL that will be used to identify the share and aggregate the community shares/likes.
  • description- A  brief description that is displayed below the image in the share.

Example of og meta tags that can be included in your html head tag:


<head>

<meta property="og:title" content="Social Sharing Buttons" />

<meta property="og:type" content="article" />

<meta property="og:image" content="http://upload.wikimedia.org/wikipedia/en/7/75/Login-Radius-Logo.png?ver=1495584288" />

<meta property="og:url" content="http://wwwlr.staging.wpengine.com/" />

<meta property="og:description" content="Social Login, Sharing and Social Profile Data Solutions" />

</head>

If you are modifying these tags it can take some time for the changes to translate over to Facebook. You can refer to this blog on troubleshooting, testing, and force updating your configured sharing systems.

Google

Google offers multiple ways that you can set the shared content which it intelligently determines the most relevant details to be displayed in the share. This works to varying degrees with the following options available and taking precedence respectively:

  • Structured Data Markup- HTML markup detailed on http://schema.org/.
  • Open Graph Tags- Turn your page into a rich data object, commonly used to customize Facebook sharing details. Information on the markup is available on http://ogp.me/
  • Title or Meta Description- HTML attributes that provide details on the site.
  • Google’s best guess- If none of the above are included, Google will crawl your page and try to interpret the most suitable details to include in the share.

Below is an example of basic structured data markup:


<body itemscope itemtype="http://schema.org/Article">

<h1 itemprop="title"> Your Site Title </h1>

<img itemprop="image" src="Image URL"/>

<div itemprop="description"> A description of your site.</p>

</body>

Below is an example of using basic meta tags to define the shared content:


<meta name="description" content="A description of your site." />

<meta name="keywords" content="Keywords to describe the content" />

<meta name="title" content="Title of the Site" />

Twitter

The best way to customize your Twitter shares is to modify the URL query string parameters that gets triggered when the share icon is clicked. Another way is to customize the <a> tag by including data-attribute tags as detailed on Twitters Tweet button creation instructions . If you do not have control over the links or triggers that are being used to activate the Tweet popup you can also set Twitter Card meta tags which handle the Twitter customizations.


<meta name="twitter:card" content="summary" />

<meta name="twitter:site" content="Twitter Handle of Publisher" />

<meta name="twitter:title" content="Page Title" />

<meta name="twitter:creator" content="Twitter handle of author" />

<meta name="twitter:description" content="Description of your site" />

<meta name="twitter:image" content="Image URL" />

Various providers will utilize some of the above methods with open graph tags being one of the most common methods for controlling the shared content. Other systems will customize this content based off of parameters that are passed into the script or URL that is used to trigger the share interface. Getting these to be correctly configured can be a bit of a trial and error process, you can use the resources detailed in this blog post to help test and verify that you have correctly configured your social sharing content.

 

Karl Wittig

About 

Karl is a Software Developer at LoginRadius, the rapidly-expanding social login and sharing provider. He graduated from NAIT with a diploma in Computer Engineering Technologies. He enjoys snowboarding, watching TV series and gaming.


Leave a Reply

*Required