2

Any ideas how I can make use of Twitter Summary Cards via ExpressionEngine?

1 Answer 1

2

There are a number of approaches you could take.

Here's one using native EE functionality

We can see from the Twitter docs that we need the following markup:

<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@nytimes">
<meta name="twitter:creator" content="@SarahMaslinNir">
<meta name="twitter:title" content="Parade of Fans for Houston’s Funeral">
<meta name="twitter:description" content="NEWARK - The guest list and parade of limousines with celebrities emerging from them seemed more suited to a red carpet event in Hollywood or New York than than a gritty stretch of Sussex Avenue near the former site of the James M. Baxter Terrace public housing project here.">
<meta name="twitter:image" content="http://graphics8.nytimes.com/images/2012/02/19/us/19whitney-span/19whitney-span-article.jpg">

Now if you were on a single entry page you could use an embedded template for the html head that would look like:

<head>
  <meta charset="utf-8">
  <title>{embed:blog_title}</title>

  <meta name="description" content="{embed:blog_description}">
  <meta name="author" content="{embed:author}">

  <meta name="twitter:card" content="summary">
  <meta name="twitter:site" content="{gv_site_twitter_handle}">
  <meta name="twitter:creator" content="{embed:twitter_handle}">
  <meta name="twitter:title" content="{embed:blog_title}">
  <meta name="twitter:description" content="{embed:blog_description}">
  <meta name="twitter:image" content="{embed:blog_image}">

  <link rel="stylesheet" href="/a/c/style.css">
  <!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
</head>

If we then look at the single entry template, it could look something like:

{exp:channel:entries channel="blog" limit="1" require_entry="yes"}

{embed=_embeds/html_head blog_description="{blog_description}" author="{author}" twitter_handle="{aol_im}" blog_title="{title}" blog_image="{blog_image}{url}{/blog_image}"

...
{/exp:channel:entries}

Now, of course, this setup is dependent on having a global variable to store the site's Twitter handle {gv_site_twitter_handle}, a channel called 'blog' and also a custom field group for the blog containing fields: blog_description and blog_image. Those, along with the native title variable will do the majority of the work, however, we still need the author's Twitter handle if available.

In this instance, I'd set the author's Twitter ID against their member profile field {aol_im}. EE gets a hard time for this and other profile fields existing but here's a good place to use it. You could of course create a custom profile field to use instead.

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.