【カンタン】Xシェアボタンを設置する方法【PHP・WordPress版あり】

Webサイトを閲覧していると、「Xでシェアする」ボタンを見かけることがあります。

このようなボタンをクリックするとXの投稿画面が開き、閲覧していたページのURLとタイトルをポストすることができます。

TwitterでURLをシェアする画面 — このボタンをクリックするとXの投稿画面が開きます

このようなボタンはHTMLベタ打ちの個人サイトでもカンタンに設置することができます。また、PHPやWordPressでできたサイトではもっと便利に作成することも可能です。

では、早速シェアボタンの設置方法を見ていきましょう！

デザインにこだわらない、一番カンタンな設置方法

デザインにはこだわらないからとにかくカンタンに設置したい場合は、下記のコードをコピペするだけでOKです。

<a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" data-show-count="false">Tweet</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

このコードを利用して表示されるボタンの特徴は、以下の通り。

HTMLベタ打ちのサイトでも、自動でシェアしたいページのタイトルとURLを取得してくれる（後述する別の設置方法では、PHPやWordPressで作られていないサイトだとHTMLファイルごとにタグの細部を変更する必要がある）。
便利な代わりに、デザインを変更することはできない。ボタンの大きさを変えることができる程度。

細かいことにはこだわらないから、とにかく手軽にシェアボタンを設置したい、という方に向いています。

このコードで設置できるシェアボタンは、以下のような感じです↓

シンプルですが、どんなサイトにも馴染みやすく、またX公式アイコンやテーマカラーが使われているため、Xに関連したボタンだと一目でわかるようなデザインになっています。

後述する別の設置方法では自分で自由にデザインを作れる反面、CSSを書く知識がなければデザインを作れません。自分でCSSを書けるという自信がない方は、こちらの方法をおススメします。

ボタンの詳細な設定

この方法で設置するXボタンでは、data-〇〇〇属性を使うことで、ある程度設定を行うことができます。

ボタンの大きさの変更

ボタンの大きさを変更したい場合、ボタンの<a>リンクタグの中にdata-size="large"を追記します。表示するボタンが少し大きめになります。

<a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" data-show-count="false" data-size="large">Tweet</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

シェアするURLや、ポストする文章の変更

デフォルトでは、ボタンを表示しているURLとそのタイトルがシェアされますが、別のURLをシェアしたい場合や、ポストする文章を変更したい場合もあります。

シェアするURLを変更する場合は、<a>リンクタグの中にdata-url="シェアしたいURL"を記述します。

ポストする文章を変更する場合は、<a>リンクタグの中にdata-text="ポストしたい文章"を記述します。

自分でデザインできるボタンを設置する方法

この方法では、シェアボタンに表示される文言や、シェアボタンのデザインを自分で自由に変更することができます（デザインの変更にはCSSの知識が必要です）。

ただし、PHPを利用しないHTMLベタ打ちのサイトでは、シェアボタンひとつずつのHTMLタグにシェアするURLとツイートに表示する文章を設定する必要があり、少し手間です。

ベースとなるHTMLコードは以下の通りです。

<a href="https://x.com/share?url=シェアするURL&amp;text=ポストする文章" rel="nofollow" target="_blank" class="my-x-share-button">Xでシェア</a>

コードの途中に「シェアするURL」「ポストする文章」と書かれたところがありますので、ここにそれぞれシェアするURLとポストする文章を記述します。

何もデザインをしていない状態では、普通のリンクと同じ見た目になります。リンクにclass="my-x-share-button"が設定されているので、このクラスに対してCSSでデザインを施します。もちろん、ほかのクラスを設定してもかまいません。

ちなみに、Twitterのブランドカラーのカラーコードは#000000です。シェアボタンのデザインに使用すれば、Xに関係するボタンだと分かりやすくなるでしょう。

デザインのサンプル

Xブランドカラーを利用したシンプルなデザインのシェアボタンです。

Xでシェア

a.my-x-share-button {
    display: inline-block;
    color: #ffffff;
    font-size: 12px;
    font-weight: 500;
    padding: 5px 7px;
    line-height: 1em;
    border-radius: 2px;
    background:#000000;
}

このCSSコードをベースに、お好きにカスタマイズしてもOKです！

PHPで作られたページに設置する場合

PHP製のページにシェアボタンを設置する場合は、ページごとに自動でシェアURLやページタイトルを取得することができます。

現在のページのURLを自動で返すPHPコードは、以下の通り。

<?php echo (empty($_SERVER['HTTPS']) ? 'http://' : 'https://') . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI']; ?>

そして、ページタイトルについてですが、PHPで作られたサイトであれば<title>タグの中身をPHPコードで動的に出力しているはずなので、お使いのPHPファイルの<title>タグの内容をコピーして利用すれば、問題なく動作するはずです。

<a href="https://x.com/share?url=<?php echo (empty($_SERVER['HTTPS']) ? 'http://' : 'https://') . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI']; ?>&amp;text=<title>タグの中身" rel="nofollow" target="_blank" class="my-x-share-button">Xでシェア</a>

WordPressで作られたページに設置する場合

WordPressで作られたサイトの場合、すべての固定ページや投稿の同じ位置にボタンを設置するのであれば、子テーマを使ってテンプレートファイル内にシェアボタンのHTMLコードを埋め込むのがよいでしょう。

子テーマやテンプレートファイルについて詳しく知りたい方は、以下の記事をご参照ください。

子テーマを使ってWordPressをもっとカスタマイズしよう - ACT

WordPressを自分好みのものにするのに役立つのがテーマとプラグイン。ネット上には数えきれないほどたくさんのテーマやプラグインが公開されていて、どれを使うべきか選ぶのに苦労するほどです。

WordPressでは、ページのURLやタイトルを呼び出すには専用の関数が用意されています。ページURLはget_the_permalink()、タイトルはget_the_title()です。

<a href="https://x.com/share?url=<?php echo get_the_permalink(); ?>&amp;text=<?php echo get_the_title(); ?>" rel="nofollow" target="_blank" class="my-x-share-button">Xでシェア</a>

利用しているWordPressテーマの仕様やテンプレートファイルの構成によっては、上記の関数ではエラーになり上手く動作しない場合があります。そんなときは、「WordPress URL 取得」などの語句で検索し、ほかの関数を試してみてください。