Elm内にtwitterボタン等scriptタグがあるものを貼る

HTMLをElmに変換するサイトhtml-to-elmというのがあって、知ってると便利です。自分はBootstrapを使う時に、HTMLのサンプルコードを変換する時に使いました。

話は変わりますが、twitterボタンをElm内に設置したいと思い上記を使いました。でもtwitterボタン等埋め込むHTMLにはscriptタグがあり、ElmのHTMLライブラリにscriptタグが無いのですべて変換できません。

scriptタグを自分で作ってみます。

import Html exposing (..)
import Html.Attributes exposing (..)

script_ : List (Attribute msg) -> List (Html msg) -> Html msg
script_ =
    Html.node "script"

twitterボタンはElmでは以下のようになりました。動きました。

socialTwitterButton =
    div []
        [ a
            [ class "twitter-follow-button"
            , attribute "data-show-count" "false"
            , href "https://twitter.com/joo_ex"
            ]
            [ text "Follow @joo_ex" ]
        , script_ []
            [ text "!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';\n                     if(!d.getElementById(id)){js=d.createElement(s);\n                     js.id=id;\n                     js.src=p+'://platform.twitter.com/widgets.js';\n                     fjs.parentNode.insertBefore(js,fjs);\n                     }}(document, 'script', 'twitter-wjs');"
            ]
        ]