Twitterのシェアボタンを設置しよう!オリジナルのシェアボタンを作るには?

Twitterのシェアボタンを設置しよう!オリジナルのシェアボタンを作るには?

Twitterのシェアボタンを設置する方法をご紹介していきます。今回はTwitter公式のシェアボタンのhtmlタグを生成するやり方と、オリジナルのシェアボタンを作るやり方の2種類をご紹介していきます。思い通りのTwitterのシェアボタンを設置しましょう。


目次[非表示]

  1. Twitterのシェアボタンを設置したい
  2. Twitterのシェアボタンの設置方法
  3. まとめ

Twitterのシェアボタンを設置したい

Twitterのシェアボタンやツイートボタンなどいわゆるソーシャルプラグインを自分のサイトやブログに設置したいという方向けの記事なります。

Twitterへのシェアボタンの作成の仕方やオリジナルの画像は使えるのか、タイトルやURLなどの設定の仕方をご紹介いたします。

ぜひTwitterのシェアボタンについてマスターして、思い通りのシェアボタンを設置しましょう。

Twitterのシェアボタンの設置方法

Twitterのシェアボタンの設置方法をご紹介していきます。公式のシェアボタンのhtmlタグを発行してのやり方と、オリジナルの画像やテキストを使ってのやり方の2種類をご紹介していきます。

公式の機能を使ったシェアボタンの設置方法

TwitterのシェアボタンはTwitter公式の以下のサイトから生成することができます。最終的にはhtmlタグとして、コピペすることができます。

Twitter公式のシェアボタンを生成できるサイト

サイトにアクセスすると、画像のような選択肢が登場します。

Twitterのシェアボタンを生成するには「Twitter Buttons」を選択しましょう。

シェアボタンのサイズを選択します。ここでは一番左を選択します。

すると、すぐにTwitterのシェアボタンのhtmlタグが出力されます。

ここでカスタマイズオプションを見てみましょう。

カスタマイズオプションでは、発すタグや、ボタンのサイズの変更、文言など細かい指定が可能となっています。

必要に応じて編集をして、「Update」ボタンで適用しましょう。

最後にhtmlタグが書かれている箇所をクリックすると、自動でクリップボードにコピーされます。

あとはこのタグを設置すれば、Twitterのシェアボタンを設置することができます。

ちなみに形式としては以下のようになります。(コピペできます)

大きくわけて

  • scriptタグの部分
  • aタグで実際にボタンが表示される部分
に分かれます。

上記のTwitterの公式の機能ではツイートボタンやタイムライン、ツイートの埋込みなどにも対応しています。シェアボタンの機能もぜひ使ってみましょう。

オリジナルの画像やテキストを使ってのシェアボタンの設置方法

Twitterは特定のリンク先であれば、シェアをする機能が働きます。

つまりこちらでhtmlタグのaタグでリンク先をそのURLにしておけば、こちらが用意したデザインのシェアボタンでも問題なく動作します。

その特定のURLは下記となります。(他にもオプションがありますが、シンプルな例)

  • url: TwitterでシェアするURL
  • text: 記事ページのタイトルなど文言部分

http://twitter.com/share?url=シェアするURL&text=文言

こちらのURLを指定して、あとはaタグで独自のpngやjpgなどの画像を使ってシェアボタンをデザインしましょう。aタグのhref属性に上記のURLを指定して、シェアボタンを完成させ設置しましょう。

まとめ

Twitterのシェアボタンの設置方法についてまとめました。公式の機能を使ってもいいですが、オリジナルのデザインにしたいときなどは自分で画像を用意したりデザインをしてシェアボタンを作成しましょう。

またURLをシェアした場合はTwitterカードという仕組みでTwitter上での表示をリッチにできます。Twitterカードについては下記の記事を参考にしてみて下さい。

Twitterカードとは?設定の仕方について解説します

Twitterカードについてご紹介します。Twitterカードを使うことでリンク先のWEBページやアプリを整形してツイートの中に表示することができます。今回はTwitterカードの簡単な概要と設定方法についてまとめました。

Thumb

関連記事