开源软件名称（OpenSource Name）：

开源软件地址(OpenSource Url)：

开源编程语言(OpenSource Language)：

开源软件介绍(OpenSource Introduction)：

mastodon-on-blog

English Docs | 中文文档

Put a Mastodon widget on your website or blog.

Quick start

Clone this repo to your blog dir, and insert the code to your page:

<iframe src="<root_path>/mastodon-on-blog/index.html" height=100 width=200></iframe>

Save and refresh the page, then you can see the widget looks like this:

*if you don't want to clone this repo and use iframe, go to # Not using iframe.

Configuration

Open mastodon-on-blog/index.html and focus on:

MastodonOnBlog({
    instance: 'o3o.ca',
    userId: 541,
    loadingText: '加载中(´·ω·｀)',
    loadFailText: '加载失败(╯°Д°）╯︵ /(.□ . \\)',
    rootDOM: 'my-mastodon-widget',
    staticStatusesDataPath: './test/statuses.json'
})

Change the value of instance to the domain name of your Mastodon instance, change the value of userId to your number id, and at last remove staticStatusesDataPath. Save and refresh your page, and you can see your toots was shown in the widget.

*if you get the message status code: 401, go to # Status code: 401.

API

Build your own themes

Modify the file default.style.css to build your own styles, or create a new css file and link it in the index.html.

If you need an independent iframe to test your work, you can use test/index.html.

For quick modify, read Quick build your own themes.

Available themes

default

https://mengrru.github.io/mastodon-on-blog/default.style.css

livly-1

https://mengrru.github.io/mastodon-on-blog/themes/livly-1/style.css

livly-2

https://mengrru.github.io/mastodon-on-blog/themes/livly-2/style.css

animal-crossing-1

https://mengrru.github.io/mastodon-on-blog/themes/animal-crossing-1/style.css

FAQ

Get your number id

Open your Mastodon timeline in browser, and click your avatar, then look at address bar you can find the url is <instance domain>/web/accounts/<number>, the <number> is your number id.

Not using iframe

If you don't want to use iframe, you can import default.style.css and mastodon-on-blog.js to your page:

<link href="https://mengrru.github.io/mastodon-on-blog/default.style.css" rel="stylesheet">
<script src="https://mengrru.github.io/mastodon-on-blog/mastodon-on-blog.js"></script>

then insert this HTML code to where you want the widget is rendered:

<div id="my-mastodon-widget"></div>

at last insert the config code at the bottom of your page:

MastodonOnBlog({
    instance: '',
    userId: 1,
    ...
})

Status code: 401

if you get the message "Status code: 401" in your widget, there are two possibilities:

1. Your instance is in whitelist mode;
2. The version of your instance is older than 2.7.0

Under all of status above, your should use a read:statuses token to fetch your toots:

MastodonOnBlog({
    ...
    token: 'your token'
})

RISK WARNING:

The token will expose all your toots, including your private toots like what follower-only or someone-only.

Set your access token

Enter <instance domain>/settings/applications/new, fill an application name (whatever you like), only check read:statuses and uncheck all others options, then click submit button. Open the application page you just created, you can find the access token (你的访问令牌 in Chinese).