2015年8月20日

Twitterの投稿を「ショップからのお知らせ」にする - Twitter API編

ネットニュースを眺めていると、こんな記事をみつけました。
「minne」に出品された吉幾三さん手作りの11万円の壺、ついに売れる - ITmedia ニュース

TV CMもバンバンやっているのでご存知の方も多いと思いますが、minneとは、クリエイターにWeb上のギャラリーを貸して、ハンドメイド作品の販売を仲介するサイトです。
ハンドメイドにターゲットを絞っているところが、面白いなぁと感心します。
上の記事も、プロモーションの一環だったりしてね。




0.「ショップからのお知らせ」はどこで書く?


カラーミーショップ上の多くのお店では、お客様への告知として「お知らせ/ニュース/新着情報」などのスペースを設けています。

無料テンプレートを見ると、管理画面の「ショップ作成>ショップ情報設定」の「お知らせ」を使っています。これが一般的だと思います(HTMLタグも入りますし、枠内の文字数制限も緩そうにみえます)。

その他には、ショップ・ブログのRSSからタイトルを取得して表示させているショップもあります。
Twitterのウィジェットをサイドバーに貼っているショップも多いですよね。

Twitterのウィジェットで機能十分ですが、サイトデザインを優先してページにしっくりくる感じで埋め込みたい場合などは、Twitter APIを試してみるのも良いかもしれません。

Twitterには、カラーミーショップ同様に、APIが用意されています。
利用するための手順も、だいたい似たようなものなので、カラミーショップAPIを使ったことがあれば、それほど理解に困らないと思います。
Twitter APIを利用するための手順は、親切丁寧に解説が書かれているサイトがありましたので、下記リンクをご参考にどうぞ。

【参考】PHPでOAuth認証して自分のつぶやきを表示する [Twitter API 1.1 対応版] | webOpixel


カラーミーいじりたおし的には、すぐに試せるPHPソースコードとカラーミーショップ側のコードを置いておきます。

1. コード

1.1 twitter.php

<?php
require_once("twitteroauth.php");

$consumerKey = "xxxxxxxxxxx";
$consumerSecret = "xxxxxxxxxxx";
$accessToken = "xxxxxxxxxxx";
$accessTokenSecret = "xxxxxxxxxxx";

$twObj = new TwitterOAuth($consumerKey,$consumerSecret,$accessToken,$accessTokenSecret);
$req = $twObj->OAuthRequest("https://api.twitter.com/1.1/statuses/user_timeline.json", "GET", array("count"=>"5"));
$tw_arr = json_decode($req);
$str ="";
if (isset($tw_arr)) {
    foreach ($tw_arr as $key => $val) {
        $str = $str . '<b>' . date('Y/m/d H:i', strtotime($tw_arr[$key]->created_at)) . '</b>';
        $str = $str . '<br />';
        $str = $str . preg_replace("/(https?|ftp|news)(:\/\/[[:alnum:]\+\$\;\?\.%,!#~*\/:@&=_-]+)/","<a href=\"\\1\\2\">\\1\\2</a>",$tw_arr[$key]->text);
        $str = $str . '<br />';
        $str = $str . '<hr />';
    }
} else {
    $str = 'ニュースはありません。';
}
$str = str_replace(array("\r\n","\r","\n"), '', nl2br($str));

//出力用配列にセット
$output = array(
    'str' => $str
);

header("Content-Type: text/javascript; charset=utf-8");
echo $_GET['callback'] . '(' . json_encode($output). ')';

1.2 カラーミーショップ側の HTML+jQuery

<div id="header_list">読み込み中...</div>
<script type="text/javascript">
    $.getJSONP = function(url,callback,param) {
        return $.ajax({
            url:    url,
            dataType:"jsonp",
            success:callback
        });
    }
    $.getJSONP("http://www.hogehoge.com/twitter.php", onDataHandler)
    function onDataHandler(response) {
        $("#header_list").html(response.str);
    }
</script>

2. 簡単な説明

PHPのソースコードは、変なところに改行が入っていますので、ご注意を。
created_atが投稿日時、textがつぶやきの内容。
上述の参考サイトに詳しく解説がされています。まずはそちらからどうぞ。