SPLOT Writer now with Bigly Tweets

Of all the SPLOTs I worked in with Brian Lamb the TRU Writer one (which I start calling the SPLOT Writer) is easily a favorite.

It was not the first one, but the first one that had quick uses out of the gate as a way to create a site where people could create a site to invite others to publish rich media like content in a WordPress site without putting them into the bowels of the WordPress interface. But more importantly, an author could choose the way their work is credited, totally anonymous or with their own name.

This is a WordPress Theme (technically a child of a Bootstrap theme) that gives anyone the capability to create a site like we made, and it can be customized via an admin interface (no fingers need touch any code). It’s totally free and available at http://github.com/cogdog/truwriter where you will find a growing list of places it has been used.

I was proud of the way we put it to use with the UDG Agora project as a place for faculty participants to share (“comparte”) the work they did to implement a new approach in their teaching — see http://udg.theagoraonline.net/comparte

But this is paled by an idea put in place by Tanya Dorey-Elias called When I Needed Help a means of sharing stories of dealing with abuse

It’s an “an effort to gather those stories in a safe(r) way so that others might feel less alone and to be aware of the risks of asking for help.” (learn more…).

The most lovely thing that can happen when you make something in tech is when someone uses it in a novel way you never foresaw.

Anyhow, Tanya recently wrote about a small part of the site, the place where a published story can be tweeted:

Honestly I had not even looked at how that worked since I added it to the first version. It actually tweeted something like “Published at TRU Writer: [title] by [author] #splot” and Tanya asked about customizing the tweet message. I gave her some instructions on how to edit her copy, but also said, that I preferred to make it something that could be made customizable in the admin interface.

So in my updated version there is no prefix, and there is an option to choose the tags that get sent with a shared tweet:

New admin option for customize the hashtags sent out with a tweeted published item

But that’s not all. Tanya asked about what image was sent with the tweeted story. And I looked at some examples, and saw that it was somewhat random which image was picked.

I did some digging knowing it was probably a metadata thing, and sure enough there are specifications for how to add some twitter card tags to the template so that it would use the Summary Card with Large Image format.

For those who like the nuts and bolts, see below. I have it in place now on the SPLOT Writer demo site – see what happens when you tweet a published item

You Cannot Keep a Good SPLOT Down by Alan Levine aka @cogdog https://t.co/E5a2pMarpi #splotwriter

— Alan Levine (@cogdog) January 21, 2017

So the top part is just what is tweeted- the title, author, link and hashtag. But the image is taken from what the writer (me) picked for the feature image. Below it is the name of the site, and the first two lines excerpted, plus an indication below of the URL it came from.

This tweet is much more bigly better than before.

Anyone who has a Writer SPLOT site running gets this new feature, and some more minor fixes by updating their TRU Writer theme with the newer version. Any updates I do are done in a matter that will not break any pre-existing versions.

The code stuff for generating the twitter card stuff went into the header.php template.

We only want this to go into play in single published posts, so our logic is wrapped inside:

<?php if ( is_singular() ) :?>

  :
  :
<?php endif?>

<?php if ( is_singular() ) :?>

<?php endif?>

The first thing we have to do is declare the global $post so we can access data about the post (we are outside of the realm of the WordPress Loop).

Also, we need some magic to extract a twitter name from the place we store whatever the author has put in for a credits field (it can be a name, a fake name, and can include a twitter handle) — so we have to extract a @xxxxxx from a general string if it’s there.

global $post;
			 
$author_twitter = splot_get_twitter_name( get_post_meta( $post->ID, 'wAuthor', 1 ) );

global $post;

$author_twitter = splot_get_twitter_name( get_post_meta( $post->ID, 'wAuthor', 1 ) );

I am calling my own function and passing it the string stored in the post custom data field called wAuthor. This was a bit I adapted from some answers I found in the place I nearly find all my tech answers- StackExchange. It’s the preg_match that does the work, returning a twitter name if it found one, otherwise it returns false.

function splot_get_twitter_name( $str ) {
  // takes an author string and extracts a twitter handle if there is one 
	
  $found = preg_match('/@(\\w+)\\b/i', '$str', $matches);
	
  if ($found) {
     return $matches[0];
  } else {
     return false;
  }
}

function splot_get_twitter_name( $str ) {

// takes an author string and extracts a twitter handle if there is one

$found = preg_match('/@(\\w+)\\b/i', '$str', $matches);

if ($found) {

return $matches[0];

} else {

return false;

}

The next two lines are just static:

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@cogdog">

1 2	<meta name="twitter:card" content="summary_large_image"> <meta name="twitter:site" content="@cogdog">

I am still not sure what the site field is for; the twitter docs mention for analytics. So I am claiming them. I guess if you want it, hack your own theme. Or tell me why I need to make this an option.

Next we give the author twitter credit, if we found a twitter name:

<?php if ($author_twitter) echo '<meta name="twitter:creator" content="' . $author_twitter . '">';?>

1	<?php if ($author_twitter) echo '<meta name="twitter:creator" content="' . $author_twitter . '">';?>

I don’t think this gets displayed, but it must figure into some connection for the writer.

Next we use the blog’s title to display below the image:

<meta name="twitter:title" content="<?php bloginfo( 'name' ); ?>">

1	<meta name="twitter:title" content="<?php bloginfo( 'name' ); ?>">

I guess I could add the tagline if someone really wants it.

Following this, where I got tripped up a while with nuances of what is a WordPress excerpt or not (you cannot get an auto excerpt outside The Loop), so I brute forced it by extracting the first 30 words of the post. I learned this new wordpress function wp_trim_words() and we strip out HTML with strip_tags().

<meta name="twitter:description" content="<?php echo wp_trim_words( strip_tags( $post->post_content ), 30, '...' );?>">

1	<meta name="twitter:description" content="<?php echo wp_trim_words( strip_tags( $post->post_content ), 30, '...' );?>">

How this is displayed is platform dependent, from the Twitter docs:

Platform specific behaviors:

iOS: Truncated to one line in timeline and expanded Tweet

Android: Not displayed

Web: Truncated to two lines in timeline and expanded Tweet

Tough luck Android!

Finally, and maybe the most important thing– the image. It needs to be at least 280px in width and 150px in height, and less than 1Mb. The WordPress medium size of the featured image should do the trick. And WordPress gives us this URL in one function

<meta name="twitter:image" content="<?php echo get_the_post_thumbnail_url( $post->ID, 'medium');?>">

1	<meta name="twitter:image" content="<?php echo get_the_post_thumbnail_url( $post->ID, 'medium');?>">

And that’s it! Give it a try on some of the sample posts on http://splot.ca/writer

I was also thinking of added a view count as well.

I can easily think of new features, but like it better when folks like Tanya send me ideas.

SPLOTS! ACTIVATE:

UPDATE Jan 27, 2017

While curious about previous tweets sent with the #splot hashtag that was hardwired inti TRU Writer, I noticed that several tweeted from the UDG Agora Comparte site already had the big picture card format!

SISTEMAS AMBIENTALES -LA SUSTENTABILIDAD CON EL USO DE LAS TIC´S by @YahairaCohinta https://t.co/2pY37JWYX2 #splot @sirer_7

— Yahaira Cohinta (@YahairaCohinta) December 13, 2016

Published at TRU Writer: La política, mejor escenario para memes. by @terecuase teresita serna https://t.co/u805vleyCB #splot #udgAgora

— Tere Serna (@teresitaseren19) December 13, 2016

This was curious. Digging into the source code, I can see that the JetPack plugin generates OpenGraph tags that twitter uses:

<!-- Jetpack Open Graph Tags -->
<meta property="og:type" content="article" />
<meta property="og:title" content="La política, el mejor escenario para los memes." />
<meta property="og:url" content="http://udg.theagoraonline.net/comparte/published/1386" />
<meta property="og:description" content="Introducción Es imprescindible aplicar en el proceso educativo las herramientas que las tecnologías nos brindan. Estar actualizados, capacitados, apropiando y haciendo uso de estas herramientas, es…" />
<meta property="article:published_time" content="2016-12-13T03:59:27+00:00" />
<meta property="article:modified_time" content="2016-12-16T23:50:04+00:00" />
<meta property="og:site_name" content="UDG Comparte" />
<meta property="og:image" content="http://udg.theagoraonline.net/comparte/files/2016/12/mm-1.jpg" />
<meta property="og:image:width" content="400" />
<meta property="og:image:height" content="400" />
<meta property="og:locale" content="en_US" />
<meta name="twitter:image" content="http://udg.theagoraonline.net/comparte/files/2016/12/mm-1.jpg?w=640" />
<meta name="twitter:card" content="summary_large_image" />

But I still prefer my approach that does not rely on JetPack.

Top / Featured Image Credit: Mea culpa. I made this image a few years ago for a presentation and lost track of where I got the original Donald Duck frame with the word SPLAT on it. I photoshopped the “A” into an “O” solely in the name of parody.