0
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Twitterシェアボタンをカスタマイズする方法

Posted at

シェアボタンとは

ボタン1つで、SNSにWebページや記事を共有してもらえるボタンです。自分のサイトを利用者に拡散してもらい、認知度をあげることができます。

Twitterの設置方法

アイコンを使う場合は、以下のブランドリソースを守りましょう。
https://about.twitter.com/ja/company/brand-resources.html

1. 公式ページにアクセス

シェアボタンなどツイッターの埋め込み形を生成できる公式ページにアクセスしましょう。
公式ページ→https://publish.twitter.com/#
スクリーンショット 2020-10-18 20.54.10.png

2. Twitter Buttonsをクリック

下にスクロールして、Twitter Buttonsをクリックします。

3. Share Buttonを選択

Share Buttonを選択することで、URLをシェアするボタンを作成することができます。
スクリーンショット 2020-10-18 20.55.41.png

4. set customization optionsをクリック

タイトルに書いてある
That’s all we need, unless you’d like to set customization options.
の青くなっている**set customization options.**をクリックすると以下の画面になります。
スクリーンショット 2020-10-18 20.57.58.png
各項目は以下のことを指定できます。

英文 できること
Do you want to prefill the Tweet text? 入力したい文字
Do you want to set a specific URL in the Tweet? 共有するURLもしくはツイートURL
Would you like this Tweet to include your screen name? 自分のツイッターアカウント
Would you like to set a hashtag for the Tweet? 共有したいハッシュタグ
Do you want to recommend accounts? お勧めするツイッターアカウント?
How would you like the button displayed? ボタンの大きさ(カスタマイズする場合は選択不要)
What language would you like to display this in? 言語設定

最後に、Updateをクリックしたら完成です。

5. Copy Code

Updateを押すと前のボタンに戻されます。Copy Codeを押すとクリップボードにコードがコピーされます。

6. カスタマイズする!!

  1. 一度、公開するWebページに貼り付けます。
  2. そして、Webページを開きます。
    スクリーンショット 2020-10-18 21.12.46.png
    するとツイートボタンが表示されています。
  3. Google Chromeのディベロッパーツールを使用します。
  4. ページ上で、右クリックを押してから検証を押します。
  5. ソースコードが出されるので、その中から、aタグを見つけ、href=""の中に書いてある文字をコピーします。

写真の場合、https://twitter.com/intent/tweet?original_referer=http%3A%2F%2F127.0.0.1%3A54313%2F&ref_src=twsrc%5Etfw&text=Document&tw_p=tweetbutton&url=http%3A%2F%2F127.0.0.1%3A54313%2Findex.html

スクリーンショット 2020-10-18 21.14.39.png
6. 自分の作りたいボタンをデザインして、先ほどコピーしたものを貼り付けると完成です!!

0
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?