logo

back DIARY

picture

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

2014年10月19日

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

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

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

要件

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

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

こんな感じになります。

設定

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画像用に用意して活用していこうと思ってます。

シェアしてね

2014年10月19日

, , , , , , , , ,

top TOP
自己紹介
picture
KEISUKE TSUKAYOSHI

UX Strategist / UI Designer.

PORTFOLIO

copyrights(c) Keisuke Tsukayoshi.