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

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

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

【新】アメブロの記事内にインスタグラム(instagram)の写真や動画を貼る方法
以前アメブロの記事内にインスタグラム(instagram)の写真や動画を貼る方法という記事を書きましたが、、、instagramのEmbed...
広告

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

アメブロってインスタグラムの写真や動画を記事内に貼り付ける事が出来ないんですね。まずアメブロの記事にはインスタグラムが標準で用意している「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

【新】アメブロの記事内にインスタグラム(instagram)の写真や動画を貼る方法
以前アメブロの記事内にインスタグラム(instagram)の写真や動画を貼る方法という記事を書きましたが、、、instagramのEmbed...
シネマグラフ!あなたの写真が動き出すアプリ「Cinemagraph Pro」
動く写真とも言われている 『Cinemagraph』 (シネマグラフ)ってご存じですか?ニューヨークの写真家Jamie Beckさんが発表し...
PhotoMarks:Macで複数の画像に透かしマークを入れたりリサイズする時に便利なアプリ[PR]
頑張って撮影したお気に入りの写真を知らない人に無断で使われると…やっぱり嫌な気持ちになりますよね。無断使用を防ぐ意味でも画像に「ウォーターマ...
広告
この記事は 31人の方にシェアされています。
あなたの「シェア&高評価」お待ちしてます!
みんなの評価
1いいね!2いいね!3いいね!4いいね!5いいね! (まだ評価されていません)
Loading...

☆を選択するだけ!1番右の星をタップで5つ星評価に!
アメブロの記事内にインスタグラム(instagram)の写真や動画を貼る方法
この記事が面白かったら
「いいね!」しよう!
Facebookで最新情報をお届けします!

ブログ運営者の日常もフォローしてチェック!

このブログを購読する!

feedly 購読 Push7 購読

コメント

  1. ぽんぽん より:

    質問失礼致します
    初歩的な質問でごめんなさい
    safariを使用しています

    ”このブックマークを選択して名前とURLを変更してください。”
    とありますが
    変更のし方がわからないのでが どうしたら良いでしょうか?
    wクリック 長押し等やってみました

    インスタの動画をup出着たら嬉しいです
    良い記事ありがとうございます

  2. lonestar より:

    >ぽんぽんさん
    Macのsafariも同じ様にダブルクリックで変更出来ると思いますよ。
    あと、アメブロの仕様が変更になってこの記事のやり方だと貼れない可能性があります。
    申し訳ございません。