*

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

公開日: : 最終更新日:2018/09/29 WordPress , , , , ,


LINE facebook twitter URLコピー
B! pocket Evernote 楽天


ブックマークレット

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

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

インスタグラム・マーケティング入門 電子書籍: 山田智恵: Kindleストア
Amazonで詳しく見る

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

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

「新しいiPhone、ほしいなー。」
  • このエントリーをはてなブックマークに追加
  • Pocket

Profile



Yoshihiko Yoshida
メディア運営業界23年目。Googleアナリティクス公式コミュニティ・アンサリスト最高ランク「レジェンド」国内初獲得。「マツコの知らない世界」Googleマップ案内人TV出演。Googleストリートビュー認定フォトグラファー。教育システム情報学会会員。元立教大学非常勤講師。主な著書「Googleアナリティクス基礎講座」(技術評論社)。趣味はデジカメとゲームとパン作り。>>もっと読む

Instagram

◆代表者略歴 ◆受賞歴
◆おもな著書 ◆TV出演歴
◆新聞掲載歴 ◆雑誌/連載歴
 <<お問い合わせはこちら>>

Facebook

このブログをRSS購読しよう!(無料)

follow us in feedly

よろしければ「いいね」して下さい!

 
PAGE TOP ↑