This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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