変デジ研究所

トイデジ カメラ関連商品レビュー 撮影スポット

アメブロにインスタグラムの写真や動画を貼る方法

アプリケーション

アメブロの記事内にインスタグラム(instagram)の写真や動画を貼る方法

投稿日:2014年6月6日 更新日:

※現在は普通に「Embed」から取得したソースを貼ればアメブロにinstagramの動画や写真を貼れます。この記事は古くなっています。新しい記事をご覧下さい。

アメブロにインスタグラムの写真や動画を貼る方法

アメブロってインスタグラムの写真や動画を記事内に貼り付ける事が出来ないんですね。まずアメブロの記事にはインスタグラムが標準で用意している「Embed」タグが使えません。iframe(インラインフレーム)が使えないんです。

アメブロがインスタグラムと連携してくれたらいいと思うんですけど、、、とりあえず前に書いたJavaScriptをアメブロ用に変更してみたのでコレを使えばアメブロにインスタグラムの写真や動画を貼る事が出来ます。

アメブロでinstagramを使う下準備

まずはアメブロにインスタグラムの写真や動画を貼るための下準備をします。「フリープラグイン」を使用してスクリプトタグが使えるようにします。ブログ管理画面左サイドバーから「プラグインの追加」〜「フリープラグイン」を選択します。

アメブロ インスタグラム

以下のスクリプトを「フリープラグイン」タブを選択後コピペしてください。

<script src="http://www.google.com/jsapi"></script>
<script>google.load('jquery','1')</script>
<script src="http://hana.poche.jp/wazameba/js/waza11.js"></script>
<script>
  $(function(){prohibitedTagsUse();});
</script>

テキストボックス内にペーストして保存します。

アメブロ フリープラグイン

次にサイドバー配置設定から「フリープラグイン」を「使用する機能」にドラッグ&ドロップで配置します。

アメブロ サイドバー

アメブロにinstagramを貼るブックマークレット

次にアメブロの記事内にインスタグラムを表示するコードを表示するためのブックマークレットを使います。まず下の「変デジ研究所」というリンクをブックマークバーまでドラッグすると、そこに「変デジ研究所」というリンクボタンができあがります。

変デジ研究所

このボタンをクリックすれば、どのWebページを表示していても変デジ研究所に移動できます。これをベースにブックマークレットを作ります。Firefoxだと「すべてのブックマークを表示」から表示させます。

Firefox ブックマークレット

ブックマークツールバーという場所に先ほどのリンクがあります。

Firefox ブックマークレット

このブックマークを選択して名前とURLを変更してください。

instagram 動画 アメブロ

「instagram動画」とか「インスタ:アメブロ」など分かりやすい名前に変更してください。URLは以下のコードをコピペしてください。

javascript:(function(){function%20o(s){var%20d=window.open().document;d.writeln('<textarea%20rows=15%20cols=80>'+s+'</textarea>');d.close()}var%20prefix='';var%20suffix='';var%20contents=document.title;var%20target='_blank';o(prefix+'<div%20class="createTag"><!--<[iframe%20src=\"'+location.href+'\embed"%20width="400"%20height="498"%20frameborder="0"%20scrolling="no"]><[/iframe]>--></div>'+suffix);})();

あとはinstagramで載せたい動画を選択してブックマークレットをクリックすればコードが表示されるのでアメブロの記事に貼り付けるだけです(新エディタの場合はHTML表示)

instagram(PC)からのコード貼付方法

まずは自分のinstagramを表示させます。その中からアメブロに貼り付けたい写真や動画を選択します。

instagram

instagram アメブロ 連携

ここで先ほど作ったブックマークレットをクリックします。すると別ウィンドウでコードが表示されます。

アメブロ いんすた 貼付

このコードをアメブロの記事編集画面に貼り付ければ記事にinstagramの写真が表示されます。もちろん動画もオッケーです。WordPressでブックマークレットのアンカーテキスト表示が分からなくて、、変デジ研究所のリンクを作ってURLの変更をしてもらうという面倒な事になっていますが、、、とりあえずアメブロにinstagramの写真を表示したいという方の参考になれば。最後に自分もinstagramをやっていますので参考になったら是非フォローを!

リンク:monestargram on Instagram

※この記事を読んでアメブロにinstagramの動画が貼れたというlomomariaさんが記事を書いてくれました!
リンク:「アメブロにインスタグラムの写真や動画を貼る方法」を試してみたの巻|Rainbow Moon Stone

広告

この記事が面白かったら
いいね ! をお願いします。

Twitter で
この記事は 28人の方にシェアされています。
「シェア&高評価」よろしくお願いします!
みんなの評価
1いいね!2いいね!3いいね!4いいね!5いいね! (まだ評価されていません)
Loading...

☆を選択するだけ!1番右の星をタップで5つ星評価に!

-アプリケーション
-

Copyright© 変デジ研究所 , 2017 All Rights Reserved.