Skip to content
2012/10/15 / Javelina

WordPressで自分のInstagram(Statigram)の写真を取得・表示する

メモ。前回の記事に関連して、自分のInstagram(厳密にはStatigram)の写真を取得・表示するコードです。

Instagramは公式のWebAppが用意されていないので、PCのブラウザから利用(TLの閲覧、コメント・返信、タグ付など)する場合は、現状サードパーティー製のWebサービスを使います。以前はWebstagramというサービスを使用していました。Webstagramにはウィジェット作成ツールが搭載されているので、このツールを使ってサイドバー等に自分の投稿した写真を張り付けることができます。

後に、管理画面がより使いやすい(と個人的に思う)Statigramに乗り換えた所、こちらはウィジェット作成ツールがなかったため、自分でコードを書くことにしました。

今回もwp_remote_get()を使用。Statigramはフィードを発行してくれるので、それを利用します。
 

<?php 
function get_igphotos(){
    $transient_key = md5('igphotos');
    if(false === ($igphotos = get_transient($transient_key))){
		$ig_id = 'InstagramのID';/*自分のID*/
		$limit = 9;/*取得したい件数*/
		$term = 1;/*キャッシュさせたい時間。単位:hour*/
		$response = wp_remote_get('http://statigr.am/feed/' . $ig_id);
		if(!is_wp_error( $response ) && $response["response"]["code"] === 200){
			$ig_body = simplexml_load_string($response["body"]);
			$i = 0;
			foreach($ig_body->channel->item as $item){
				$i++;
				$igphotos .= strtr($item->description,array('_7.'=>'_5.'));/*写真をサムネイルサイズに変更*/
                if($i == $limit) break;
			}
			set_transient($transient_key, $igphotos, 60*60*$term);
		}else{
			$igphotos = '';
		}
	}
	return $igphotos;
}
?>

上記をfunctions.phpに書き込んで、あとは好きな場所で

<?php echo get_igphotos();?>

これでOKです。

わざわざPHPを書くのが面倒な方で、「PCブラウザから閲覧やコメントはしないけど、ウィジェットは作りたい」もしくは「閲覧とウィジェットは別サービスでも構わない」という方は先述したWebstagramもいいですが、単にウィジェットを作成するだけならSnapWidgetがおすすめですよ。SnapWidgetはアプリ認証なしで即ウィジェット作成ができるので非常にお手軽です。
 

広告

5件のコメント

コメントする
  1. azusa / 6月 16 2013 3:12 pm

    こんにちは。instagramの画像取り込み、いろいろ調べましたが一番わかりやすくやりやすかったです!ありがとうございます!ちなみに画像サイズの変更はできるのでしょうか?教えていただけたら嬉しいです。よろしくお願いします!

  2. Javelina / 6月 17 2013 12:41 am

    azusaさん

    コメントありがとうございます!
    画像サイズの変更ですが、cssでサイズを指定するだけでよいのでしたら、例えば出力する画像群を

    <div id="instagram">~</div>

    などで囲ってしまい、その上スタイルシートで

    #instagram a img {
    width:任意の横幅;
    height:任意の縦幅;
    }
    

    と書けば反映されるはずです。

    htmlのwidth及びheightで指定したい場合は、記事内のコードの

    $igphotos .= strtr($item->description,array('_7.'=>'_5.'));/*写真をサムネイルサイズに変更*/
    

    の部分を、

    $igphotos .= strtr($item->description,array('_7.'=>'_5.','img src='=>'img width="任意の横幅" height="任意の縦幅" src='));
    

    に変えれば任意のサイズで表示されます。

    但し、どちらの場合でも画像そのもののサイズではなく表示サイズのみの変更ですのでご注意ください!

  3. azusa / 6月 17 2013 11:14 am

    Javelinaさん、返信ありがとうございます!早速やってみましたら変更できました!!!非常に助かりました〜!ありがとうございました!ブログこれからも参考にさせて頂きますね。

  4. Javelina / 6月 18 2013 9:24 am

    azusaさん

    お役に立てたのなら何よりです!
    最近こちらのブログは若干放置気味ですが少しずつ再開していこうと思います(^▽^)

Trackbacks

  1. WordPress.comで、Instagramの画像の埋め込みができるようになった « Just Another Life

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中

%d人のブロガーが「いいね」をつけました。