Help us understand the problem. What is going on with this article?

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

More than 5 years have passed since last update.

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_link.png

ウィジェットの配置

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>

配置してみました

twitter_tl.png

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_link.png

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

ボタンを作成可能です。

github_follow.png

参照

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

tbpgr
Rubyを扱う人事(研修開発、エンジニア採用) Learning Designer。 tbpgr の読み方は(てぃーびー) 個人ブログでも色々と情報を垂れ流してます。 http://tbpgr.hatenablog.com/
http://tbpgr.hatenablog.com/
studist
「伝えることを、もっと簡単に」をミッションにビジュアルSOPマネジメントプラットフォームのBtoB SaaS「Teachme Biz」を開発・運営するスタートアップ
https://medium.com/studist-dev
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away