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

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

Qiita_Widget_Demo.png

図:左はユーザ投稿の、右は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へのリンクが非表示になる