Web サイトに Twitter / GitHub への リンク・フォローボタン等を追加する

概要

Web サイトに Twitter / GitHub への リンク・フォローボタン等を追加します

Twitter

ツイートボタン

下記 URL でボタン追加用のコードを取得します。
https://about.twitter.com/ja/resources/buttons

私の GitHub のパーソナルページに Twitter へのリンクボタン を作成してみます

<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://tbpgr.github.io/" data-text="Tbpgr Personal Page" data-via="tbpgr" data-lang="ja" data-size="large">ツイート</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>

配置してみました

ウィジェットの配置

Twitter 公式クライアントの設定 => ウィジェット => 新規作成を選択 し、コードを取得します。

<a class="twitter-timeline" href="https://twitter.com/tbpgr" data-widget-id="536218452210372608">@tbpgrさんのツイート</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

配置してみました

GitHub

GitHub の自アカウントへのリンク

Font Awesome のアイコンを利用します。

Font Awesome | github icon

埋め込みコードは以下です。

<a href="https://github.com/tbpgr"
    target="_blank"
    title="tbpgrのGitHubページを開く">
  <i class="fa fa-github-square" style="color: black;font-size:2em"></i>
</a> 

配置してみました

GitHub フォローボタンの配置

buttons.github を利用します。

<!-- Place this tag where you want the button to render. -->
<a class="github-button" href="https://github.com/tbpgr" data-style="mega" data-count-href="/tbpgr/followers" data-count-api="/users/tbpgr#followers">Follow @tbpgr</a>

そして、 body タグが閉じる直前に下記を追加します

<!-- Place this tag right after the last button or just before your close body tag. -->
<script async defer id="github-bjs" src="https://buttons.github.io/buttons.js"></script>

その他

• Watch
• Star
• Fork
• Issue
• Download

ボタンを作成可能です。

参照

tbpgr GitHub Personal Page
tbpgr GitHub
Font Awesome
Font Awesome | github icon
Twitter Buttons