Create HTML-file with all Instagram posts created by Students form the 'Managing Technological Change' course in the summer-term 2020.
Instagram posts are embedded as iframes. Lazy-Loading of iframes for better usage.
Created by: Martin Enders (https://github.com/martinenders)
import pickle
import re
posts_string = """1st Instgram Post 2nd Instagram Post 3rd Instagram Post
https://www.instagram.com/p/B_X0N2ZANYw/ https://www.instagram.com/p/B_X2GNege1r/ https://www.instagram.com/p/B_X3O7KlHnk/
https://www.instagram.com/p/B_aQan1FQku/?utm_source=ig_web_copy_link https://www.instagram.com/p/B_aNHkwlTTe/?utm_source=ig_web_copy_link https://www.instagram.com/p/B_aJo5OFQpw/?utm_source=ig_web_copy_link
https://www.instagram.com/stories/highlights/17879109796596557/ https://www.instagram.com/p/B_XlLUMpJzV/ https://www.instagram.com/p/B_XlN12plBk/
https://www.instagram.com/p/B_W-oPwIu8w/ https://www.instagram.com/p/B_W-nLrITcK/ https://www.instagram.com/p/B_W-l1oIpFA/
https://www.instagram.com/p/B_XAixyHW7b/?igshid=a92yvu3cxb4j https://www.instagram.com/s/aGlnaGxpZ2h0OjE3OTQ1MDc0Mzg0MzQ0MjAx?igshid=dxzhtcn2i55b&story_media_id=2296517231173640819 https://www.instagram.com/p/B_XEeqzq3Ml/?igshid=72lfaerei7ro
https://www.instagram.com/p/B_cjZe5FY2I/ https://www.instagram.com/p/B_cjzlGlo5U/ https://www.instagram.com/p/B_ckUQiF5fj/
https://www.instagram.com/p/B_epLsJBIAd/?igshid=17f2qcbumuzw8 https://www.instagram.com/p/B_e4acshKbu/?igshid=93jr6ym17rpd https://www.instagram.com/p/B_e75mmhffZ/?igshid=1y204u6lbdigu
https://www.instagram.com/p/B_mQznKlpsW/?utm_source=ig_web_button_share_sheet https://www.instagram.com/p/B_mSPRVFp0n/?utm_source=ig_web_copy_link https://www.instagram.com/p/B_mT6-RFUIw/?utm_source=ig_web_copy_link
https://www.instagram.com/p/B_pbKNNjiER/?utm_source=ig_web_copy_link https://www.instagram.com/p/B_p3el_j2NA/?utm_source=ig_web_copy_link https://www.instagram.com/p/B_p5Alsj6WQ/?utm_source=ig_web_copy_link
https://www.instagram.com/p/B_ht-UvnKZA/?utm_source=ig_web_copy_link https://www.instagram.com/p/B_huTTNnXHd/ https://www.instagram.com/p/B_h0Sz3HgrL/
https://www.instagram.com/p/B_sQ_4sqYus/?igshid=1j3dx1hekwhef https://www.instagram.com/p/B_sQtJ6hsrn/?utm_source=ig_web_copy_link https://www.instagram.com/p/B_sP84LKw-r/?igshid=1n435e1lgbz43
https://www.instagram.com/p/B_p7laAnmjQ/?igshid=1cmxzg9nvxhzk https://www.instagram.com/p/B_p70jZH1fB/?igshid=od5wu2hsh5qt https://www.instagram.com/p/B_p8AqXHRhh/?igshid=ihpky8kpg2uq
https://www.instagram.com/p/B_vJZyYqxro/?utm_source=ig_web_copy_link https://www.instagram.com/p/B_vJXVfKRT0/?utm_source=ig_web_copy_link https://www.instagram.com/p/B_vJU1rqVcK/?utm_source=ig_web_copy_link
https://www.instagram.com/p/B_ryAaNhEv-/?utm_source=ig_web_copy_link https://www.instagram.com/p/B_r17UShGhs/?utm_source=ig_web_copy_link https://www.instagram.com/p/B_r3KbchSS6/?utm_source=ig_web_copy_link
https://www.instagram.com/p/B_xvbSDFPQ7/ https://www.instagram.com/p/B_xvbSDFPQ7/ https://www.instagram.com/p/B_zQkcnoveJ/?utm_source=ig_web_copy_link
https://www.instagram.com/p/B_z-J7plH9l/?igshid=3i9wco1e6win https://www.instagram.com/p/B_0A4IxFvhi/?igshid=1uok8j2sxbzpw https://www.instagram.com/tv/B_0TMltFzsg/?igshid=j0xik5pptb66
https://www.instagram.com/p/B_znqf9J2kV/ https://www.instagram.com/p/B_zoVx4JGxA/ https://www.instagram.com/p/B_zwQVLplbH/
https://www.instagram.com/p/B_48wiwgGRw/ https://www.instagram.com/p/B_49G0cAHHn/ https://www.instagram.com/p/B_49ISwgsAw/
https://www.instagram.com/p/B_0reT8B19_/?utm_source=ig_web_copy_link https://www.instagram.com/p/B_0rLEsBxE2/?utm_source=ig_web_copy_link https://www.instagram.com/p/B_0q5PvBAgZ/?utm_source=ig_web_copy_link
https://www.instagram.com/p/B_2eM_CKivM/ https://www.instagram.com/p/B_2taYIBfeR/ https://www.instagram.com/p/B_22V3KIzP9/
https://www.instagram.com/p/B__9oYdhYyI/ https://www.instagram.com/p/B_-2eirhiCX/ https://www.instagram.com/p/B_-Yd4whqwI/
https://www.instagram.com/p/B_4NR_mFTvK/ https://www.instagram.com/p/B_4NgJOlKr1/ https://www.instagram.com/p/B_4No0klB1I/
https://www.instagram.com/p/CADlQqbqJ_5/ https://www.instagram.com/p/CADlD9lKc1_/ https://www.instagram.com/p/CADkx7AKezn/
https://www.instagram.com/p/CAAsQftq_TN/?igshid=1f4flf29fux4u https://www.instagram.com/p/CAA3RsgKGBg/?igshid=pc80vyy57zdx https://www.instagram.com/p/CAA3hS8quCD/?igshid=oky1d6k9aqv6
https://www.instagram.com/p/CAKb3HpK8Ij/?utm_source=ig_web_copy_link https://www.instagram.com/p/CAKcMonKYo2/?utm_source=ig_web_copy_link https://www.instagram.com/p/CAKccJoqlY_/?utm_source=ig_web_copy_link
https://www.instagram.com/p/CAGjgBAgnxQ/ https://www.instagram.com/p/CAIZviignQ8/ https://www.instagram.com/p/CAIZ1MqgZoT/
https://www.instagram.com/p/CANIH44BJyx/ https://www.instagram.com/p/CANIMdjBsjq/ https://www.instagram.com/p/CANQP9cBvN9/
https://www.instagram.com/p/CAFsOCxJN6a/ https://www.instagram.com/p/CAGA3gNppfB/ https://www.instagram.com/p/CAGBH0uJxDS/
https://www.instagram.com/p/CAIDWCAgvUU/?igshid=1ie917lr3p2la https://www.instagram.com/p/CAKUdIPgScs/?igshid=1kzp7a4drrib6 https://www.instagram.com/p/CAM9wSfALzk/?igshid=fgegftae7dup
https://www.instagram.com/p/CAMwxXsCjE_/?igshid=1rdu4bvffpa1b https://www.instagram.com/p/CAMwz-3iGRo/?igshid=ubhblsablqxl https://www.instagram.com/p/CANDcQ4gYp4/
https://www.instagram.com/p/CAKPWgLg1Jl/ https://www.instagram.com/p/CAKcWPOA_jX/ https://www.instagram.com/p/CAKfUPHA76a/
https://www.instagram.com/p/CAKiiW7qdLC/?igshid=1ri1r457i35i6 https://www.instagram.com/p/CALoOiIqGX3/ https://www.instagram.com/p/CAKgK5sqV0j/
https://www.instagram.com/p/CAUnG6WCU_C/ https://www.instagram.com/p/CAUnRmgCR_8/ https://www.instagram.com/p/CAUn33RiaO3/
https://www.instagram.com/p/CANtHPQJv7p/?utm_source=ig_web_copy_link https://www.instagram.com/p/CANtaExpRim/?utm_source=ig_web_copy_link https://www.instagram.com/p/CASTSm7pctD/?igshid=vzzzeruwoq9
https://www.instagram.com/p/CAaCAD0hBk4/?utm_source=ig_web_copy_link https://www.instagram.com/p/CAaGsNyh5X5/?utm_source=ig_web_copy_link https://www.instagram.com/p/CAaJy4lhDK1/?utm_source=ig_web_copy_link
https://www.instagram.com/p/CAVkqgSpwc2/ https://www.instagram.com/p/CAYLNhSpQPI/ https://www.instagram.com/p/CAahwCap95k/
https://www.instagram.com/p/CAYxxB5HOW-/ https://www.instagram.com/p/CAYw7i5HFFE/ https://www.instagram.com/p/CAYx4UXnq_J/
https://www.instagram.com/p/CAdoHDHK2Ak/?utm_source=ig_web_copy_link https://www.instagram.com/p/CAdqAD4Kvh0/?utm_source=ig_web_copy_link https://www.instagram.com/p/CAdroyeqY__/?utm_source=ig_web_copy_link
https://www.instagram.com/p/CAamHTfhUJK/ https://www.instagram.com/p/CAampEmB4rh/ https://www.instagram.com/stories/highlights/17852321978054536/?hl=de
https://www.instagram.com/p/CAihfrPIgMt/?igshid=1kusscexvjli5 https://www.instagram.com/p/CAiilcVox8N/?igshid=1d1m3mrya5pu1 https://www.instagram.com/p/CAii3SBIzdG/?igshid=1p1ottnszwg0u https://www.instagram.com/tv/CAigE_OD97g/
https://www.instagram.com/p/CApmJnUAJ8T/ ; https://www.instagram.com/p/CApmLwbgUS9/ https://www.instagram.com/p/CApoSiVgJJO/ https://www.instagram.com/p/CApo4AmAwSx/"""
# Splitting and cleaning the String from above
post_urls = [x.strip(" ") for x in re.split(" |\n|;",posts_string)]
insta_post_links = [pu.rsplit('?',1)[0] for pu in post_urls if pu]
# Create links for embedding the Instagram posts
insta_post_embed_links = [x + "embed/" for x in insta_post_links if ('/p/' in x) or ('/tv/' in x)]
pickle.dump(insta_post_embed_links,open("Insta-Overview/instagram-post-embed-links-list.pickle","wb"))
p_html = ''
for i in insta_post_embed_links:
p_html += f'<div style="max-width:545px; min-width:355px; min-height: 550px;" class="col"><iframe style="max-width:540px; min-width:350px; min-height: 550px;" class="lazyload" data-loader="iframe" data-src="{i}"></iframe></div>\n'
## iframe definition is based on: https://codepen.io/kerns/pen/mPReGE
website = """<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta property="og:title" content="Instagram Microloarnings zu Technologiemanagement@FAU" />
<meta property="og:url" content="https://martinenders.github.io/fau/mtc2020/" />
<meta property="og:image" content="https://martinenders.github.io/fau/mtc2020/mtc-logo.jpg" />
<meta property="og:description" content="Instagram Microlearnings zu Technologiemanagement erstellt von Studierenden der FAU" />
<meta property="og:site_name" content="Managing Technological Change@FAU" />
<link rel=icon href="mtc-logo.jpg">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<!-- social media share buttons -->
<script type='text/javascript' src='https://platform-api.sharethis.com/js/sharethis.js#property=5ece9b25606f5b0012eb58fb&product=inline-share-buttons&cms=website' async='async'></script>
<title>Managing Technological Change 2020 - IT-Management@FAU</title>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark bg-dark mb-4">
<a class="navbar-brand" href="#">MTC 2020</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="https://www.it-management.rw.fau.de/">Lehrstuhl für IT-Management - Friedrich-Alexander-Universität Erlangen-Nürnberg</a>
</li>
</ul>
</div>
</nav>
<main role="main" class="container">
<div class="jumbotron">
<h1>Managing Technological Change</h1>
<p class="lead">Die folgenden Instagram-Posts wurden von Studierenden im Rahmen der Veranstaltung Managing Technological Change im Sommer/Corona-Semester 2020 erstellt.
Entstanden sind 122 tolle Microlearnings basierend auf den Inhalten der Veranstaltung die vermitteln, wie Unternehmen mit neuen Technologien umgehen und sie gewinnbringend einsetzen können.</p>
<p class="lead">Die Veranstaltung wird vom <a href='https://www.it-management.rw.fau.de/'>Lehrstuhl für IT-Management</a> der Friedrich-Alexander-Universität Erlangen-Nürnberg angeboten.
Ansprechpartner: Martin Enders (martin.enders@fau.de)</p>
<p class="lead">Schaut doch auch mal auf dem <a href='https://www.instagram.com/managingtechnologicalchange/'>Instagram-Account zur Veranstaltung</a> vorbei - dort gibt es noch eine ganze
Menge cooler Storys.</p>
<p class="lead"><a href="https://nbviewer.jupyter.org/urls/martinenders.github.io/fau/mtc2020/Insta-Overview.ipynb">Hier</a> gibts das Jupyter-Notebook mit dem diese Seite erzeugt wurde.
Hier noch eine kleine <a href="https://nbviewer.jupyter.org/urls/martinenders.github.io/fau/mtc2020/get-likes-for-instagram-posts.ipynb">Like-Auswertung</a> der Posts (auch als Jupyter-Notebook).</p>
<p class="lead">Viel Spaß beim ansehen der Posts … </p>
<div class="sharethis-inline-share-buttons"></div>
<!-- <a class="btn btn-lg btn-primary" href="/docs/4.5/components/navbar/" role="button">View navbar docs »</a> -->
</div>
</main>
<div class="container">
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3">
""" + p_html + """
</div>
</div>
<!-- Bootstrap Optional JavaScript -->
<!-- Bootstrap jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<!-- Lazy Loading, depends on jQuery (loaded already above for Bootstrap) -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.lazy/1.7.9/jquery.lazy.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.lazy/1.7.9/jquery.lazy.plugins.min.js"></script>
<script>
$(function() {
$('.lazyload').Lazy();
});
</script>
<a href="https://github.com/MartinEnders/martinenders.github.io"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub"></a>
</body>
</html>"""
# Write Out HTML-File
with open("index.html",'w',encoding='utf-8') as html_out:
html_out.write(website)