Upotettu koodi
^^^^^^^^^^^^^^

Pienoisohjelmaa "Upotettu koodi" käytetään lisäämään vapaavalinnaista html:ää tai 
javascriptiä dokumenttiin.

Ohjelmaa voidaan käyttää esim. näyttämään Twitter-virtaa, Instagram-tiliä tai 
äänitettä SoundCloudista.

.. image:: _static/images/code-widget-fi.png
    :alt: Koodi-pienoisohjelma normaalinäkymässä. Ohjelmassa on skripti, joka lisää 
          kissan.
    :align: center
    
Jos haluat liittää tai kirjoittaa pidemmän skriptin, ohjelmassa on painike, jolla voit 
laajentaa koodiruudun koko näytön kokoiseksi. Tämä helpottaa paljon, koska koodiin ei 
tule rivinvaihtoja niin aikaisin.

.. image:: _static/images/code-widget-expanded-fi.png
    :alt: Koodi-pienoisohjelma suurennetussa näkymässä. Ohjelmassa on skripti, joka 
          lisää kissan.
    :align: center

Esimerkkejä
===========

.. note::

    Tätä pienoisohjelmaa voidaan käyttää videoiden lisäämiseen esim. Youtubesta, 
    mutta videoiden upottamiseen on oma, yksinkertaisempi pienoisohjelma 
    :doc:`Video <video-widget>`.

SoundCloud
----------

Lisätäksesi esim. 
`tämän Dio-coverin <https://soundcloud.com/roadrunner-usa/corey-taylor-rainbow-in-the>`_
SoundCloudista, etsi painike "Share" ja valitse "Embed". Sieltä löydät lyhyen html-
koodin, joka näyttää tältä

.. code-block:: html

    <iframe width="100%" height="450" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/141532329&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false&amp;visual=true"></iframe>

Twitter-virta
-------------

Jos haluat lisätä Twitter-virran, mene osoitteeseen https://publish.twitter.com/ ja 
kirjoita siellä osoite, jonka haluat lisätä. Jos haluamme esim. lisätä Minabibliotekin 
virran, kirjoitamme https://twitter.com/minabibliotek ja valitsemme sen jälkeen 
"Embedded timeline".

Silloin meidän pitäisi saada seuraavanlainen html-koodi, jota voimme käyttää 
pienoisohjelmassa.

.. code-block:: html

    <a class="twitter-timeline" href="https://twitter.com/minabibliotek">Tweets by minabibliotek</a> <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>