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

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

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

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

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

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

スポンサーリンク

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

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

この記事をシェアする

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

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

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

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

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

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

この記事をシェアする

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

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

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

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

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

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

Twitterアイコンの設置方法

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

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

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

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

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

Font Awesome - twitter

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

以上、TONELIKOでした。

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

この記事をシェアする

コメント

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