InstagramをWordPressにシンプルに貼れるブックマークレット

Instagramの埋め込みを楽にできるといいですよね。そんなブックマークレットを作りました。

こんにちは、最近Instagramにはまってますカグア！です。よろしければ、わたしのInstagramもフォローしてくださると嬉しいです。

＞＞Yoshihiko Yoshida(@kagua_biz)Instagram写真と動画

今日は、標準の埋め込みコードよりも軽いコードでシンプルなデザインで貼り付けられるブックマークレットを作りましたので、共有します。

ブックマークレットの仕組み

Instagram公式の埋め込みコードは、埋め込み用のHTMLページがあって、それをiframeで表示させる仕組みです。

埋め込み専用のHTMLは、著作者クレジット、フォローするボタンがあり、投稿者への配慮があらかじめなされていますので、安心して使えます。

いっぽうで、公式の埋め込みコードはスタイルを整えるSCRIPTも同梱されています。毎回それらを読み込む仕様になっています。つまり、Instagramを1ページにたくさん貼り付けたようなまとめページを作りますとちょっと抵抗があるかなと。

それと、iframeをうまくレスポンシブ対応にするのはどうしたものかな、ということで今回いろいろと調べて、どうせならということでブログ更新の作業効率化、ということでブックマークレットまで作ったという次第です。

cssを修正する

＞＞レスポンシブサイトにiframeでコンテンツを組み込む – ワザノバ | wazanova
こちらを参考にさせていただきました。ありがとうございます。

ようは、iframeをdivでラップして、そのdivをレスポンシブにすれば良いっぽいです。

WordPressでスマホ用のcssを用意していいる人はそちらも修正かもです。

まず中に入れるiframe。

.instaembed iframe {
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
}

あと、それをラップするdivかなにかに、relative。ただこれがスマホ対応とかが難しくて、paddingが75%というのは、結構調整しました。ほかのブログでもこのあたりはハードコーディングでした。この数値は、みなさんのブログで調整してください。あと、正方形のみ対応です。横長や縦長はまた数値が変わります。

p.instaembed{
	position: relative;
	width: 100%;
	padding: 75% 0 50% 0;
}

Instagram貼り付けを効率化するブックマークレット

javascript:(function(){var ele=document.createElement("textarea");var b=location.href;if(b.indexOf("/?")>0){var a=b.indexOf("?");b=b.replace(b.substr(a),"");}var bb='<p class="instaembed"><iframe src="'+b+'embed" frameborder="0" height="540" width="540" scrolling="no" style="margin-bottom:20px"></iframe></p>';ele.style.width = "100%";ele.value=bb;document.body.insertBefore(ele, document.body.firstChild);ele.focus();ele.select();ele.ondblclick = function (){ele.parentNode.removeChild(ele);}})()

class名や、heightやwidthなどのサイズやタグ部分は適当に変えてください。

インスタ画像を表示している状態で、ブックマークレットをポチると、コピれるコードが出ます。

Instagramを貼り付ける時の注意

Instagramは芸能人やモデルさんもたくさん投稿しているため、肖像権や意匠権に気をつけたほうがよいです。

いくら、インスタ投稿で貼り付け可能じゃん、といってもトラブルが起きたら個別に解決ですから、面倒ですよ。

そういう点では、もともと、#publicdomain というハッシュタグをつけているInstagramであれば、問題ないかと思います。自分でパブリックドメインです、と意思表示していますので。

ただ、人様の画像を勝手にリグラムして、パブリックですとうたっているアカウントもあるので、必ず裏はとりましょう。
＞＞#publicdomain Instagram写真と動画

投稿者に配慮しながら貼り付ける

Instagramはおしゃれな画像が多いので、ネットでもよく見るようになりました。

いっぽうで、クレジット表示やリンク、フォローするボタンなど、Instagramが公式に提供している配慮を「あえて」削っているサイトも多く見られるようになってきました。Instagramへ行く前に広告ページを経由させるものまであります。

自社サイトから逃したくない、デザインを損なうなど、それはあくまで自分たちの都合です。Instagramや投稿者の思いを軽視しすぎじゃありませんでしょうか（実際このあたりは、芸能プロダクションに確認したこともあるので、それもいつか記事にします）。

そういう意味では、おそらく本人は想定していないけれどInstagram公式の貼り付け方をする、が最大公約数なのかなと思っています。

投稿者は、まさか自分の画像がブログのキャッチに使われて、挿絵の一部として利用されているなんて、あまり気持ちの良いものではないと思います。

そうは言っても投稿してるんだから情弱なのでは、という意見もあるかと。でもでは、弱者だとして、その気持は踏みつけていいのかというのはまた別問題だと思うのです。

ですので、今回つくりましたブックマークレットはそういう配慮をして、最大限Instagramの仕様に準拠したつくりにしたつもりです。投稿したからといって、著作権が投稿者から消えるわけではないんですよね。

＞＞日本では大麻を密輸するより著作権侵害の方が重罪なんですってよ | | 【百漫画】広告漫画家百万のウェブサイト

掲載するほうも、自分たちのリスク管理として「日本では大麻を密輸するより著作権侵害の方が重罪」ということは、知っておいたほうが良いと思います。

まとめ

Instagramはほんとうにおしゃれな画像が多いですよね。おたがいマナーを守って、ネットを楽しみたいものです。

インスタグラム・マーケティング入門 電子書籍: 山田智恵

Amazonで詳しく見る

InstagramはさまざまなTIPSがあって、始めますとハマり度が半端ないです。ぜひみなさんも面白いトピックがありましたら共有させてくださいね。

しかし、ほんとみんなInstagram画像おしゃれですよね。

・　・　・　・　・

＞＞安っ！アマゾンで半額以下になっている食品タイムセール
セール特設ページを見る