Qiita Widget : Qiitaの投稿を表示できるブログパーツ

Qiitaの新着投稿をウェブサイトに埋め込むことができるウィジェットです。自分のブログなどのウェブサイトにQiitaの活動を載せたり、Qiita:Teamに特定のタグのタイムラインを表示したりできます。

図:左はユーザ投稿の、右はRubyタグのタイムライン

Qiita Widgetの動作するデモはこちら

ウィジェットの設置方法

下記のコードのyour_nameの部分を表示したいユーザ名に置換えてお使いください。

<a href="https://qiita.com/your_name" data-qiita-widget data-username="your_name">suinのQiita投稿</a>
<script src="https://qiita-widget.suin.io/widget.js" defer></script>

ウィジェットのカスタマイズ

data-*属性を設定することで、ウィジェットの表示をカスタマイズできます。

コンテンツのカスタマイズ

表示するコンテンツは「ユーザ投稿」「タグへの投稿」「キーワード検索結果」のいずれかを選択することができます。

属性	値	説明
data-username="ユーザ名"	ユーザ名: string	ユーザの新着投稿が表示される
data-tag="タグ"	タグ: string	タグへの新着投稿が表示される
data-search="キーワード"	キーワード: string	検索キーワードに合致する新着投稿が表示される

見た目のカスタマイズ

ウィジェットの大きさや表示件数といった見た目をカスタマイズすることができます。

属性	値	説明
data-items	表示件数: int	表示する投稿数
data-width	幅: string	ウィジェットの幅。値はCSSのwidthで使用可能なもの。デフォルト: 100%
data-height	高さ: string	ウィジェットの高さ。値はCSSのheightで使用可能なもの。デフォルト: 400px
data-hide-header		Qiitaのロゴを非表示にする
data-hide-footer		Qiita Widgetへのリンクが非表示になる