ひびわれたまご

大人の発達障害(ADHD)当事者のイラストレーター・志乃が、生きづらさや”楽”について考えるブログ。

新しいInstagramの公式フォローボタンがない!公式風の改造CSSをブログに設置する方法

f:id:shinoegg:20171024193544j:plain

Twitter公式フォローボタンや、Facebookの公式ボタンと並べても不自然じゃないインスタグラムのフォローボタンを設置してみた

どうも。志乃です。

今日は、CSSによるカスタマイズで「新しいインスタグラム公式フォローボタン」っぽいものを、改造で作って設置してみたよというお話です。

影響力が高まるインスタグラムをブログ運営に活用しよう

皆さんご存知の通り、インスタグラムが若年層を中心に大人気。

なんと現在、登録ユーザー数がTwitterよりも上回っているそうです。 

今やSNSと言えば、Twitter、Facebook、LINE、Instagramの、4強の時代。

それにも関わらず、Instagramの公式フォローボタンを設置しているブログを、他の3つに比べ、あまり見かけないと思いませんか。

それには理由がありました。

Instagramは新しい公式フォローボタンがなく、設置が面倒

以前は、公式の「設定」から簡単にInstagram公式バナーを設置できる方法があったのですが、アップデートに伴い、設定メニューから削除されてしまいました。

以前のものを無理やり設置することも出来ますが、リニューアル前のもののため、いかんせんデザインが、古い…。

f:id:shinoegg:20171024191338j:plain

胸に溢れるコレジャナイ感

インスタグラム 公式フォローボタン 設置」等でいくら検索をかけても、こういう古いタイプのやつしか出て来なかったため、自分で何とかすることにしました。

ないなら、作ってしまえばいいじゃない。

インスタグラムの公式風デザインCSSを参考にする

今回、参考にさせていただいたデザインCSSはこちら。

saruwakakun.com

たいへん参考になりました。ありがとうございます。

ただ、こちらの記事のままコピペで設置したところ、いくつか問題が発生。

f:id:shinoegg:20171024193233j:plain

インスタグラムのボタンだけ不自然にデカイ…でかすぎる…。十万石まんじゅう…。

その他にも、リンクテキストが何故か白くならないなど苦労しましたが、id:aliliputさんに丁寧なアドバイスをいただき、無事に設置することが出来ました。深く御礼申し上げます…!

TwitterやFacebookの公式フォローボタンのデザインに合わせる方法

そんなわけで、サルワカさんのCSSデザイン例を、勝手ながら、より「インスタグラム公式フォローボタン風」に、デザインカスタマイズさせていただきました。

そして最終的には、こんな感じになりました。

f:id:shinoegg:20171024204052j:plain

インスタグラム公式フォローボタン風

f:id:shinoegg:20171024193544j:plain

他の公式フォローボタンと並べても違和感がない大きさに変更したかった

他の公式フォローボタンと並べて表示するとこうなる。はず。

はてなブログ読者登録ボタンや、ツイッターやFacebookの公式フォローボタンと並べても、違和感がないように、CSSを改造してみました。

一応、様々なブラウザで正しく表示されるかをチェックしてみましたが…、いかがでしょうか?(本物は記事の最後にあるプロフィール欄に設置してあります)

【コピペ】HTML+CSSコード例

基本的には、サルワカさんの美しいInstagramフォローボタンのCSSデザイン例と設置方法の、「デザイン2」を基にさせていただいております。

改造後・HTML記述

<a href="https://www.instagram.com/shinoegg/?ref=badge" class="insta_btn2">
<i class="fa fa-instagram"></i> <span>フォローする</span></a>

※リンクの部分を、あなたのインスタグラムURLに変更してください。

改造後・デザインCSS記述

赤字が改造した箇所です。

はてなブログをお使いの方は、設定→デザイン→カスタマイズ(スパナのマーク)→デザインCSS欄に、そのままコピペしてみてください。

/*インスタフォローボタン*/
a.insta_btn2{/*ボタンの下地*/
color: #FFF;/*文字・アイコン色*/
border-radius: 5px;/*角丸に*/
position: relative;
display: inline-block;
height: 20px;/*高さ*/
width: 95px;/*幅*/
text-align: center;/*中身を中央寄せ*/
font-size: 11px;/*文字のサイズ*/
line-height: 20px;/*高さと合わせる*/
vertical-align: middle;/*垂直中央寄せ*/
background: -webkit-linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;
background: linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;/*グラデーション①*/
overflow: hidden;/*はみ出た部分を隠す*/
text-decoration:none;/*下線は消す*/
vertical-align: top;/*並べた時のズレを修正*/
}
.insta_btn2:before{/*グラデーション②*/
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;/*全体を覆う*/
height: 100%;/*全体を覆う*/
background: -webkit-linear-gradient(15deg, #ffdb2c, rgb(249, 118, 76) 25%, rgba(255, 77, 64, 0) 50%) no-repeat;
background: linear-gradient(15deg, #ffdb2c, rgb(249, 118, 76) 25%, rgba(255, 77, 64, 0) 50%) no-repeat;
}
.insta_btn2 .fa-instagram{/*アイコン*/
font-size: 12px;/*アイコンサイズ*/
position: relative;
top: 1px;/*アイコン位置の微調整*/
}
.insta_btn2 span {/*テキスト*/
display:inline-block;
position: relative;
transition: .5s
}
/*インスタフォローボタンここまで*/

おまけ:TwitterとFacebookの公式フォローボタン設置方法

「公式のフォローボタンは重いので、そのまま設置するのはやめた方がいい」という意見もありますが、フォロワー数が目に見えて分かりやすい方が、読者に興味を持っていただけるんじゃないでしょうか。

Twitter公式フォローボタンの場合

Twitterボタン | About

↑ここで希望のボタンデザインを選択して、好きなところに貼るだけです。

Facebookの公式フォローボタンの場合

フォローボタン - ソーシャルプラグイン - ドキュメンテーション - 開発者向けFacebook

↑ここに行って、下の画像のように変更してください。

f:id:shinoegg:20171024200216j:plain

いかがでしょうか。

拙い改造ではございますが、検索しても対策が出てこない状況だったため、紹介してみました。同じようにお困りの方、良かったら参考になさってみてください。

現場からは、以上です。