WordPressに公式LinkedInシェアボタンを追加する方法(2つの方法)

LinkedInユーザーは非常に熱心で、価値のあるコンテンツをすぐに共有します。したがって、ビジネスに焦点を当てた記事を公開している場合は、そのトラフィックを活用するためにLinkedIn共有を追加することは必須です。📈

朗報は、WordPressでLinkedIn共有を追加するのが簡単であるということです。

すっきりとしたプロフェッショナルな外観にするには、LinkedIn の公式共有ボタンを使用するか、Facebook、Twitter、WhatsApp などのプラットフォームと並べて LinkedIn を表示できるプラグインを選択できます。

WordPressサイトで両方の方法をテストしましたが、それぞれに長所とトレードオフがあります。 🏆

このガイドでは、WordPressサイトに公式のLinkedIn共有ボタンを追加する素晴らしい方法を2つご紹介します。コードスニペットの方法とプラグインの方法の両方をカバーするので、ご自身に最適な方法を選択できます。

WordPressに公式LinkedIn共有ボタンを追加する

公式LinkedInシェアボタンを追加する理由

WordPressサイトにLinkedInシェアボタンを追加することで、読者は自分のネットワークと投稿を簡単に共有できるようになり、適切な人々にさらにリーチするのに役立ちます。

さて、疑問に思うかもしれません。なぜソーシャル共有プラグインではなく、公式のLinkedIn共有ボタンを使用するのか?

公式ボタンにはいくつかの大きな利点があります。

  • クリーンで集中:必要なボタンが1つだけ追加されるため、レイアウトはすっきりとプロフェッショナルに保たれます。
  • 認識しやすく信頼できる:公式のLinkedInブランディングは、訪問者にとってより馴染みのあるものとなり、クリックや共有の可能性を高めることができます。
  • 軽量:LinkedInからの単一の合理化されたスクリプトであり、使用していない他のプラットフォームのコードでサイトを遅くすることはありません

とはいえ、すべてのサイトオーナーがコードを貼り付けたり、スニペットを扱ったりしたいわけではありません。

場合によっては、LinkedInと並んでFacebook、Twitter、WhatsAppなどの複数の共有オプションを含めたい場合があります。

このように、視聴者を単一のネットワークに限定することなく、リーチを最大化できます。

その場合、AddToAny Share Buttonsのようなプラグインを使用すると、LinkedInだけでなく他のプラットフォームも数回のクリックで追加できるため、物事が簡単になります。

どの方法があなたに適していますか?

このチュートリアルでは、WordPressにLinkedIn共有ボタンを追加する2つの異なる方法を紹介します。

どちらもよく機能します。どちらを選ぶかは、サイトに何を求めるかによって決まります。

  • コードスニペット(WPCode)メソッド – 公式のLinkedInボタンを、すっきりとしたブランドスタイルで表示したい場合に最適です。このメソッドは軽量で高速です。ただし、小さなコードスニペットを貼り付ける必要があるため、簡単なセットアップ手順に慣れている方向けです。
  • ソーシャルプラグイン(AddToAny Share Buttons)メソッド – より柔軟性を求めるノーコードオプションが必要な場合に最適です。LinkedInをFacebook、Twitter、WhatsAppなどと一緒に追加できます。さらに、ボタンの配置やデザインをカスタマイズし、設定画面からすべてを管理できます。

👉 好みの方法にジャンプするには、これらのクイックリンクを使用してください:

方法1:コードスニペットでLinkedIn共有ボタンを追加する

LinkedIn には、簡単なコードスニペットを使用してサイトに共有ボタンを追加できる公式の共有プラグインがあります。LinkedIn のサーバーから小さな JavaScript ファイルを読み込み、ページにボタンを表示します。

このコードは、LinkedIn の共有プラグインから直接取得し、ボタンを表示したい任意の投稿に貼り付けることができます。

これはうまく機能しますが、すべての記事に対して手動で行うのはすぐに面倒になります。

公式LinkedIn共有ボタンプラグインコードをコピーする

代わりに、LinkedIn共有ボタンをすべてのブログ投稿に自動的に追加する簡単なPHPスニペットを使用できます。

このスニペットにはLinkedInの公式JavaScriptコードが含まれているため、手動で貼り付ける必要はありません。すべて処理されます。

ステップ1:WPCodeプラグインをインストールして有効化する

通常、このスニペットはテーマのfunctions.phpファイルに配置する必要があります。

しかし、それにはリスクが伴います。わずかなタイプミスでもサイトが壊れ、WordPress の White Screen of Death エラーが発生し、ウェブサイトにアクセスできなくなる可能性があります。

そのため、WPCodeプラグインの使用をお勧めします。これにより、テーマファイルを変更せずにPHPスニペットを安全に実行できます。

この方法で、数回のクリックでサイト全体にLinkedIn共有ボタンを追加できます。

WPCode ウェブサイト

WPCodeを複数のデモ環境でテストしましたが、テーマファイルを変更せずにカスタムコードを追加する最も安全で簡単な方法です。

実際、私たちは詳細なWPCodeレビューも公開しました。初心者向けで信頼性が高く、このようなものに最適です。

まず、WPCodeプラグインをインストールして有効化する必要があります。手順については、WordPressプラグインのインストール方法のチュートリアルをご覧ください。

注意:WPCodeには、このチュートリアルで使用できる無料バージョンもあります。ただし、プロプランにアップグレードすると、コードスニペットのクラウドライブラリ、スマート条件付きロジック、ブロック スニペットなどの機能が利用できるようになります。

ステップ2:コードの種類としてPHPスニペットを選択

それが完了したら、WordPressダッシュボードからコードスニペット » + スニペットを追加ページに移動し、「カスタムコードを追加(新規スニペット)」オプションを選択します。

「カスタムコードを追加(新規スニペット)」オプションを選択

これにより新しい画面に移動し、コードの種類として「PHPスニペット」を選択する必要があります。

次に、スニペットにタイトルを付けます。これは参照用ですので、「公式 LinkedIn シェアボタンを追加」のようなものをお勧めします。

後で更新したりオフにしたりしたい場合に、見つけやすくなります。

PHP スニペットオプションを選択
ステップ 3: シェアボタンコードスニペットを追加する

さて、サイトに公式のLinkedIn共有ボタンを表示するカスタムコードスニペットを追加する時間です。ボタンを表示したい場所に応じて、2つのバージョンのコードを使用できます。

  • 投稿の先頭(コンテンツの前)にLinkedInのシェアボタンを表示したい場合は、以下の最初のスニペットを使用してください。
  • 投稿の最後に(コンテンツの後ろに)配置したい場合は、別のバージョンも用意しました。

個人的には、ボタンは一番上に表示することをお勧めします。そうすれば、誰かが読み始めたときにすぐに表示されるので、共有が得られる可能性が高まります。

しかし、読者が共有を決定する前に投稿全体を最後まで読む傾向がある場合は、最後に配置しても同様に機能します。

コンテンツの前にボタンを表示するバージョンから始めましょう。

function add_linkedin_share_button_before($content) {
    if (is_single()) {
        ob_start();
        ?>
        <script src="https://platform.linkedin.com/in.js" type="text/javascript">lang: en_US</script>
        <script type="IN/Share" data-url="<?php echo esc_url(get_permalink()); ?>"></script>
        <?php
        $button = ob_get_clean();
        return $button . $content;
    }
    return $content;
}
add_filter('the_content', 'add_linkedin_share_button_before');

このコードをWPCodeの「コードプレビュー」ボックスに直接貼り付けることができます。

5行目と6行目では、LinkedInの公式共有プラグインJavaScriptを追加しました。しかし、次のような固定URLを使用する代わりに:

<script type="IN/Share" data-url="https://www.linkedin.com"></script>

使用したのは次のとおりです。

 <script type="IN/Share" data-url="<?php echo esc_url(get_permalink()); ?>"></script>

get_permalink()は便利なWordPressのショートカットと考えてください。これは、誰かが読んでいる投稿の正しいURLを自動的に取得します。

これにより、シェアボタンは常に正しい記事にリンクされ、投稿ごとに手動でコードを更新する必要がなくなります。

LinkedInのJavaScriptは誰でも同じなので、このコードをそのままコピーして使用できます。ただし、LinkedInのサイトからコピーした埋め込みコードを使用したい場合は、それも可能です。

コード内のデータURL行を編集する

5行目と6行目を更新するだけです。そして、正しい投稿を共有できるように、ハードコードされたURLをget_permalink()に置き換えるのを忘れないでください。

シェアボタンを投稿コンテンツのに配置したい場合は、代わりにこのバージョンを使用してください。

function add_linkedin_share_button_after($content) {
    if (is_single()) {
        ob_start();
        ?>
        <script src="https://platform.linkedin.com/in.js" type="text/javascript">lang: en_US</script>
        <script type="IN/Share" data-url="<?php echo esc_url( get_permalink() ); ?>"></script>
        <?php
        $button = ob_get_clean();
        return $content . $button;
    }
    return $content;
}
add_filter('the_content', 'add_linkedin_share_button_after');

これは逆の順序で同じように機能します。共有ボタンはコンテンツの後に表示され、記事を読み終えてから共有するかどうかを決める読者にとってはより自然に感じられるかもしれません。

いずれにしても、WPCodeはプロセスを簡単かつ安全にします。

ステップ4:スニペットを有効化してサイトを確認する

完了したら、「非アクティブ」スイッチを「アクティブ」に切り替え、「スニペットを保存」ボタンをクリックして設定を保存します。

LinkedInシェアボタンを追加するためのスニペットを保存する

最後に、WordPressサイトにアクセスして、公式LinkedInシェアボタンが機能していることを確認してください。

スニペットの最初のバージョンを使用した場合は、コンテンツが始まる直前の投稿の先頭にボタンが表示されます。

コンテンツ上部にあるLinkedIn共有ボタンのプレビュー

2番目のバージョンを選択した場合は、投稿の最下部までスクロールすると、そこに表示されているLinkedIn共有ボタンが見つかります。

ウェブサイトでどのように表示されるかのプレビューはこちらです。

コンテンツの末尾にあるLinkedInシェアボタンのプレビュー

方法2:プラグインでLinkedInおよびその他の共有ボタンを追加する

コードなしの設定を好む場合や、複数のソーシャル共有ボタンを追加したい場合は、プラグインを使用するのが優れた代替手段です。

このために、無料のAddToAny Share Buttonsプラグインの使用をよくお勧めします。このツールを使用すると、数回のクリックでLinkedIn、メール、Pinterest、その他の多くの共有ボタンを投稿に追加できます。

最も良い点は、サイト上のどこにもコードを管理したり貼り付けたりする必要がないことです。すべてはプラグインの設定画面から行われます。

ステップ1:AddToAny Share Buttonsプラグインをインストールして有効化する

開始するには、ウェブサイトに AddToAny Share Buttons プラグインをインストールして有効化するだけです。その方法がわからない場合は、初心者向けのガイド「WordPress プラグインのインストール方法」を参照してください。

プラグインがアクティブになったら、WordPress ダッシュボードの 設定 » AddToAny に移動します。

アイコンのスタイルを設定する

ここで、シェアボタンのアイコンサイズを選択できます。ピクセル単位でサイズを入力するだけで、サイト上でボタンを好きなだけ小さくしたり目立たせたりできます。

その後、アイコンのスタイルを調整できます。このプラグインでは、カスタムの背景色と前景​​色を選択したり、背景を透明にしたり、デフォルト設定のままにしたりできます。

個人的には、LinkedInボタンの元の青色を維持することをお勧めします。

これにより、訪問者はLinkedInのロゴをすぐに認識しやすくなります。

ステップ2:シェアボタンにLinkedInを追加する

次に、「共有ボタン」セクションまでスクロールダウンし、「サービスの追加/削除」ボタンをクリックします。これにより、プラグインがサポートするすべてのサービスの完全なリストが開きます。

これらは、読者があなたのコンテンツを共有するために使用できるプラットフォームです。ここから、「LinkedIn」オプションを見つけて選択してください。

ウェブサイトに完全なソーシャル共有バーを作成できるように、このリストから他のいくつかのサービスも選択することをお勧めします。

例えば、LinkedInの他にFacebook、WhatsApp、Instagram、あるいはGmailを追加したい場合があります。これにより、読者はコンテンツを共有するためのより多くの選択肢を得られます。

ソーシャルシェアボタンとしてLinkedInを選択
ステップ 3: 共有ボタンの配置を設定する

次に、「ユニバーサルボタン」セクションに移動し、「なし」オプションを選択してオフにします。

デフォルトでは、AddToAny Share Buttons プラグインは、他の共有ボタンの横に小さなプラス(+)アイコンを表示します。これにより、ユーザーは具体的に追加していない追加サービスのメニューを開くことができます。

例えば、WhatsApp共有ボタンを含めなくても、読者はプラスアイコンをクリックすることで投稿を連絡先に送信できます。

これは便利に聞こえますが、読者に選択肢が多すぎると、圧倒されることがあります。

オフにすることをお勧めします。これにより、選択したプラットフォームのみが表示され、共有ボタンがすっきりとシンプルに保たれます。

ユニバーサル共有ボタンを無効にする

その後、「共有ヘッダー」セクションを展開します。ここで、ソーシャル共有バーの上に表示される見出しを追加できます。

LinkedInのみを追加した場合、次のような具体的な表現を使用できます:「この投稿をLinkedInで共有する」

LinkedIn共有ボタンのヘッダーを追加

または、複数のオプションを備えた完全なソーシャルシェアバーを作成した場合は、「この記事を友達と共有する」のような、より一般的な見出しの方が適しています。

次に、LinkedIn共有ボタンの場所を選択する必要があります。

デフォルトでは、プラグインは投稿、ページ、抜粋、メディアページ、サイトフィード、さらにはフロントページにアイコンを表示します。お好みに応じて複数の位置を選択することもできます。

ただし、「投稿の先頭に表示」を選択することをお勧めします。

リーダーがすぐにシェアボタンを見ることができるため、これは最高の配置の1つです。そのため、WPBeginnerでも、すべての記事の先頭にシェアアイコンを表示しています。

ソーシャル共有アイコンの配置を選択
ステップ4:変更を保存してボタンをプレビューする

設定に満足したら、「変更を保存」ボタンをクリックして適用します。

さて、WordPressサイトの投稿をどれでも開いてください。LinkedInの共有ボタンが配置した場所に正確に表示されているはずです。

投稿の先頭を選択した場合、コンテンツのすぐ上に表示されるため、読者は簡単に見つけてクリックできます。

LinkedIn共有ボタンのプレビュー

よくある質問:WordPressのLinkedInシェアボタン

LinkedIn共有ボタンの追加に関して、読者からよく寄せられる質問をいくつかご紹介します。

LinkedIn共有ボタンはモバイルフレンドリーですか?

はい、公式の LinkedIn 共有ボタンは完全にレスポンシブであり、モバイルデバイスでも問題なく動作します。小さい画面に合わせてスケーリングされ、すばやく読み込まれ、携帯電話やタブレットでもクリックしやすいままです。

そのため、モバイル互換性を得るために追加の調整を行ったり、別のプラグインを使用したりする必要はありません。

LinkedIn共有ボタンの外観をカスタマイズできますか?

LinkedInは現在、公式ボタンのデザインに関してあまりカスタマイズオプションを提供していません。標準フォーマットで提供され、ボタンのサイズやレイアウトなどのオプションは利用できません。

ただし、CSSに慣れている場合は、ボタンの周りのコンテナをスタイル設定して、間隔や配置を調整できます。ただし、ボタンはLinkedInのサーバーからサイトに埋め込まれたミニウェブページのようなものであることに注意してください。

LinkedInによって制御されているため、独自のウェブサイトのCSSを使用して、色や形状などの内部の外観を変更することはできません。

スクロール中に表示されるフローティングLinkedIn共有ボタンを追加できますか?

はい、できます!公式のLinkedIn共有ボタンを使用しませんが、Facebook、Twitter、Pinterestなどの他のプラットフォームとともにLinkedInを含むフローティングソーシャルバーを追加できます。

フローティングソーシャルバーは、ユーザーがコンテンツをスクロールしても共有ボタンを常に表示しておくのに役立ちます。特に長いブログ記事やチュートリアルでは、読者が共有ボタンを見つけるために一番上や一番下に戻らない可能性があるため便利です。

ご興味があれば、WordPressでフローティングソーシャル共有バーを追加する方法に関する記事をご覧ください。WordPressでフローティングソーシャル共有バーを追加する方法

この記事で、WordPressに公式LinkedInシェアボタンを簡単に追加する方法を学べたことを願っています。また、「WordPressにLinkedInプロフィールを追加する方法」に関するガイドや、「WordPress向けの最高の無料ソーシャルメディアアイコンセット」の専門家のおすすめもご覧ください。

この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterFacebookでもフォローできます。

開示:当社のコンテンツは読者によってサポートされています。これは、当社のリンクの一部をクリックすると、当社が手数料を得る可能性があることを意味します。WPBeginnerがどのように資金提供されているか、それがなぜ重要か、そしてどのように私たちをサポートできるかについては、こちらをご覧ください。当社の編集プロセスはこちらです。

究極のWordPressツールキット

無料のツールキットにアクセスしましょう - すべてのプロフェッショナルが持つべきWordPress関連の製品とリソースのコレクションです!

読者とのインタラクション

28 CommentsLeave a Reply

  1. こんにちは、このコードを提供していただきありがとうございます。このボタンをウェブサイトに追加しましたが、削除しようとしても何度も戻ってきてしまいます。functions.phpからコードを削除しましたが、何度も戻ってきます。
    助けてください。

  2. WordPressでブログをLinkedInに共有すると、写真が添付されないのはなぜか知っている人はいますか?私は一つ持っていますが、LinkedInに共有しようとすると消えてしまいます。FacebookやTwitterで共有したときはうまくいきましたが、LinkedInではうまくいきませんでした。テキストはうまく表示されますが、写真はありません。なぜかわかりません。ヒントはありますか?ありがとうございます!

  3. ドメインを所有している「無料」のWordPressにLinkedIn共有ボタンを追加する方法を知っている人はいますか?他の会社がWordPressページを「ホスト」している可能性があるため、これは重要かどうかはわかりません。とにかく、テキストウィジェットを試して、ブログ投稿の最後にHTMLを追加しました。どちらも機能していないと思います。なぜなら、テキストのページに移動する奇妙に見えるハイパーリンクしか表示されないからです。

  4. こんにちは、

    コードを追加しましたが、表示されません。LinkedInの共有ボタンを表示させるための新しいアップデートはありますか?

    ありがとう

  5. Google+とLinkedinのシェアボタンをWPブログ(www.maintec.com/blog)に追加するために、カスタムコードセクションに以下のコードを使用しました。

    Google+

    <div class=”sharer”><script type=”text/javascript” src=”https://apis.google.com/js/plusone.js”></script> <g:plusone size=”tall”></g:plusone></div>

    Linkedin

    <div class=”sharer”><script type=”text/javascript” src=”http://platform.linkedin.com/in.js”></script><script type=”in/share” data-url=”<?php the_permalink(); ?>” data-counter=”top”></script></div>

    Google+ボタンは正常に動作していますが、LinkedIn共有をクリックしても期待通りの結果が得られません。何がどこで間違っているかアドバイスしてもらえますか?

  6. どういたしまして。はい、横長のものはうまく機能しますが、当社のフローティング共有ボックスのようなものがある場合は、縦長の共有ボックスも良いでしょう。

  7. 以下の意味がよくわかりません。
    公式LinkedInシェアボタンを追加するには、任意のテーマファイル(single.phpなど)を開き、投稿ループ内に以下のコードを追加してください。

    サイトに何か問題を起こしたくないので、正しいファイルを見つけて開いたり編集したりできるか確認したいです。ダッシュボードのテーマファイルはどこで見つけられますか?また、ファイル内のどこにコードを貼り付ければよいですか?

    • テーマファイルは、テーマのフォルダ wp-content/themes/yourthemename/ < Editor にあり、single.php ファイルを編集します。WordPress に関する知識がない場合は、プラグインが登場するまで待つことをお勧めします。

      管理者

  8. ついにLinkedInがこれをやってくれた、一週間遅いけど、私は自分で似たようなものを作ることに成功しました。
    次に必要になったら、あなたのコードを使わせてもらいます、ありがとう!

  9. LinkedInがこれを最終的に行ってくれたことを嬉しく思います。Socializeプラグインのために自分で作成しようとAPIを試しましたが、面倒なことになりました。このコードを使用して、新しいLinkedInボタンでプラグインを更新することができました。

返信を残す

コメントを残していただきありがとうございます。すべてのコメントは、当社のコメントポリシーに従ってモデレーションされますので、ご了承ください。メールアドレスは公開されません。名前フィールドにキーワードを使用しないでください。個人的で有意義な会話をしましょう。