Take Control over your Social Cards!

To leverage the power of Social Media, you need full control over the display of your content in different social networks.

July, 17th 2015Nathanaël Lamellière

Social networks offer a variety of possibilities to display shared content: Twitter Cards With Large Image, Twitter Product or App Card, Pinterest's Rich Pins, Place cards, Facebook, Google+ or LinkedIn posts...

Successful marketing and social presence require a full control on the display of shared content in different networks, not only to adapt to the various social cards formats, but also to adapt the tone of the message to the channel.

Display a funnier Image and Description when an article is shared on Facebook, and a more professional Illustration and Catcher when shared on LinkedIn

Also, Social Cards formats are often changing and you need your CMS to adapt to this changes. Traditional CMSs are heavy to tweak for this purpose. prismic.io offers much more freedom here thanks to Content Slices and its content/presentation separation.

When a web page is shared, social networks scan the shared page for specific meta data to generate cards summarizing its content. By default, our Website Starter sample will set this metas with the first title, description and image it encounters in the content of the page. But it also gives you freedom to create Content Slices, fill groups of specific fields to keep a sharp control on Social Cards content.

Enabling Social Cards Content Management on your Website

Paste this at the tab level of your document mask, it will add a "Social Cards" tab allowing content writers to customize Social Cards content (Twitter, Facebook, LinkedIn, Pinterest cards)..

A Page editor with an example of managing the content of a Twitter Summary Card with Large Image

And here's the "Summary Card with Large Image" displayed on Twitter when the prismicwebsite.me homepage is shared:

Implementation

Here's an example of the PHP implementation in the Website Starter source code, generating meta-data from the added content slices:

social sharing buttons display and style:

functions to get the entered content on the prismic.io documents:

and insert it as the meta tags in the page to be crawled by social sites to generate the right card:

Give it a try!

We've seen before how Content Slices allow us to implement dynamic page layouts to allow content writers to rapidely create landing pages. Here we've shown another use case of Content Slices for customizing social cards. Both use cases are implemented in our sample website www.prismicwebsite.me, make your own copy of the website and try them by yourself!