Ever wanted a simple and quick way to extract the primary details from an Instagram photo to put it on your own website?
The following javascript-based bookmarklet is courtesy of Tantek Çelik as an Indieweb tool he built at IndieWebCamp NYC2:
If you view a single photo permalink page, the following bookmarklet will extract the permalink (trimmed), photo jpg URL, and photo caption and copy them into a text note, suitable for posting as a photo that’s auto-linked:
javascript:n=document.images.length-1;s=document.images[n].src;s=s.split('?');s=s[0];u=document.location.toString().substring(0,39);prompt('Choose "Copy ⌘C" to copy photo post:',s+' '+u+'\n'+document.images[n].alt.toString().replace(RegExp(/\.\n(\.\n)+/),'\n'))Any questions, let me know! –Tantek
If you want an easy drag-and-drop version, just drag the button below into your browser’s bookmark bar.
Editor’s note: Though we’ll try to keep the code in this bookmarklet updated, the most recent version can be found on the Indieweb wiki thought the link above.
@ChrisAldrich … +++ … your choice of sample subject image there …
@ChrisAldrich Your button didn’t seem to be draggable in the browsers I tried. I don’t have Firefox on here so I haven’t tried that.
@TechLifeWeb, thanks! I had some sanitization (on publish) that seemed to break it for some browsers. Should be fixed now.
@TechLifeWeb, thanks! I had some sanitization (on publish) that seemed to break it for some browsers. Should be fixed now.
At #IndieWebCamp NYC2 I wrote an Instagram Single Photo Bookmarklet to more easily post from IG to my site: https://indieweb.org/Instagram#Single_Photo_BookmarkletIf you use Instagram as a convenient way to post photos from your mobile device (e.g. I use my iPod touch) to the web, but want to re-use those elsewhere (like on your own site), you may find this bookmarklet useful.In one step it will copy minimal URLs for the image .jpg, the permalink of the Instagram post, and the photo caption, replacing any series of IG-style “.(linebreak)” characters with a single linebreak.It’s already simplified my own photo posting user-flow, making it faster by cutting out nearly a half-dozen previously separate steps. This increased speed (less time) to post a photo post makes feel more empowered to post more photos on my own site.I added it to the IndieWeb wiki as an easy way to quickly opensource it with a CC0 license, much easier than going through all the ceremony (AKA overhead) of creating a git repo on Github, creating a new file, saving, committing, pushing, pulling, etc. etc. (the very thought makes me wonder why so many developers are so enamored of so much extra work / steps just to accomplish a simple publishing/sharing task. It’s almost as if they have a greater desire for the comfort of ceremonial steps instead of saving the time and getting more done — likely worth a separate blog post).I got it working half-way through IndieWebCamp NYC2 day 2 “hack day”, posted it on the wiki.Within moments of doing so, @aaronpk tested it on Chrome and saw that it worked!Soon after that, Chris Aldrich blogged it as well and provided a drag-and-droppable version in his blog post:http://boffosocko.com/2016/08/28/instagram-single-photo-bookmarklet/Since then I made one minor bug fix this morning (found while selfdogfooding it and using it to publish photos to my site), and one minor UI update to the prompt text. I updated the wiki accordingly.In addition I’ll share it here on my own site:javascript:n=document.images.length-1;s=document.images[n].src;s=s.split(‘?’);s=s[0];u=document.location.toString().substring(0,39);prompt(‘Choose “Copy ⌘C” to copy photo post:’,s+’ ‘+u+’n’+document.images[n].alt.toString().replace(RegExp(/.n(.n)+/),’n’))There’s certainly more I can do to improve my photo posting user flow, and my personal site publishing user flow in general, but this was a nice step forward that I’m already personally benefitting from, and if you use Instagram to post photos, but want to also post them to your own site, you may find this bookmarklet useful too.
This Article was mentioned on kimberlyhirsh.com
Instagram is a popular photo and short video hosting silo most well known for square photos that have been processed with an image filter.