Twitterオリジナルシェアボタンの作り方

「Twitterのシェアボタンを公式とは違うものにしたい」

「ボタンの文章をページごとに変えたい」

「シェアする文章やタグを指定したい」

そんなときに役立つ、Twitterのオリジナルシェアボタンの作り方を紹介します。

この記事の目次

オリジナルシェアボタンのHTMLとCSS
TwitterシェアボタンのHTMLの設定方法
1. Twitterシェアテキスト基本形(HTML)
2. ツイートする内容を指定する
Twitterアイコンの設置方法

オリジナルシェアボタンのHTMLとCSS

まずは完成したシェアボタンをご覧ください。実際にクリックしていただければ、この記事をシェアできます。

この記事をシェアする

シェアボタンのHTMLはこちら。

<a class="btn_tw" href="https://twitter.com/intent/tweet?url=https://toneliko.com/14354/&amp;text=Twitterのオリジナルシェアボタンの作り方 - HTMLとCSSのサンプルもあり！&amp;via=toneliko11&amp;related=toneliko11:プログラミング、とくにJavascriptの面白さにどハマリ中！&amp;hashtags=プログラミング,Wordpress" target="_blank_" rel="nofollow"><i class="fab fa-twitter fa-fw"></i> この記事をシェアする</a>

CSSはこちら。class=”btn”でボタンのスタイルをこのように定義すると、テキストリンクがボタンになります。

/* ボタンの装飾　*/
.btn_tw {
  /* 文字の太さをboldに指定 */
  font-weight: bold;
  /* 縦方向に.8em、横方向に1.6emの余白を指定 */
  padding: .8em 1.6em;
  /* 周囲に0.4emの余白を指定 */
  margin: 0.4em;
  /* 背景色をtwitter色に指定 */
  background-color: #00acee;
  /* 文字色を白色に指定 */
  color: #fff;
  /* リンクの下線を消す */
 text-decoration: none;
  /* ボーダーをなくす */
  border-style: none;
  /* 角を丸める */
  border-radius: 5px;
}

/* ボタンホバーで色を薄く */
.btn_tw:hover {
  /* 透明度を0.6に */
  opacity: 0.6;
  /* 1秒かけて色を薄くする */
  transition: 1.0s ;
  /* 文字色を白色に指定 */
  color: #fff;
}

TwitterシェアボタンのHTMLの設定方法

ここからTwitterシェアボタンのHTMLの設定方法について解説していきます。

Twitterシェアテキスト基本形(HTML)

Twitterシェアボタンの基本形はリンクテキストです。シェアする情報を含まない基本形はこちら。

この記事をシェアする

クリックしていただければ分かりますが、ツイートする内容があらかじめ用意されていない状態です。

HTMLはこちら。classも指定されていないので、シンプルですね。

<a href="https://twitter.com/intent/tweet?" target="_blank" rel="nofollow">この記事をシェアする</a>

ツイートする内容を指定する

では、ツイートする内容をあらかじめ用意しておくにはどうしたらよいのでしょうか？

じつは、リンク先URLの続き（?の後）にこのようなパラメータを設定することで、さまざまな情報を加えることができます。

パラメータ	シェアする内容
url	共有したいページのURL
text	ページタイトルなどの共有したい文章
hashtags	設定したいハッシュタグを入れます。#は不要。カンマ区切りで複数設定可能
via	TwitterアカウントIDを設定しておくと、「@◯◯さんから」と表示されます。@は不要
related	フォローを促したいTwitterアカウントのIDを設定。ツイート後に「おすすめユーザー」として表示されます。IDの後にコロン(:)をつなげて説明文を加えることも可

パラメータのあとにイコール(=)でその内容とつなぎます。
内容はダブルクォーテーション(“)で囲む必要はありません。
パラメーターどうしをアンド(&)でつなぎます。

Twitterアイコンの設置方法

最後に、ボタンの先頭にアイコンを設置する方法を解説します。結論から言うと、ボタンの表示テキストの先頭にこちらのコードを加えればOK！

<i class="fab fa-twitter fa-fw"></i>

これは、Font AwesomeというWebアイコンフォントを利用できるサービスを使って表示しています。

Twitterアイコン以外にも、さまざまなアイコンが用意されているので、ぜひ一度確認してみることをおすすめします。アイコン一覧はこちらから探せます。

Find Icons with the Perfect Look & Feel | Font Awesome

Used by millions of designers, devs, & content creators. Open-source. Always free. Check out the all-new icons, styles, ...

アイコン一覧ページの検索窓に”twitter”と打ち込んで検索すると、Twitterアイコン一覧が表示されます。

任意のアイコンを選んで、右下の「Start Using This Icon」をクリックすると、このようにアイコンのHTMLが表示されるので、コピーしてボタンテキストの前に貼り付ければOK！

なお、Font Awesomeの使い方については、サルワカのこちらの記事が詳しいです。

【保存版】Font Awesomeの使い方：Webアイコンフォントを使おう

導入方法から基本的な使い方、「Font Awesome Animation」でさまざまなアニメーション効果を加える方法まで丁寧に解説します。

以上、TONELIKOでした。

「役に立った！」と思ったら、シェアしていただけると嬉しいです！

この記事をシェアする