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

Twitterのオリジナルシェアボタンの作り方 プログラミング
スポンサーリンク

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

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

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

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

スポンサーリンク

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

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

この記事をシェアする

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

<a class="btn" 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 {
  /* 文字サイズを1.2emに指定 */
  font-size: 1.2em;
  /* 文字の太さをboldに指定 */
  font-weight: bold;
  /* 縦方向に4px、横方向に10pxの余白を指定 */
  padding: 4px 10px;
  /* 周囲に0.4emの余白を指定 */
  margin: 0.4em;
  /* 背景色をtwitter色に指定 */
  background-color: #00acee;
  /* 文字色を白色に指定 */
  color: #fff;
  /* ボーダーをなくす */
  border-style: none;
  /* 角を丸める */
  border-radius: 5px;
}

/* ボタンホバーで色を薄く */
.btn:hover {
  /* 透明度を0.6に */
  opacity: 0.6;
  /* 1秒かけて色を薄くする */
  transition: 1.0s ;
}

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設定したいハッシュタグを入れます。#は不要。カンマ区切りで複数設定可能
viaTwitterアカウントIDを設定しておくと、「@◯◯さんから」と表示されます。@は不要
relatedフォローを促したいTwitterアカウントのIDを設定。ツイート後に「おすすめユーザー」として表示されます。IDの後にコロン(:)をつなげて説明文を加えることも可
  • パラメータのあとにイコール(=)でその内容とつなぎます。
  • 内容はダブルクォーテーション(“)で囲む必要はありません。
  • パラメーターどうしをアンド(&)でつなぎます。

Twitterアイコンの設置方法

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

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

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

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

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

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

Font Awesome - twitter

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

以上、TONELIKOでした。

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

この記事をシェアする

コメント

タイトルとURLをコピーしました