【Labs】インスタグラムのオリジナルフォローボタンの作り方

こんにちは（・∀・）

前回はインスタグラムにPCから写真を投稿する方法をご紹介しましたが、いかがでしたでしょうか⁉️

今回も前回に引き続きインスタグラムに関する内容で、インスタグラムのフォローボタンの作り方についてご紹介したいと思います。

Facebookやツイッターなどのようにインスタグラムにも公式のいいねボタンのようなものがあるのかググってみたのですが、以前はあったものの、現在はインスタグラム公式のボタンは存在していないとの情報が。

古いデザインのボタンならあるようで...

こんなのとか、

<a href="https://www.instagram.com/ユーザーネーム?ref=badge"><img src="//badges.instagram.com/static/images/ig-badge-view-24.png" alt="Instagram"></a>

こんなのとか。

<a href="https://www.instagram.com/ユーザーネーム?ref=badge"><img src="//badges.instagram.com/static/images/ig-badge-48.png" alt="Instagram"></a>

今のインスタグラムとはイメージが全然違いますが、これでもよければこのままコピペで使えます。ユーザーネームはご自身のものに変更することを忘れずに❗️

しかし今のインスタグラムっぽいデザインのボタンにしたい...

どうする⁉️

作りましょうか。

ボタンのデザイン部分を画像にすれば簡単にボタンは作れますが、今回自作の画像は使わずにCSSのグラデーション効果のみを使って作ってみたいと思います。

まずはHTML部分。

HTML 1

<p class="ig-btn"><a href="https://www.instagram.com/ユーザーネーム?ref=badge" target="_blank"  rel="noopener">follow me</a></p>

インスタグラムのアカウント部分にご自身のユーザーネームを入力してください。ユーザーネームの後ろにリファラー?ref=badgeも一緒に入力します。

a要素には「follow me」と入れておきますが、ここはお好みで。

Result 1

テキストだけで良ければこんな感じになります。シンプルで良いですが、何のフォローボタンかちょっとわかりませんね。

それではCSSでボタンにしていきます。

Result 2

HTML 2

<p class="ig-btn-2"><a href="https://www.instagram.com/ユーザーネーム?ref=badge" target="_blank"  rel="noopener">follow me</a></p>

CSS 2

.sample-demo .ig-btn-2 {
border-radius: 5px;
padding: 0px 10px 2px 10px;
background: linear-gradient(to right, #5478f2 0%, #f23f79 60%, orange 100%);
display: inline-block;
cursor: pointer;
}
.sample-demo .ig-btn-2:hover {
opacity: 0.8;
}
.sample-demo .ig-btn-2 a {
color: #fff;
font-size: 14px;
}

お⁉️
どうですか⁉️

何だかいきなりインスタっぽくなったと思いませんか⁉️

ただ、なんだか物足りない...
やはりアイコンですかね⁉️

今回画像は使わないと言いましたが、こんなサービスを使ってみようと思います。

https://fontawesome.com/

アイコン画像を無料で使わせてくれるサイトです。

アイコン自体作れないことはありませんが、なんせ最初に今回は画像を使わないと宣言したもので...というか、今回はこのサービスを使ってみたかった、というのが本当のところでありますw

なのでこちらのサービスを使ってアイコン画像を表示させてみます。

使い方は簡単。

このページで使いたいアイコンを探します。見つかったら、該当するアイコンをクリックします。

するとCSSコードが表示されるので、それをコピーしてaタグにclass指定します。

class="fab fa-instagram"

すると...

Result 3

HTML 3

<p class="ig-btn-3"><a href="https://www.instagram.com/ユーザーネーム?ref=badge" target="_blank" class="fab fa-instagram" rel="noopener"> follow me</a></p>

CSS 3

.sample-demo .ig-btn-3 {
border-radius: 5px;
padding: 0px 10px 2px 10px;
background: linear-gradient(to right, #5478f2 0%, #f23f79 60%, orange 100%);
display: inline-block;
cursor: pointer;
}
.sample-demo .ig-btn-3:hover {
opacity: 0.8;
}
.sample-demo .ig-btn-3 a {
color: #fff;
font-size: 14px;
}

どうでしょう⁉️

おもいっきり公式っぽくなったと思いませんか⁉️

そうそう、FontAwesomeというサービス、アイコンを使用するにはアイコン自体をダウンロードして使用するか、こちらのCDNコードを</head>タグの前に貼り付ける必要があります。

<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">

せっかくなのでもう1パターン作ってみましょう❗️

Result 4

HTML 4

<p class="ig-btn-4"><a href="https://www.instagram.com/ユーザーネーム?ref=badge" target="_blank" class="fab fa-instagram" rel="noopener"></a></p>

CSS 4

.sample-demo .ig-btn-4 {
border-radius: 5px;
padding: 5px 10px 3px 10px;
background: linear-gradient(#5478f2 0%, #f23f79 60%, orange 100%);
display: inline-block;
cursor: pointer;
}
.sample-demo .ig-btn-4:hover {
opacity: 0.8;
}
.sample-demo .ig-btn-4 a {
color: #fff;
font-size: 22px;
}

HTMLのa要素のテキスト「follow me」を削除して、CSSのグラデーションを横から縦にして、font-sizeとpaddingを変更しました。

いかがでしたでしょうか、自分でも思っていた以上に良い感じにできたのでちょっと嬉しいです。