SnapWidgetでHPにInstagramの画像を設置する際、直接Instagramのアカウントページにリンクする。

photo-634069_1280

ハイ! リサです。

Instagramの一覧をホームページに設置したいとき、迷ったことはありませんか?
色々調べてみると、「SnapWidget」というHPのサービスが良さそうだったので、やってみました。
ところが、各画像にシェアボタンが表示されるので、もっとシンプルにInstagramのアカウントページへリンクさせたいと思いました。

単純に「SnapWidget」が出力するiframeをHTMLに設置すると、「SnapWidget」のサービスページに飛んでしまいます。
CSS+HTMLで、直接Instagramのアカウントページへリンクするように設置することがこのページの目的です。

「SnapWidget」の使い方については以下のブログ(Netablog)が分かりやすかったので、そちらを参照して下さい。
ブログの右サイドバーにInstagramの画像一覧が配置してありますので、合わせてご参照お願いします。

参照:「〈超簡単〉Instagramの自分フィードをブログやホームページに設置する方法〈SnapWidget〉」Netablog

参照:「SnapWidget」snapwidget.com

考え方

「snapwidget」の画像一覧の上に透明な画像をはって、その画像にinstagramのアカウントページへのリンクを設置します。
以下がコードです(1行目が追加コード)。

<a href="http://instagram.com/account" target="_blank"><img src="../images/sp.gif" alt="" width="225" height="135" style="position: absolute;" /></a>
<!-- SnapWidget Start-->
<iframe src="http://snapwidget.com/in/?u=c3RhcmJ-----ufDQwfDV8-----8bm98N-----lfG9uU3-----8eWVz-----ve=000000" title="Instagram Widget" class="snapwidget-widget" allowTransparency="true" frameborder="0" scrolling="no" style="border:none; overflow:hidden; width:225px; height:135px"></iframe>

やってみてね。

See you !

© oh yeah Steve!

スポンサーリンク
スポンサーリンク
スポンサーリンク

シェアする

フォローする

スポンサーリンク
スポンサーリンク