Nerd out! Advanced Twitter Card Customization in NationBuilder
At cStreet we often implement Twitter cards for clients. Using liquid you can implement twitter cards pretty basically but the magic is how to really customise your twitter cards using liquid if statements. We're launching a project this week that relies heavily on user submitted content so we though it would be a great opportunity to show off this customization.
You can check out Twitter's Card Overview and Getting Started Guide if you need a primer.
This is what we're building:
Here is an example from twitter of what a basic card code should look like. Basically you want to specify all of the different fields with your content.
You'll want to go into your layout.html file and add the following to the <head>:
What's you're looking at here is basically the default settings but we've replaced the content areas from the Twitter example with liquid calls. The "site" is the twitter id of your organization. Here we've entered it manually but if you wanted to get really down and dirty you could use the call for the {{ site.broadcaster.twitter_login }}. For the "Title" we've used the page headline. For the "description" we use the page excerpt which is the page summary you can enter under page > settings > social media settings. The image here (I'm using a large image card) is the image in your page social media settings. Note that if you haven't set up this image the card will just load without an image.
So those are the basics but now let's get creative. In the site we're launching this week, we're running a contest where we ask people to upload photos and stories to win a prize. We're using a suggestion box page type to power it and what we want is that when someone shares their story on Twitter, their photo is attached as the shareable image.
The first two lines don't change:
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@fcm_online">
Twitter cards also have a "creator" field. In the twitter example above this is so you can have a card whose site is the New York Times but whose author is Nick Bilton, a reporter for the New York Times. In our case we want our site to be the organization and then, only if the author of the post has some twitter info in the back end, their name as the creator. So:
{% if page.type_name == 'Suggestion' and page.author.has_twitter_info? %}
<meta name="twitter:creator" content="{{ page.author.twitter_login }}">
{% endif %}
The title is still the headline:
<meta name="twitter:title" content="{{ page.headline }}">
Now, because user submitted social media settings don't get filled in by the user, we need to adjust the description and image settings. For the description, we want to use the content of the post. For the image, we want to use the suggestion image that they upload. We want to make sure we specify alternate settings for every other page on the site too:
{% if page.type_name == 'Suggestion' %}
<meta name="twitter:description" content="{{ page.suggestion.content }}">
<meta name="twitter:image:src" content="{{ page.suggestion.image_url }}">
{% else %}
<meta name="twitter:description" content="{{ page.excerpt }}">
<meta name="twitter:image:src" content="{{ page.meta_image_url }}">
{% endif %}
There we go! Now when people are sharing their content, it will look badass on Twitter. We'll update this article if we remember in the crazy haze of site launch with a photo of a user submitted twitter card!
by Amy Leaman