mastowidget/index.html at master · CaptainSpam/mastowidget · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<html>
    <head>
        <title>Mastowidget Sample Page</title>
        <meta charset="utf-8" />
    </head>

    <body>
        <h1>Mastowidget Sample Page</h1>

        <div id="leader">
            <p>This is your run-of-the-mill sample page to test if Mastowidget is working properly.  Just dump this in the same directory as the js and css files (and the mastodon_widget.html file), edit the js accordingly, and pop it open in a browser.  Then, you'll see this text and hopefully a widget box elsewhere down the page.</p>

            <p>And by "edit the js accordingly", I mean set the <tt>instanceUrl</tt> and/or <tt>userName</tt> config variables.  You may either set <tt>instanceUrl</tt> and <tt>userName</tt> individually or use the full @username@instance.social format with just <tt>userName</tt>.  If <tt>userName</tt> contains an instance domain name, that'll take precedence over <tt>instanceUrl</tt>.</p>

            <p>This is still relatively early code.  Most errors won't be displayed, and not everything's going to work yet.  Use this at your own risk, I'm not offering any guarantees here.</p>

            <p>If need be, tweak the css to taste, and replace the jQuery script line with your favorite flavor of CDN or local file.</p>

            <p>Also, just to be clear, this WILL require JavaScript to use.  If you or your users have turned it off, there won't be anything displayed.  Plan accordingly.</p>
        </div>

        <!-- Oh, incidentally, if you'd like your non-Javascript-using guests to
             not see the container sitting around, here's a simple fix: -->
        <noscript>
            <style>
                #masto_widget { display:none !important; }
            </style>
        </noscript>

        <iframe
            id="masto_widget"
            title="Embedded Mastodon widget"
            src="masto_widget.html"
            width="400px"
            height="520px"
            style="border:0; margin:24px;"
            scrolling="no"></iframe>
    </body>
</html>