• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

mengrru/mastodon-on-blog: Put a Mastodon widget on your website or blog

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称(OpenSource Name):

mengrru/mastodon-on-blog

开源软件地址(OpenSource Url):

https://github.com/mengrru/mastodon-on-blog

开源编程语言(OpenSource Language):

CSS 56.4%

开源软件介绍(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:

mastodon

*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

Field Description Required Default Type
instance the domain name of your Mastodon instance yes - String
userId your number id yes - Number
tag only show the toots with this tag no - String
shownMax the max number of your toots will be shown no 20 Number
rootDOM the root DOM of widget rendering no 'my-mastodon-widget' String
loadingText the shown text when loading no '加载中...' String
loadFailText the shown text when loading failed no '加载失败' String
staticStatusesDataPath the path of static statuses data. you can use it when you build widget themes no - String
token your access token. usually not needed, and use with caution if needed. no - String

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

mastodon

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

livly-1

livly1preview

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

livly-2

livly2preview

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

animal-crossing-1

like

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).




鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
groundcat/mastodon-welcome-bot: A simple php script that sends welcome messages ...发布时间:2022-08-17
下一篇:
garbados/pouchdb-mastodon发布时间:2022-08-17
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap