【WordPress】投稿した記事に各種SNSの共有ボタンをつける(Jetpack)

投稿記事のSNS共有ボタンイメージ

コンテンツページ(投稿した記事)を各種SNSで共有(シェア)してもらえれば、サイトへの入り口が増え、アクセス数の向上に繋がる!
というわけで、情報サイトなどでよく見かける『共有』ボタンを設置してみた。

万能プラグイン「Jetpack」で簡単に設置!

上図のような『共有』ボタンは、おなじみのJetpackプラグインで簡単に設置できる。

Jetpackのインストール・設定については以下を参照。
JetpackはWordPressに必須のプラグインなのでインストールから設定までやってみる

  1. WordPress管理画面にログインし、左メニューから「Jetpack」を選択し、Jetpackダッシュボードにて「Sharing」が有効になっていることを確認する。
    有効になっていなければ、有効化する。
    JetpackメニューでSharingが有効である

  2. 左メニューから「設定」→「共有」を選択する。
    WordPress左メニュー「設定」→「共有」

  3. 共有ボタン欄に並んでいるアイコンをドラッグ&ドロップして設定する。
    この時、右側の濃いグレー部分にドロップしたアイコンは、非表示状態になり、『共有』または『続き』ボタンを押さないと表示されない。
    共有ボタンエリアでドラッグ&ドロップして設定する

    ひと通りドラッグ&ドロップしたらこんな感じ↓
    Jetpackの共有設定でアイコンのドラッグ&ドロップ例

  4. スタイルなどを設定して『変更を保存』ボタンをクリックして完了!ほら簡単。
    Jetpack共有でスタイルの設定イメージ

SNS共有ボタンの表示例

こんな感じ。
SNS共有ボタンの設置イメージ

『続き』をクリックすると、↓な感じ。
SNS共有ボタンの『続き』ボタンを押したイメージ

補足

Twitterプラグインイメージ

Twitterの公式プラグインをインストールすると、同様に各記事に共有ボタン(もちろんTwitterだけ)が付けられる。

公式って言葉に弱い僕はTwitterだけは公式プラグイン使おうと思ってたんだけど、ちょっと問題があった。

フロントページやカテゴリページなどの一覧表示ページで、Twitterの共有ボタンをクリックすると、Twitterのコメントがその時表示されているページタイトルになってしまう。
URLはちゃんと個別記事のものになっているのに、だ。

Jetpackの共有ボタンではそうならないため、今回はTwitterプラグインは削除して、Jetpackの共有ボタンを採用した。

次回のバージョンで直ってくれるといいなぁ。

投稿者: Output48

中学生の時に初めてHTMLに触れてからホームページ制作を独学で始める。 ベンチャー企業の営業、大手企業のPG・SEを経て、独立。 現在はとある企業のCTOと、変な名前の会社の社長をしてる。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください