Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Instagram Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="https://facebook-example.uploadcare.com/fonts.css">
<link rel="stylesheet" href="https://facebook-example.uploadcare.com/app.css">
</head>
<body>
<div class="content">
<h1>Instagram Example</h1>
<p>
Uploadcare allows Instagram users easily export their photos or videos and use
them somewhere else, e.g. import to 3rd party services like printing shops.
We use Uploadcare Widget to allow our users to upload Instagram photos from using accounts and our Instagram Basic Display API Application credentials.
</p>
<h2>How to review</h2>
<ol>
<li>Click on the "Choose a file from Instagram" button.</li>
<li>Click on the "Connect to Instagram" button.</li>
<li>Allow an access to your photos.</li>
<li>Choose any photo or video.</li>
<li>When a photo or video is downloaded from Instagram,
we give the link to exported file in "Result" section.</li>
</ol>
<p>
<h2>Widget</h2>
<input type="hidden" role="uploadcare-uploader" name="my_file" />
</p>
<p>
<h2>Result</h2>
<span id="resultUrl">Choose image or video in the widget to see result URL</span><br>
<span id="resultPreview"></span>
</p>
</div>
<script>
UPLOADCARE_PUBLIC_KEY = "%YOUR_PROJECT_PUB_KEY%";
UPLOADCARE_TABS = 'instagram_graph_api';
UPLOADCARE_LOCALE_TRANSLATIONS = {
buttons: {
choose: {
files: {
one: 'Choose a file from Instagram',
other: 'Choose files from Instagram'
},
images: {
one: 'Choose an image from Instagram',
other: 'Choose images from Instagram'
}
}
}
};
</script>
<script src="https://facebook-example.uploadcare.com/uploadcare.full.min.js" charset="utf-8"></script>
<script>
var widget = uploadcare.Widget('[role=uploadcare-uploader]')
widget.onUploadComplete(function(info) {
var $resultUrl = document.getElementById('resultUrl')
var $link = document.createElement('a')
$link.href = info.cdnUrl
$link.target = '_blank'
$link.innerText = info.cdnUrl
$resultUrl.innerHTML = ''
$resultUrl.appendChild($link)
var $resultPreview = document.getElementById('resultPreview')
if(info.isImage) {
$resultPreview.innerHTML =
'<img src="' + info.cdnUrl + '-/preview/50x50/" alt="image preview" /><br>' +
'<img src="' + info.cdnUrl + '-/preview/100x100/" alt="image preview" /><br>' +
'<img src="' + info.cdnUrl + '-/preview/200x200/" alt="image preview" /><br>' +
'<img src="' + info.cdnUrl + '-/preview/300x300/" alt="image preview" /><br>'
} else {
$resultPreview.innerHTML = ''
}
})
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.