Instagram Embed Code - Media Type
All rights reserved; you may not copy any of the code found in this fiddle without permission or attribution to me. To use this, please contact me at [email protected]
HTML
<link rel="stylesheet" href="https://bootswatch.com/flatly/bootstrap.min.css">
<script src="https://www.instagram.com/fist46/"></script>
<main class="col-xs-12">
<div class="form-group">
<textarea data-content="ig-embed-code" name="ig-embed-code" class="form-control" rows="6"></textarea>
<span class="help-block">Only pasting is allowed</span>
</div>
<p data-content="media-type">Media type is <span>photo</span></p>
<div data-content="ig-preview"></div>
<div data-contetn="html-parse"></div>
</main>
CSS
body { padding-top: 15px; }
textarea {
resize:vertical;
max-height:300px;
}
p[data-content="media-type"],
div[data-content="ig-preview"],
div[data-contetn="html-parse"] {
display:none;
}
JavaScript
/*=================================
Instagram Embed Code - Media Type
@author: Adam Azad (@adamzazad)
All rights reserved; you may NOT copy any of the code found in this fiddle without permission or attribution to me. To use this, please contact me at [email protected] or tweet me @adamzazad.
=================================*/
$(function(){
// selectors
window._selectors = {
textareaIGcode : $('textarea[data-content="ig-embed-code"]'),
mediaType : $('p[data-content="media-type"]'),
previewIGembed : $('div[data-content="ig-preview"]')
};
window.mediaType = {
image : 'photo',
video : 'video'
};
// variables
window.api = {
key: '2253563781.137bf98.bd1c3693d2b84f80a7ab8d661f641437'
};
// Bind the textarea
$(_selectors.textareaIGcode).on('keypress paste', function(event){
// Allow only pasting; this is better assuming that users can't write the embed code.
if(event.type != 'paste') { return false; }
// Start the process after 400ms; hacky but required for the paste event
setTimeout(function(){
if( _selectors.textareaIGcode.val().indexOf('instagram-media') > -1) {
mediaTypePreview();
} else {
_selectors.textareaIGcode.val('');
}
}, 400);
});
});
// Main function
function mediaTypePreview() {
// parse the textarea content to get media cotnent
var textHTML = strGetHTML(_selectors.textareaIGcode.val()),
url = textHTML.find('a').attr('href');
// Get media ID
getMediaData('http://instagram.com/publicapi/oembed/?url='+url+'&callback=?', function(mediaOembed){
// Hide current preview
$(_selectors.mediaType).add(_selectors.previewIGembed).fadeOut();
// Do another call to get data about media; including the...