![[WordPress] 好きな画像でブログを共有したい【Share This Imageプラグイン】](https://chiilabo.com/wp-content/uploads/2020/09/instructor-m.png)
書いたブログをTwitterにシェアする時に、アイキャッチ画像とは別の画像を選びたいな。
説明の図解を共有できたら、便利なはず。
今回は、TwitterやFacebookに投稿するときに、Pinterestのように画像(主に図解)を選んで、共有したいと思って、WordPressプラグインを導入することにしました。
1. ブログと画像のSNS共有
ブログをSNSに共有するときに好きな画像を表示するには、大きく2つの方法があります。
1つ目の方法は、アイキャッチとは別の画像をSNS共有する方法です(参考:WordPressの記事をTwitterにシェアする時に好きな画像を指定する方法(All in One プラグイン)。
2つ目の方法は、画像に共有ボタンを追加する方法です(参考:写真にSNSシェアボタンを設置「Share This Image」の使い方 )。
2. Share This Imageプラグイン
今回は、ブログ内の好きな画像(主に図解)を共有したいので、2つ目の方法、「Share This Image」プラグインをインストールすることにしました。
Share This Image – WordPress プラグイン | WordPress.org 日本語

「Share This Image」プラグインをインストールすると、ブログ内の画像の左上に共有ボタンが追加されました。


このボタンから画像とブログへのリンクを共有できるのね!
これまでのブログ共有ボタンは、アイキャッチ画像だったのですが、このように画像を選択して、共有できました。

3. 「Share This Image」のパーミッション
プラグインをインストールすると、パーミッション(権限)の画面が表示されました。必ずしも「opt-in」が必要ではないようなので、今回は「スキップ」を選択しました。

4. モバイル端末で共有ボタンを絞り込む
スマホでも画像に共有ボタンを追加してみます。スマホの場合はマウスがないので、常に共有ボタンが表示されます。


あれ? 全部の画像に共有ボタンがついてる!?
モバイル端末で表示してみると、ページ内のすべての画像に共有ボタンが追加されてしまいました。
ロゴやアイコンにも共有ボタンが表示されるのは、だいぶ鬱陶しいです。

「画像ブロック」で追加した画像だけに共有ボタンをつけたいと思います。
画像ブロックの画像は、「.wp-block-image」のブロック要素に含まれるので、「Selector」で指定しました。

5. STIリンクですっきり
「Share This Image」プラグインの設定を見ていると、「STI・リンク」という設定が気になりました(デフォルトではオンになっています)。

オフ・オンで共有時のリンクURLを比較してみます。

長いリンクが短縮アドレスに変わっています。

「STI」って何の略?

STIという短縮URLの仕組みがあるのかと思って調べてみましたが、見つかりませんでした。
たぶん「Share This Image」の頭文字だと思います。
6. リンクのコピーボタンは有料プラン
SNS共有以外のボタンを表示させるには、有料プランが必要です。

年間で39$(約4,376円 2021年10月10日現在)です。


永続ライセンスなら、アリかもと思ったんだけど、毎年かぁ。
こちらもどうぞ

