Brendan Dawes
The Art of Form and Code

Post from Instagram to Kirby

I'm a big fan of the IndieWeb movement and the idea of publishing your content to a place you own and control rather than exclusively on silos such as Facebook, Behance or other such sites.

One of the core principles of IndieWeb is POSSE — Publish (on your) Own Site, Syndicate Elsewhere, putting your content on your own domain and then syndicating to other sites such as Instagram, Tumblr etc.

There's also a different take called PESOS — Publish Elsewhere, Syndicate (to your) Own Site, so you might for instance publish on Instagram first then syndicate that to your own blog. I use this latter technique a lot for this very blog; whenever I post a photo on Instagram with the #process tag it will then — via IFTTT — make a blog entry on my site and tweet that newly made URL. I use this with my Kirby powered site but I'm sure it could be adapted to pretty much any system.

If you're not familiar with Kirby, it's a brilliant web site creation platform written by Bastian Allgeier. It's been powering my site now for several years and I love it.

Here's an overview of how I automate blog post creation triggered from Instagram.

Set Up IFTTT

IFTTT is a great tool that allows you to hook up various web services to each other. It works using two parts — If This, which is the trigger and Then That which is the action that should take place when the trigger is fired.

To setup the If This I first connected my Instagram account and created a new trigger which gets fired whenever I post a photo with the #process hashtag.

For the Then That section I chose a Webhook action. In the Webhook action panel I have the URL defined as the location of the script that sits on my server, which we'll get to in a moment, so for now call it ifttt.php. In the Method I have selected POST. In the Body I have this text:

params={{EmbedCode}}&caption=<<<{{CaptionNoTag}}>>>&thumbnail={{SourceUrl}}&type=photo&id=<YOUR-SECRET-STRING>

This will send information about our Instagram post to our server which we can then use to create a post.

Notice the id parameter. I've added this to make it more secure, checking to see if the id matches a secret made-up string known only to me. Without that it would be possible for someone who knew the URL to the script to post to my blog. It's not foolproof but does add a little bit more security.

Server-side Script

Below is a simplified version of the script that sits on my server. In our example we would call this ifttt.php and place it at the URL you specified in your IFTTT Webhook action. This version parses the information sent from IFTTT and creates a blog post using Kirby's built in $articles->create() method.

I do a little bit of extra parsing to create the title of the blog post. If my Instagram post contains a full stop (period) then it uses the text up to that full stop as the title for the post and then uses the rest of the text for the body text of the post.

You'll see that I keep the pass phrase outside of a web accessible directory for extra security and that I also use a Salt to make it a bit more secure.

The final part of the script downloads the image to the same directory as the blog post which I can use as a thumbnail for the post.

<?php

require($_SERVER['DOCUMENT_ROOT'] . '/kirby/bootstrap.php');

// Path to a configuration file outside of a web accesible directory containing your secret pass phrase and salt.

include '/Path/To/Your/conf.inc';

if(get('id').$SALT==$IFTTT_PASS.$SALT) {

    $articles = page('blog')->children();
    $sort     = ($articles->count() + 1);
    $date     = date('Y-m-d H:i:s');
    $dirname  = $date . '-' . $sort;
    $text = stripslashes(get('params'));
    $caption = urldecode( get('caption'));
    $titleIndex = strpos($caption,'.');
    $title = "";

    if ($titleIndex === false){
        $title = $caption;
        $caption = "";
    }else {
        $title = substr($caption,0,$titleIndex);
        $caption = substr($caption,$titleIndex+2);
    }

    $text .= '<p></p>'.$caption;
    $content  = array('title'  => $title, 'date'   => $date, 'text'   => $text,'blogid' => $sort, 'tags' => 'Process');
    $article  = $articles->create($dirname, 'article',$content);

    // Download image
    downloadImage(get('thumbnail'),$_SERVER['DOCUMENT_ROOT'].'/content/05-blog/'.$article->dirname().'/thumbnail.jpg'
    );

} else {
    echo('ID NOT VALID');
}

function downloadImage($image_url, $image_file){
    $fp = fopen ($image_file, 'w+');             
    $ch = curl_init($image_url);
    // curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false); 
    curl_setopt($ch, CURLOPT_FILE, $fp);        
    curl_setopt($ch, CURLOPT_TIMEOUT, 1000);  
    curl_setopt($ch, CURLOPT_USERAGENT, 'Mozilla/5.0');
    // curl_setopt($ch, CURLOPT_VERBOSE, true); 
    curl_exec($ch);
    curl_close($ch);                    
    fclose($fp);                          
}

?>

Script also available as a gist.

Going Further

Diagram of flow

You can see from the diagram above, posting on Instagram triggers quite a few events, posting to Twitter and Linked In as well as Flickr and Pinterest. For brevity though I wanted to concentrate on the Kirby blog post creation part. The other parts should you wish to add them should be pretty straight forward.