Twitterフォローボタンに似たInstagramフォローボタンの配置方法

WordPress
2022.11.09

Twitter のフォローボタンは Twitter 公式の機能 Twitter Publish で作ることができます。
HTML コードが自動で作成されるので WordPeess に貼り付けるだけで簡単にフォローボタンを配置できます。

Instagram では公式にフォローボタンを作る機能はないので、自作する必要があります。
そこで、 Twitter のフォローボタンのほぼ同じ見た目のボタンを作ったので紹介します！

Follow @maitake9116
スポンサーリンク

Instagram フォローボタン作成手順

① Instagram の URL を作成する

Instagram にログインし、プロフィールをクリックします。

Instagram ホーム画面

Web ブラウザのアドレスバーに自分の URL (https://www.instagram.com/ユーザー名/) が表示されるので URL をコピーします。
私の場合は「https://www.instagram.com/maitake9116/」です。

Instagram プロフィール画面

コピーした URL の末尾に ?ref=badge を足したものが必要な URL になります。

https://www.instagram.com/ユーザー名?ref=badge

② CSS をコピペする

以下の CSS をコピーして WordPress に貼り付けます。
外観 > テーマ > カスタマイズ > 追加 CSS で CSS を追加できると思います。

.original_instagram_btn {
    color: #FFF;
    border-radius: 10px;
    position: relative;
    display: inline-block;
    height: 20px;
    width: 161px;
    text-align: center;
    font-size: 10.5px;
    font-weight: bold;
    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;
}

.original_instagram_btn: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;
}

.original_instagram_btn .fa-instagram {
    font-size: 12px;
    position: relative;
    margin-left: 5px;
    margin-right: 1px;
}

.original_instagram_btn span {
    display: inline-block;
    position: relative;
}

.original_instagram_btn:hover {
    color: #FFF;
    background: -webkit-linear-gradient(135deg, #2d63c0 0%, #af1b4a 70%) no-repeat;
    background: linear-gradient(135deg, #2d63c0 0%, #af1b4a 70%) no-repeat;
}

.original_instagram_btn:hover:before {
    background: -webkit-linear-gradient(15deg, #c2a40c, rgb(154, 74, 47) 25%, rgba(255, 77, 64, 0) 50%) no-repeat;
    background: linear-gradient(15deg, #c2a40c, rgb(154, 74, 47) 25%, rgba(255, 77, 64, 0) 50%) no-repeat;
}

③好きなところに Instagram フォローボタンを配置する

以下の HTML コードをコピーし、a href="#" の # を①で作成した URL に変えます。

<a href="#" class="original_instagram_btn">
    <i class="fab fa-instagram"></i> <span>Follow me !</span>
</a>

好きなところにカスタム HTML ブロックを追加し、編集した HTML コードを貼り付けたら完成です！

Follow me !


文言を変えたい場合は <span></span> の中を編集してください。

タイトルとURLをコピーしました