はてなブログへのInstagram写真の埋め込み方

☆【追記】

★2014/11/28

やっぱりinstagramは表示されたりしなかったりするし、embed指定にするとヘッダ・フッタ表示がウザイという事で、はてなブログにおいてオススメの画像ストレージサービスの優先度は、現状以下と思ってる。

はてなフォトライフ

google+フォト

Flickr

誰かの写真を引用させてもらう時に使用

Flickrの場合、表示されなかった事はまだ経験無し

無料プランだと、はてなフォトライフ"アップロードサイズは一ヶ月中30MB制限があるので、はてなフォトライフには綺麗な写真やイラストを表示させたい時に利用するのみとし、iPhoneやAndroid端末で取った写真はgoogle+のアップロードサイズ制限で自動アップロードしたものを利用するのが良いと思われます。
googleさんの画像ストレージですから安定性はお墨付きでしょうし、アップロードサイズ制限(フルサイズ制限)にしておけば4M画像以下にリサイズされるものの、google driveの容量を食わないので無制限でアップロードが可能になります。無制限最高！
google+のメニューからフォトを選択する事でアップロードした画像の管理が可能になりますし、自動でgifアニメ作ってくれたりする機能も楽しいです。
いやぁgoogleさんマヂすげぇよ。

★2014/08/07

embedじゃなくて、普通にinstagram貼り付け機能で割りと表示されていたので気にせず使っていたのですが、ちょっと前からiOS版の公式twitterアプリの内部ブラウザでブログ記事を表示すると、instagramが表示されない現象に遭遇しました。
iOSデバイスの標準ブラウザ(safari)で表示すると問題なく表示されるのですが、原因は不明です。
前までは表示されていたのに…。
ちなみにfacebookアプリの内部ブラウザだとちゃんと表示されるので、内部ブラウザの実装方法によって挙動が異なると予想されます。ほんとマジなんなんだろう。

写真については素直にはてなフォトライフ経由で張り付けるのが良さそうです(><;)
twitterカードへの画像反映もされますし。

とはいえ、過去記事のinstagramの写真を全てはてなフォトライフ経由に置き換えるのも大変なので、エントリーのヘッダ部に赤字でエクスキューズを付けておきました。

☆2013/09/01
当方、Chromeブラウザではてなブログの投稿とかしているのですけれど、Instagram貼り付け機能によるURLが以下のように変化していました。

-以前：
--[http://instagram.com/p/xxxxxxx/:image=http://xxxxxx.xx.amazonaws.com/xxxxxx.jpg]

-現状：
--[http://instagram.com/p/xxxxxxx/:image=http://instagram.com/p/xxxxxx/media/?size=l]
--[http://instagram.com/p/xxxxxxxx/:title=xxxxxxx]

何故か、現状はタイトルのリンクも一緒に貼り付けられるようになっていました。
"タイトルリンク要らないよ？"と思い削除していたのですけれど、ふとスマートフォン用のブログ表示を見て見るとInstagramの画像が表示されていないじゃないですかっ！！(この時、たまたま表示されなかったみたい)
調べてみると、以前のURLであれば表示されるのですが、現状のものであるとスマフォには表示されなくなっているようです。
但し、タイトルのリンクは表示されるので表示されない場合はリンクをクリックして欲しいという事なのだろうか…？

恐らく、以下の更新のタイミングあたりでURLが変化していたのかな？と予想。
http://staff.hatenablog.com/entry/2013/07/25/183201
記事内容を参照するに、Instagramの動画の埋め込み機能に対応した際の副作用なのかなぁ…よくわかりませぬ。

んで、Instagram埋め込み写真がスマフォで表示されないというのは何とか回避したいため、ちょっと試したのですが、とりあえず、URLを以下のように変えると表示されました。

-変更前：[http://instagram.com/p/xxxxxxx/:image=http://instagram.com/p/xxxxxx/media/?size=l]
-変更後：[http://instagram.com/p/xxxxxxx/:embed]

※動画のInstagram貼り付けでは、最初から上記の"embed"の形式になっています

embed指定にすると、以下のように表示されます。(ヘッダとフッタにInstagramの情報が…)

★2013/10/18

2012/10/17 に公式でInstagram貼り付け機能が追加されましたので、
以下記事をご参照ください。
Instagramの写真をブログに貼ろう！編集サイドバーに「Instagram貼り付け機能」を追加しました - はてなブログ開発ブログ

☆以下、元記事

こんにちは。
deokisiです。

もともと、はてなブログにはInstagram写真の埋め込み出来るんですが、Instagram側のURLが変更になっていたので、ちょっとドメインをいじらないと埋め込まれないようになっていました。
なので、この際にInstagram写真の埋め込みについてまとめておきまする。

○Instagram写真のはてなブログへの貼り付け方(deokisi流)

Listagramでログインする
- http://listagr.am/ってゆう、InstagramのWebサービスにログインします
- Instagramで使っているアカウントでログインです
Listagramでお好みの写真をクリック
- "View on Instagram"ってリンクがあるのでクリック
Instagramで表示されたWebページのURLをコピー
- こんな感じのURLです "http://instagram.com/p/XXXXXXXXXX/"
- (XXXX..の部分は文字列が入ります)

んで、はてな記法の"[URL:embed]"を使ってURL部分をさきほどのコピーしたURLを貼り付けます

・・・と、ココまでの方法で前までできてたのですが、Instagramのレイアウト変更に伴ってURLも変更があったためこのままだと画像表示がされませんので、以下のようにドメインを変更します。

instagram.com
↓
instagr.am

(例)

これで表示できまする。
※2012/07/08時点

Instagramの写真がブログに貼り付けれるのって凄い便利なので、個人的には重宝してます
(＾＾)

であであ

†でおきしブログ†

ウナギ食べたいヽ(•̀ω•́ )ゝ✧