ウェブ、ショウジン

Twitterでの投稿を外部サイトで表示する(MagpieRSSを使って)

2011-8-22
Category
PHP

某グループ展の告知用Twitterアカウントでのtweetを、Twitterのウィジェットを使わずに外部サイトで表示する必要があったので、そのときのメモ。

設置が簡単なので普段なら仕事でもそれ以外でもたいていはウィジェットを使うのですが、それだとデザイン面でのカスタマイズがそう好きには施せないので今回はRSSのParserとして有名な(これまでにも実際何度もお世話になってます)Magpie RSSを使いました。

Magpie RSSの設置、利用についてはMagpieRSSを使って外部サイトのfeedを読み込むを参照のこと。

デザインでは、ウィジェットにはある、ウィジェット下部のtwitterのロゴ(join the conversation)や上部のアカウント名(プロフィールアイコン含む)やなんかが不要で、必要なのは日付と投稿内容(文字数制限した上で)だけ。

スクリーンショット(2011-08-22 17.53.30)

投稿内容の文字数制限以外は前述の記事で問題なく実装できるかと思います。(もっとスマートにも出来るのでしょうが、ワタクシにはそれはわかりません)

<?php

// 必要モジュールの読み込み
require_once("./rss_fetch.inc");

// キャッシュは5分に設定
define("MAGPIE_CACHE_AGE", 60*5);

// キャッシュ保存ディレクトリ指定(事前にcache/ディレクトリを作成しておく)
define("MAGPIE_CACHE_DIR", "cache/");

// エンコーディングの設定
define("MAGPIE_OUTPUT_ENCODING", "UTF-8");

// 読み込むfeedのURL
$url = "http://twitter.com/statuses/user_timeline/twitterのアカウント名.rss";
$rss = fetch_rss($url);

// 表示する件数の上限
$max = 8;

$i=1;


foreach ($rss->items as $item) {

    // 記事本文へのリンクURLを取得
	$href = $item['link'];

	// 投稿内容の抜粋に文字コードUTF-8を指定
	$content = mb_convert_encoding($item['description'], "UTF-8", "auto");

	// 文字数制限して、末尾に三点リーダーを追加するように指定
        // 丸めた文字列の後に何も追加しない場合も「""」は必要。でないと文字化けする場合がある
	$content = mb_strimwidth($item['description'], 0, 83, "…", "UTF-8");

	// 記事の投稿日時を取得(xmlのpubDate部分)
	$date = $item["pubdate"];

	// xmlで取得した投稿日時をdate関数を使って整形
	$date = date("m/d",strtotime($date));

	// 取得した各要素をhtmlで出力
	echo "<dl>";
	echo "<dt>$date</dt>";
	echo "<dd><a href=\"$href\">$content</a></dd>";
    echo "</dl>";

	// ループ処理ごとに$iの値に1を足す
	$i++;

	// $iの値が$maxの値を超えたらループ終了
	if($i > $max){break;}
}

?>

mb_strimwidthを使っての文字数制限は半端な数になってますが、ブラウザで確認してこうなりました。バイト数での制限がかけられるということなのですが、なんかそうでもなさそうな気もしたりしてからに。(まぁそんなに厳密でなくて今回はいいので無問題ということで)

あとはCSSでデザインを適用すればオーケー。

と思ったらだが、しかーし!!!

こうやってrssをパースしてというやり方だと、投稿内容の冒頭にtwitterのアカウント名が「アカウント名:」という形で表示されてしまいます。(とうことを今回初めて知りました)

こんなふうに

スクリーンショット(2011-08-22 18.15.26)

これだとtweetごとに何度も同じ文字列が表示されてうるさいです。デザインカンプにも外れますし。ということで、これを削除します。

CSSを使ったり、いろいろやり方はありそうですが、とりあえず手っ取り早くjQueryのreplaceで対応することにしました。

jQuery本体を読み込んで

<script language="JavaScript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js" type="text/javascript"></script>

htmlのhead内に

<script type="text/javascript">
	$(document).ready(function(){
		var el = $('#info_top'); // 該当の文字列を含む親ブロックのIDを指定
		el.html(el.html().replace(/アカウント名:/ig, "")); // 置換する文字列は指定しない
	});
</script>

を追加。

とりあえず現状ではこれで対応できてますが、「アカウント名:」という記述がこの部分(tweet)以外で表示されていたりするとそこにも影響がでてしまうので、そのへんは必要に応じて工夫が必要なんだろなと思いました。今回はそこは問題なさそうですが。

今回は以下のページが参考になりました。(文字数制限のところ)
ありがとうございました。

PHPでRSSを表示させる

Categories

Tag Cloud

AdMob Android Apache centos CodeIgniter EC-CUBE facebookアプリ facebookページ feed Firefox Flash google googleanalytics htaccess iPad iPhone JavaScript lamp mobile nginx ogp pear php plugin rollover rss sendmail setting smarty ssh Titanium Mobile Titanium Studio tutorial ubuntu vim VirtualBox vmware vps Windows WordPress xampp youtube さくらインターネット アクセス解析 カスタム投稿