ProgrammerWidget Sample

Qiita Widget (User Profile Only)

In head: 

<link rel="stylesheet" href="https://meilcli.github.io/ProgrammerWidget/ProgrammerWidget.css" />
<script src="https://meilcli.github.io/ProgrammerWidget/ProgrammerWidget.js" async defer></script>

In body: 

<div class="programmer-widget-qiita" target-user="meilcli"></div>

Qiita Widget (User Profile With Items)

In head: 

// Replace Your Font Awesome CDN Code!
<link rel="stylesheet" href="https://use.fontawesome.com/6c0013e839.css" />
<link rel="stylesheet" href="https://meilcli.github.io/ProgrammerWidget/ProgrammerWidget.css" />
<script src="https://meilcli.github.io/ProgrammerWidget/ProgrammerWidget.js" async defer></script>

In body: 

<div class="programmer-widget-qiita-with-items" target-user="meilcli"></div>

Teratail Widget (User Profile Only)

In head: 

<link rel="stylesheet" href="https://meilcli.github.io/ProgrammerWidget/ProgrammerWidget.css" />
<script src="https://meilcli.github.io/ProgrammerWidget/ProgrammerWidget.js" async defer></script>

In body: 

<div class="programmer-widget-teratail" target-user="meilcli"></div>

Teratail Widget (User Profile With Answer)

In head: 

// Replace Your Font Awesome CDN Code!
<link rel="stylesheet" href="https://use.fontawesome.com/6c0013e839.css" />
<link rel="stylesheet" href="https://meilcli.github.io/ProgrammerWidget/ProgrammerWidget.css" />
<script src="https://meilcli.github.io/ProgrammerWidget/ProgrammerWidget.js" async defer></script>

In body: 

<div class="programmer-widget-teratail-with-answer" target-user="meilcli"></div>

Github Widget (User Profile Only)

In head: 

<link rel="stylesheet" href="https://meilcli.github.io/ProgrammerWidget/ProgrammerWidget.css" />
<script src="https://meilcli.github.io/ProgrammerWidget/ProgrammerWidget.js" async defer></script>

In body: 

<div class="programmer-widget-github" target-user="meilcli"></div>

Github Widget (User Profile With Activity)

In head: 

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/octicons/4.4.0/font/octicons.min.css" />
<link rel="stylesheet" href="https://meilcli.github.io/ProgrammerWidget/ProgrammerWidget.css" />
<script src="https://meilcli.github.io/ProgrammerWidget/ProgrammerWidget.js" async defer></script>

In body: 

<div class="programmer-widget-github-with-activity" target-user="meilcli"></div>

Customize List Height (to 300px)

In head: 

// Replace Your Font Awesome CDN Code!
<link rel="stylesheet" href="https://use.fontawesome.com/6c0013e839.css" />
<link rel="stylesheet" href="https://meilcli.github.io/ProgrammerWidget/ProgrammerWidget.css" />
<script src="https://meilcli.github.io/ProgrammerWidget/ProgrammerWidget.js" async defer></script>

In body: 

<div class="programmer-widget-qiita-with-items" target-user="meilcli" target-list-height="300px"></div>

Viiw Source Code On Github