Perl programmer for hire: download my resume (PDF).
John Bokma's Hacking & Hiking

Adding Twitter Card and Facebook Sharing Support to Tumblelog

August 11, 2019

In the afternoon I added a new template variable to tumblelog, both the Perl and the Python version. Thanks to this additional variable, page-url, it's easy to add support for Twitter card and Facebook sharing to a static blog generated with tumblelog.

Modifying the Blog Template

After you have done a git pull add the following lines before the line containing </head> in the template you use for your blog:

    <meta property="og:url" content="[% page-url %]">
    <meta property="og:type" content="article">
    <meta property="og:title" content="[% title %]">
    <meta property="og:image"
          content="http://example.com/images/site-logo.png">
    <meta property="og:description" content="Link to: [% page-url %]">
    <meta name="twitter:card" content="summary">
    <meta name="twitter:image:alt" content="SOME SITE logo">

You have to modify the following for your own blog:

For my tumblelog, Plurrrr, I created a simple 512x512 pixels logo showing an orange P. Because I use the summary Twitter card this logo is shown to the left of the title and description:

A tweet for a Plurrrr post
How a tweet for a blog post on Plurrrr looks in the browser.

Sadly, a rectangular cut-out is shown on Facebook, but since I made this mostly for Twitter I don't care much. If you prefer a rectangular logo set the content attribute of twitter:card to summary_large_image. For more information, please read Twitter Card and Facebook Sharing.

Generating Tweets

I use a Perl program called tweetfile.pl to post a tweet at random chosen from a text file in fortune cookie format.

A simple Perl program, given below which I named tweets.pl, can be used to create such a file from the Markdown file used as input for tumblelog.

#!/usr/bin/perl -n

/^(\d{4})-(\d{2})-(\d{2})\s+(.+)/
    && print "$4\n\nhttp://plurrrr.com/archive/$1/$2/$3.html\n%\n";

You call it as follows:

perl tweets.pl site.md > site-tweets.txt

Thanks to the -n option in the she-bang line (the first line of the Perl program) the program iterates over all lines in the given Markdown file and if a match is found of a date followed by a title a tweet is printed to the standard output which is redirected to a text file.

Don't forget to replace the URL in this tiny Perl program with the one to your blog.

One caveat of this program though, if you have a blog post which has a line starting with a date in year-month-day format, for example:

2019-08-11 This is an example

this will also be seen as a blog post; a false positive. Writing a program that avoids this special case is left as an exercise to the reader; you could use code from tumblelog, either the Perl or Python version, as a starting point.

Automating

As I use a Makefile to generate my tumbelog it's easy to call the aforementioned tweets.pl Perl program as part of the make process:

TUMBLELOG = ../../projects/tumblelog
TWITTERTOOLS=../../projects/twitter-tools
PERL = perl
SCSS = soothe.scss
SASS = sass --sourcemap=none -t compressed
CSS  = soothe.css
TEMPLATE = plurrrr.html
AUTHOR = 'John Bokma'
BLOG_URL = http://plurrrr.com/
NAME = 'Plurrrr'

all: local tweets
	rsync -avh --delete -c htdocs/ ti:sites/plurrrr.com/public/

tweets:
	@perl tweets.pl plurrrr.md > $(TWITTERTOOLS)/plurrrr-tweets.txt

local:
	@echo "Building latest version of blog using Perl"
	@$(SASS) $(TUMBLELOG)/styles/$(SCSS) htdocs/$(CSS)
	@$(PERL) $(TUMBLELOG)/tumblelog.pl --output-dir htdocs \
	  --template $(TEMPLATE) --css $(CSS) \
	  --author $(AUTHOR) --blog-url $(BLOG_URL) \
          --name $(NAME) --quiet plurrrr.md

Note that I added a new rule; tweets and added this as a dependency to the all rule. Don't forget the latter.

Now, if you run just make the tweets target should run and create the text file with tweets.

You can use a cron job to tweet automatically, daily, as explained in Running a Perl program via cron.

Related