LINE@の友だち追加ボタンを自作してブログに設置する方法

6,674 views






LINE@の友だち追加ボタンのデフォルトのものがあまりにも微妙なので、CSSで自作しました。
出来上がりはこんな感じになります。

IMG 0344

コピペで使用できるのでよかったらどうぞ。

もちろんスマホ用です。

LINE@ってなに?という方はこちら。

※PHPファイルをいじるので自己責任でお願いします。

HTMLにコードを追記

HTML内に以下の内容を追記します。

場所はLINE@友だち追加ボタンを設置したい場所です。

私の場合はSTINGERのsingle.phpに記述しています。

<?php if (is_mobile()) :?>
<div id="line_atto">
<a href="http://line.me/ti/p/%40ここに紹介コード">LINEで更新情報を受け取る</a>
</div>
<?php else: ?>
<?php endif; ?>

「ここに紹介コード」の部分をご自身の紹介コードに置き換えてください。

紹介コードは、LINE@にログインした際に表示される@以下です。

PCでログインした場合

LINE MANAGER

こちら https://admin-official.line.me/ からログインした後のトップページの左上の部分。

スマホでログインした場合

IMG 0334

こちらもログインした後の左上部分にあります。
これを代入します。

例えば私の場合は「@iwr5009y」なので、

<a href="http://line.me/ti/p/%40iwr5009y">LINEで更新情報を受け取る</a>

@以下を書き換えるので、こんな風になります。
“%40″のあとに入れてください。

日本語の「LINEで更新情報を受け取る」部分は適宜変更してください。

また、<?PHP>の中で、モバイルとPCの出し分けの記述をしています。
そのためPCでは非表示、スマホとタブレットでは表示させています。

SPONSORED LINK

CSSで見た目を揃える

次にCSSファイル内に以下のコードを記述して見た目を揃えます。

STINGER5の場合はスマホの表示部分に以下を追記してください。

/* LINE@ 友だちボタン*/
#line_atto a {
background:#25af00;
box-shadow:0 5px 0 #219900;
font-size:95%;
position:relative;
display:block;
padding:10px;
color:#fff;
border-radius:6px;
text-align:center;
text-decoration: none;
font-weight: bold;
width:280px;
margin:5% 0% 5% 0%;
}
#line_atto a:hover {
background:#219900;
-webkit-transform: translate3d(0px, 5px, 1px);
-moz-transform: translate3d(0px, 5px, 1px);
transform: translate3d(0px, 5px, 1px);
box-shadow:none;
}

これで終わりです。簡単ですね。

リンク部分を押してみてきちんと動作すればOKです。

CSSの部分は環境によって適宜変更してください。

SPONSORED LINK

まとめ

LINE@ボタンの設置は今後流行ってきそうなので、これで設置してユーザーの友だち追加をしてもらいましょう。

おしまい。

育児エルゴから新作抱っこひもが出ました。新生児から使える最強の抱っこ紐はこちら

この記事がよかったら
いいね!お願いします
ヽ(=´▽`=)ノ

ままはっくの最新情報を
お届けします

Twitterでまなしばをフォローしよう!

この記事を書いている「まなしば」って誰?

こちらの記事もよく読まれています

今日の人気記事

  • プロフィール画像
    2歳の娘とエンジニアの夫と3人暮らしの88世代のブロガー。産休中からブログ書いてたら、月間60万PVになったので、脱サラしてフリーランスでメディアを作ってます。趣味はPerfume、ポケモン。東京在住の大阪人/同志社
    詳しいプロフィール・お問い合わせはこちら

ままはっくについて

アクセスありがとうございます。
このブログは育児ブロガー・まなしばが、妊娠出産・子育て・WEBサービスについて書いている“ママ術”的ブログです。
よろしくどうぞ!ヽ(=´▽`=)ノ
まなしばの詳しいプロフィール
Twitter | Facebook
プライバシーポリシー

夫と開発したブロガー向けツール

iOSとAndroidアプリ両方を探して紹介できるアプリ紹介ツール:
アプリーチ

TOP