instagram-review-page-exmaple.html

## instagram-review-page-exmaple.html
<!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>
	<!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>