LINE公式アカウントの友だち追加ボタンが表示されない時の対処法

LINE公式アカウントの友だち追加ボタンをWordPress（ワードプレス）やアメーバブログ（アメブロ）に設置したのに表示されない場合、いくつかの原因が考えられます。

そこで、この記事では、LINE公式アカウントの友だち追加ボタンを設置したのに表示されない時の対処法を初心者にわかりやすく解説します。

LINE公式アカウントの友だち追加ボタンが表示されない原因

LINE公式アカウントの友だち追加ボタンを自分のサイトに設置したのに表示されない場合、以下の原因が考えられます。

友だち追加ボタンが表示されない原因

友だち追加ボタンのHTMLソースコードが間違えている

友だち追加ボタンが表示されない原因の一つに、友だち追加ボタンのHTMLソースコードを正しくコピーできていない可能性が考えられます。

念のため、HTMLソースコードに誤りがないか確認してみてください。

なお、HTMLソースコードの右下にある「コピー」をクリックすれば、正しくコピーすることができます。

友だち追加ボタンのHTMLソースコードの取得方法は、以下の記事をご参照ください。

友だち追加ボタンの画像が貼り付けられている

以下のように、どこかで入手した「友だち追加ボタンの画像」を貼り付けていませんか。

「友だち追加ボタンの画像」を貼り付けただけでは、友だち追加ページに移動するリンクが設定されていないので、友だち追加ボタンの機能はありません。

友だち追加ボタンを押して友だち追加ページに移動するためには、LINE公式アカウントの管理画面から友だち追加ボタンのHTMLソースコードを取得する必要があります。

友だち追加ボタンのHTMLソースコードの取得方法は、以下の記事をご参照ください。

友だち追加ボタンのHTMLソースコードを貼り付ける場所を間違えている（WordPress）

WordPress（ワードプレス）で友だち追加ボタンのHTMLソースコードを貼り付ける場合、「ブロックエディタ」と「クラシックエディタ」で貼り付け方が異なります。

クラシックエディタを使用している場合

WordPress（ワードプレス）でクラシックエディタを使用している場合、「ビジュアル」の状態でHTMLソースコードを貼り付けても友だち追加ボタンは表示されません。

クラシックエディタで友だち追加ボタンを表示するには「テキスト」に切り替えてからHTMLソースコードを貼り付ける必要があります。

投稿編集画面で「テキスト」をクリックします。

友だち追加ボタンのHTMLソースコードを貼り付けます。

以上で完了です。

なお、「ビジュアル」をクリックすると、友だち追加ボタンの表示を確認することができます。

友だち追加ボタンをWordPressのヘッダー、サイドバーに設置する方法と、ボタンの大きさ（サイズ）と位置を変更したい方は、以下の記事をご参照ください。

友だち追加ボタンのHTMLソースコードを貼り付ける場所を間違えている（アメブロ）

アメブロ（アメーバブログ）では、通常の画面（通常表示）に友だち追加ボタンのHTMLソースコードを貼り付けても友だち追加ボタンは表示されません。

アメブロで友だち追加ボタンを表示するには「HTML表示」に切り替えてからHTMLソースコードを貼り付ける必要があります。

投稿編集画面の下部にある「HTML表示」をクリックします。

友だち追加ボタンのHTMLソースコードを貼り付けます。

以上で完了です。

なお、「通常表示」をクリックすると、友だち追加ボタンの表示を確認することができます。

友だち追加ボタンをアメブロのサイドバーに設置する方法と、ボタンの大きさ（サイズ）と位置を変更したい方は、以下の記事をご参照ください。

関連記事