- 自分のサイトにLINE公式アカウントの友だち追加ボタンを設置したのに表示されない。
LINE公式アカウントの友だち追加ボタンをWordPress(ワードプレス)やアメーバブログ(アメブロ)に設置したのに表示されない場合、いくつかの原因が考えられます。
そこで、この記事では、LINE公式アカウントの友だち追加ボタンを設置したのに表示されない時の対処法を初心者にわかりやすく解説します。
LINE公式アカウントの友だち追加ボタンが表示されない原因
![](https://linelab.jp/wp-content/uploads/2023/11/undraw_Solution_mindset_re_57bf.png)
LINE公式アカウントの友だち追加ボタンを自分のサイトに設置したのに表示されない場合、以下の原因が考えられます。
友だち追加ボタンが表示されない原因
友だち追加ボタンのHTMLソースコードが間違えている
友だち追加ボタンが表示されない原因の一つに、友だち追加ボタンのHTMLソースコードを正しくコピーできていない可能性が考えられます。
![](https://linelab.jp/wp-content/uploads/2023/11/スクリーンショット-2023-11-14-10.56.11のコピー.png)
念のため、HTMLソースコードに誤りがないか確認してみてください。
なお、HTMLソースコードの右下にある「コピー」をクリックすれば、正しくコピーすることができます。
![](https://linelab.jp/wp-content/uploads/2023/11/スクリーンショット-2023-11-14-10.56.11.png)
友だち追加ボタンのHTMLソースコードの取得方法は、以下の記事をご参照ください。
![](https://linelab.jp/wp-content/uploads/2023/11/linelab-2.png)
友だち追加ボタンの画像が貼り付けられている
以下のように、どこかで入手した「友だち追加ボタンの画像」を貼り付けていませんか。
![](https://linelab.jp/wp-content/uploads/2023/11/スクリーンショット-2023-11-14-11.12.21.png)
「友だち追加ボタンの画像」を貼り付けただけでは、友だち追加ページに移動するリンクが設定されていないので、友だち追加ボタンの機能はありません。
友だち追加ボタンを押して友だち追加ページに移動するためには、LINE公式アカウントの管理画面から友だち追加ボタンのHTMLソースコードを取得する必要があります。
友だち追加ボタンのHTMLソースコードの取得方法は、以下の記事をご参照ください。
![](https://linelab.jp/wp-content/uploads/2023/11/linelab-2.png)
友だち追加ボタンのHTMLソースコードを貼り付ける場所を間違えている(WordPress)
WordPress(ワードプレス)で友だち追加ボタンのHTMLソースコードを貼り付ける場合、「ブロックエディタ」と「クラシックエディタ」で貼り付け方が異なります。
ブロックエディタを使用している場合
WordPress(ワードプレス)でブロックエディタを使用している場合、テキスト入力箇所に友だち追加ボタンのHTMLソースコードを貼り付けても何も表示されません。
![](https://linelab.jp/wp-content/uploads/2023/11/スクリーンショット-2023-11-14-11.19.30-1-1024x240.png)
![](https://linelab.jp/wp-content/uploads/2023/11/スクリーンショット-2023-11-14-11.41.10-1024x235.png)
![](https://linelab.jp/wp-content/uploads/2023/08/toko_icon-150x150.png)
貼り付けても何も表示されません。(「ブロックを選択するには「/」を入力」の表示が消えるだけ)
ブロックエディタで友だち追加ボタンを表示するには「カスタムHTML」にHTMLソースコードを貼り付ける必要があります。
投稿編集画面で「+(ブロックを追加)」をクリックして、一覧の中から「カスタムHTML」を選択します。
![](https://linelab.jp/wp-content/uploads/2023/11/スクリーンショット-2023-11-07-6.41.34.png)
![](https://linelab.jp/wp-content/uploads/2023/11/スクリーンショット-2023-11-07-6.41.34.png)
友だち追加ボタンのHTMLソースコードを貼り付けます。
![](https://linelab.jp/wp-content/uploads/2023/11/スクリーンショット-2023-11-07-6.42.43.png)
![](https://linelab.jp/wp-content/uploads/2023/11/スクリーンショット-2023-11-07-6.42.43.png)
以上で完了です。
なお、「プレビュー」をクリックすると、友だち追加ボタンの表示を確認することができます。
![](https://linelab.jp/wp-content/uploads/2023/11/スクリーンショット-2023-11-14-12.10.20-1024x208.png)
![](https://linelab.jp/wp-content/uploads/2023/11/スクリーンショット-2023-11-14-12.10.20-1024x208.png)
友だち追加ボタンをWordPressのヘッダー、サイドバーに設置する方法と、ボタンの大きさ(サイズ)と位置を変更したい方は、以下の記事をご参照ください。
![](https://linelab.jp/wp-content/uploads/2023/11/linelab-3.png)
![](https://linelab.jp/wp-content/uploads/2023/11/linelab-3.png)
クラシックエディタを使用している場合
WordPress(ワードプレス)でクラシックエディタを使用している場合、「ビジュアル」の状態でHTMLソースコードを貼り付けても友だち追加ボタンは表示されません。
![](https://linelab.jp/wp-content/uploads/2023/11/スクリーンショット-2023-11-14-12.14.57-1024x301.png)
![](https://linelab.jp/wp-content/uploads/2023/11/スクリーンショット-2023-11-14-12.14.57-1024x301.png)
![](https://linelab.jp/wp-content/uploads/2023/11/スクリーンショット-2023-11-14-13.01.51-1024x154.png)
![](https://linelab.jp/wp-content/uploads/2023/11/スクリーンショット-2023-11-14-13.01.51-1024x154.png)
クラシックエディタで友だち追加ボタンを表示するには「テキスト」に切り替えてからHTMLソースコードを貼り付ける必要があります。
投稿編集画面で「テキスト」をクリックします。
![](https://linelab.jp/wp-content/uploads/2023/11/スクリーンショット-2023-11-14-12.08.54-1024x238.png)
![](https://linelab.jp/wp-content/uploads/2023/11/スクリーンショット-2023-11-14-12.08.54-1024x238.png)
友だち追加ボタンのHTMLソースコードを貼り付けます。
![](https://linelab.jp/wp-content/uploads/2023/11/スクリーンショット-2023-11-14-12.09.07-1024x223.png)
![](https://linelab.jp/wp-content/uploads/2023/11/スクリーンショット-2023-11-14-12.09.07-1024x223.png)
以上で完了です。
なお、「ビジュアル」をクリックすると、友だち追加ボタンの表示を確認することができます。
![](https://linelab.jp/wp-content/uploads/2023/11/スクリーンショット-2023-11-14-12.09.09-1024x329.png)
![](https://linelab.jp/wp-content/uploads/2023/11/スクリーンショット-2023-11-14-12.09.09-1024x329.png)
友だち追加ボタンをWordPressのヘッダー、サイドバーに設置する方法と、ボタンの大きさ(サイズ)と位置を変更したい方は、以下の記事をご参照ください。
![](https://linelab.jp/wp-content/uploads/2023/11/linelab-3.png)
![](https://linelab.jp/wp-content/uploads/2023/11/linelab-3.png)
友だち追加ボタンのHTMLソースコードを貼り付ける場所を間違えている(アメブロ)
アメブロ(アメーバブログ)では、通常の画面(通常表示)に友だち追加ボタンのHTMLソースコードを貼り付けても友だち追加ボタンは表示されません。
![](https://linelab.jp/wp-content/uploads/2023/11/スクリーンショット-2023-11-14-12.32.37-1024x246.png)
![](https://linelab.jp/wp-content/uploads/2023/11/スクリーンショット-2023-11-14-12.32.37-1024x246.png)
![](https://linelab.jp/wp-content/uploads/2023/11/スクリーンショット-2023-11-14-12.32.42-1024x343.png)
![](https://linelab.jp/wp-content/uploads/2023/11/スクリーンショット-2023-11-14-12.32.42-1024x343.png)
アメブロで友だち追加ボタンを表示するには「HTML表示」に切り替えてからHTMLソースコードを貼り付ける必要があります。
投稿編集画面の下部にある「HTML表示」をクリックします。
![](https://linelab.jp/wp-content/uploads/2023/11/スクリーンショット-2023-11-14-12.42.14-1024x172.png)
![](https://linelab.jp/wp-content/uploads/2023/11/スクリーンショット-2023-11-14-12.42.14-1024x172.png)
友だち追加ボタンのHTMLソースコードを貼り付けます。
![](https://linelab.jp/wp-content/uploads/2023/11/スクリーンショット-2023-11-14-12.41.02-1024x184.png)
![](https://linelab.jp/wp-content/uploads/2023/11/スクリーンショット-2023-11-14-12.41.02-1024x184.png)
以上で完了です。
なお、「通常表示」をクリックすると、友だち追加ボタンの表示を確認することができます。
![](https://linelab.jp/wp-content/uploads/2023/11/スクリーンショット-2023-11-14-12.42.49-1024x176.png)
![](https://linelab.jp/wp-content/uploads/2023/11/スクリーンショット-2023-11-14-12.42.49-1024x176.png)
![](https://linelab.jp/wp-content/uploads/2023/11/スクリーンショット-2023-11-14-12.44.12-1024x211.png)
![](https://linelab.jp/wp-content/uploads/2023/11/スクリーンショット-2023-11-14-12.44.12-1024x211.png)
![](https://linelab.jp/wp-content/uploads/2023/11/スクリーンショット-2023-11-14-12.44.16-1024x338.png)
![](https://linelab.jp/wp-content/uploads/2023/11/スクリーンショット-2023-11-14-12.44.16-1024x338.png)
友だち追加ボタンをアメブロのサイドバーに設置する方法と、ボタンの大きさ(サイズ)と位置を変更したい方は、以下の記事をご参照ください。
![](https://linelab.jp/wp-content/uploads/2023/11/linelab-5.png)
![](https://linelab.jp/wp-content/uploads/2023/11/linelab-5.png)
まとめ
この記事では、LINE公式アカウントの友だち追加ボタンを設置したのに表示されない時の対処法を解説しました。
友だち追加ボタンが表示されない原因
友だち追加ボタンのHTMLソースコードを正しくコピーしていても、HTMLソースコードを貼り付ける場所を間違えると正常に表示されないのでご注意ください。
関連記事
![](https://linelab.jp/wp-content/uploads/2023/11/linelab-1-300x158.png)
![](https://linelab.jp/wp-content/uploads/2023/11/linelab-1-300x158.png)