Subject: Adding support for Twitter Cards

Posted on: 03/12/2012 01:34pm
By: Dirk

When you post a link on Twitter and the linked website supports Twitter Cards, Twitter will display a short summary of the article right there in the tweet. That's a neat feature that Twitter seems to be rolling out slowly - it doesn't work automatically, you have to apply for it.

Example: https://twitter.com/dirkhaun/status/273354551636140032

It also works when using a link shortener other than Twitter's own t.co: https://twitter.com/iblog0711/status/275547327991791616


Here's how to implement Twitter Cards in Geeklog:

Add the following function to your lib-custom.php:

PHP Formatted Code

/**
* Create the meta tags for a Twitter Summary Card
*
* @param  object  $story  A Story object
* @return string          HTML meta tags for the Twitter Card
* @link https://dev.twitter.com/docs/cards
*
*/

function CUSTOM_twitterCard($story)
{
    global $_CONF;

    $meta = '';
    $m = array();

    // Card type: summary
    $m[] = '<meta name="twitter:card" content="summary"' . XHTML . '>';

    // Canonical URL of the article
    $url = COM_buildUrl($_CONF['site_url'] . '/article.php?story='
                        . $story->getSid());
    $m[] = '<meta name="twitter:url" content="' . $url . '"' . XHTML . '>';

    // Title: Twitter would truncate it at 70 characters, so we do it
    //        here to have more control over it.
    $title = $story->DisplayElements('page_title');
    if (empty($title) || (strlen($title) > 70)) {
        // if the page title is too long, try the story title
        $title = $story->DisplayElements('title');
    }
    if (strlen($title) > 70) {
        $title = COM_truncate($title, 70, '...');
    }
    $title = str_replace('"', '&quot;', $title);
    $m[] = '<meta name="twitter:title" content="' . $title . '"' . XHTML . '>';

    // Teaser text/description: Derive from introtext
    // Twitter would truncate this at 200 chars, so again we do it outselves.
    $s = $story->DisplayElements('introtext');
    $s = preg_replace('/<h[^>]*>.*<\/h.>/', '', $s); // get rid of <Hx> tags
    $s = COM_getTextContent($s);
    if (empty($s)) {
       $s = $story->DisplayElements('bodytext');
       $s = preg_replace('/<h[^>]*>.*<\/h.>/', '', $s);
       $s = COM_getTextContent($s);
    }
    if (strlen($s) > 200) {
        $s = COM_truncate($s, 200, '...');
    }
    $s = str_replace('"', '&quot;', $s);
    $m[] = '<meta name="twitter:description" content="' . $s . '"' . XHTML . '>';

    // add the first image from the article, if there is one
    $value = $story->DisplayElements('introtext') . ' '
           . $story->DisplayElements('bodytext');
    $imgs = preg_match("/<img[^>]*src=[\"']([^\"']*)[\"'][^>]*>(.*?)<\/a>/i",
                       $value, $matches);
    if (($imgs !== false) && ($imgs > 0)) {
        $m[] = '<meta name="twitter:image" content="' . $matches[1] . '"' . XHTML . '>';
    }

    if (count($m) > 0) {
        $meta = implode(LB, $m);
    }

    return $meta;
}
 


Then, open article.php and find the code that adds the HTML meta tags. Add this line just below that code:

PHP Formatted Code

        // Meta Tags
        If ($_CONF['meta_tags'] > 0) {
            $meta_description  = $story->DisplayElements('meta_description');
            $meta_keywords  = $story->DisplayElements('meta_keywords');
            $headercode .= COM_createMetaTags($meta_description, $meta_keywords);
        }
        $headercode .= CUSTOM_twitterCard($story); // <-- add this line
 


And that's it, at least from Geeklog's side. Now when you call up an article and view the HTML, you should see 3 or 4 twitter meta tags in the page's header. Check that it works with the preview tool (linked from the Twitter Card description above). When it works, you can submit your Geeklog site for participation.

Note that I have no idea what Twitter's criteria are for accepting a site. They seem to check that the cards work (so use the preview tool to make sure), but it's not clear if they only accept certain sites or certain kinds of content. In my case, it took a little over a week to be accepted.

Some notes and observations:


I'd be interested in ideas to create a better summary text. For now, I'm trying to write my articles with this feature in mind, but it's not always possible to make a text work as both an introduction and a summary.

If you have any improvements to the above code, please post them here.

Geeklog - Forum
https://www.geeklog.net/forum/viewtopic.php?showtopic=94566