完：WPに記事を投稿したらTwitterに画像付きで投稿したあと、画像URLを取得する

右往、左往を経てついに完結となりました。まずやりたいことをまとめると

1. WPに記事を投稿する
2. 指定した画像付きで自動ツイート （Twitterのタイムライン上にサムネイル表示）
3. ツイートした画像URLをWPのテーマ上で扱える （ツイートボタンに組み込みたい）

です。IFTTTを使ってみたり色々なやりかたを試して試行錯誤してみたのですが、WPプラグインであるNextScripts: Social Networks Auto-Posterが一番的を射ていて、ようやくベストプラクティス的なものに辿り着いた感があったので今回はその内容を記事にしてみました。

要件

まず前提というか、ぼくが求めている要件としては

• 投稿したら画像付きツイートを自動でしてくれる
• ツイートした画像を取得してカスタムフィールドあたりに保存してくれる
• カスタム投稿でも動作する
• アイキャッチ画像から設定できる
• カスタムフィールドに設定した画像からも設定できる

みたいな感じ。今回はこのすべてが満たされた感じになってます。

完：WPに記事を投稿したらTwitterに画像付きで投稿したあと、画像URLを取得する – keisuke.tsukayoshi http://t.co/EyztJRBHXa … pic.twitter.com/kwCiZ9eeDb

— くれちよん (@redxiii_)

2014, 10月 19

こんな感じになります。

設定

SNAPの設定方法に関してはぼくも参考にさせていただいたこちらのブログを参照ください。

一部Twitterのアプリ設定あたりの情報が古くて戸惑ったのですが、そのあたりはこちらの公式チュートリアルも合わせて参照しつつ設定しました。

手順を簡単にまとめると

1. プラグインダウンロード
2. プラグインの設定から簡単な初期設定
3. TwitterのDevサイトからアプリを作成
4. できたアプリのトークンをプラグインの設定から入力

という具合。

ツイートボタンに埋め込む方法

Twitterに画像投稿したあと、SNAPがカスタムフィールドにsnapTWというキー名でツイートIDなど諸々の情報を保存してくれているので、それを利用してテーマに組み込みます。具体的にはツイートボタンに組み込みたい。

a:1:{i:0;a:9:{s:4:"doTW";s:1:"1";s:10:"SNAPformat";s:34:"%TITLE% - keisuke.tsukayoshi %URL%";s:8:"attchImg";s:1:"1";s:9:"isAutoImg";s:1:"A";s:8:"imgToUse";s:0:"";s:11:"isPrePosted";s:1:"1";s:8:"isPosted";s:1:"1";s:4:"pgID";s:18:"523700547988107264";s:5:"pDate";s:19:"2014-10-19 05:01:55";}}

ツイートIDはこんな感じでシリアライズされた状態で保存されています。これをアンシリアライズして取得するコードは以下。ナカエくんのGistを参考にしました。サンキューリョッウ。

<?php
if(get_post_meta($post->ID, 'snapTW', true)) {
$twuserid = '[ツイッターID]';
$snaptw = get_post_meta($post->ID, 'snapTW', true);
$unserialize = maybe_unserialize($snaptw);
$twimageid = $unserialize[0]['pgID'];
if($twimageid) {
$imageUrl = ' https://twitter.com/' . $twuserid . '/status/' . $twimageid . '/photo/1';
} else {
$imageUrl = '';
}
} else {
$imageUrl = '';
}
?>

画像がないときとかの条件分岐を加えました。画像がなかった場合は空になってます。これをツイートボタン内のdata-title内に

<?php echo $imageUrl; ?>

みたいな形で打ち込めばOK。ちなみにカスタムフィールドには画像IDではなくてツイートIDが入っているので、画像の呼び出し方はhttps://twitter.com/[TwitterID]/status/[TweetID]/photo/1みたいな感じになってます。

というわけで、かねてから実装したかった画像付きツイートを実現出来ました！めでたい！とりあえずはキャッチコピーみたいなのをTwitter画像用に用意して活用していこうと思ってます。