ソーシャルシェアボタンを設置する

ソーシャルシェアボタンを設置するブロック

「このページをシェア」ブロックでソーシャルシェアボタンが設置できますが、はてブとLINEが含まれていません。また、Twitterでつぶやいたときに画像つきのTwitterカードで表示したいです。というか、されたいです。

というときには、アドオンを2つ追加することで実現できそうです。

アドオンの追加方法がわからない人はこちらで。

私はおすすめアドオンの記事を書いた後に、この2つをインストールしました。じつは初期にもインストールしてみたんですが、よくわからなかったのでアンインストールしたんです。でもせっかくなので再インストールして、じっくり悩んでみました。

Social Share Lite(ソーシャルシェア・ライト)

Social Share Lite

こちらはインストール後、ブロックを配置して、表示したいソーシャルシェアボタンにチェックを入れるだけです。

追加できるのはこれ。

  • Facebook いいね
  • Twitter ツイート
  • Google+ プラス1
  • はてなブックマーク
  • Tumblr シェア
  • Pinterest Pin it ボタン
  • LinkedIn シェア
  • Pocket ボタン
  • LINEで送る

ただちょっと並びが残念。全部表示するとこんな感じです。Google+ はサービス終了のためか、表示されていません。(2021.1.20時点の状態。キャプチャ画像です)

ソーシャルシェアライトのサンプル画像.png

ソーシャルシェア・ライトを使うときに気をつけたいこと(はてブはHTMLブロックで別に設置をおすすめ)

私はサイト作成中ずっと Windows10 + Google Chrome で作業していたので気づかなかったんですが、これ以外のブラウザでサイトを見ると、アドレスバーの鍵マークが中途半端です。気がついたきっかけは、iPadでサイトのチェックをしていたときです。(iPadでもChrome使ってたんですが、Windowsのときと挙動が違うみたいです。)

以下、キャプチャ画像です。Windows10 PCで、同じアドレスを Google Chrome・Firefox・Microsoft Edge で見ている状態です。Google Chromeは鍵マークですが、あとの2つはダメマークになってます。

httpsなので、本来なら鍵マークになるよね?と思うんですけど…。ページの「一部」が安全じゃないですよって言われてます。

Google Chrome は鍵マーク

Firefox だと注意付きの鍵

Microsoft Edge は完全にダメマーク

で、ソーシャルシェア・ライトを入れていないページがあるので、そこも見てみました。するとちゃんと鍵マークになってます。

Firefox 鍵マークになってます。

Microsoft Edge も鍵マークになってます。

個別に設置してあるPocketボタンは全部のページに設置してあるので、これは原因ではない。

では印刷ボタンか、ソーシャルシェア・ライトの中のどれかなのか。ひとつづつ消していって確認してみました。

結果、ソーシャルシェア・ライトの「はてなブックマーク」のチェックをはずしたら、鍵マークになりました。他のものは全部入ってても大丈夫でした。

この対策として、HTMLブロックにはてなブックマークボタンのタグを入れたものを、ソーシャルシェア・ライトとは別に設置しました。はてブのタグそのものが原因ではないようで、ちゃんと鍵マークのままでした。

(タグの入手はこのページ後半の「ソーシャルシェアボタンをHTMLで設置することもできる」のリンク先から)

Open Graph Tags Lite

Open Graph Tags Lite

こちらはブロックではないので、管理画面から設定します。

メタタグのところに、ソーシャル用のタグをいっぱい入れてくれるアドオンです。

こんなタグが入るみたいです。もちろん内容は自動的に入ります。

<meta property="og:title" content="">
<meta property="og:description" content="">
<meta property="og:type" content="">
<meta property="og:url" content="">
<meta property="og:image" content="">
<meta property="og:image:width" content="">
<meta property="og:image:height" content="">
<meta property="og:site_name" content="">
<meta name="twitter:card" content="">
<meta name="twitter:site" content="">
<meta name="twitter:title" content="">
<meta name="twitter:description" content="">
<meta property="og:locale" content="">
<meta property="og:updated_time" content="">

この2つのアドオンを入れると、管理画面に項目が増えます。

「システムと設定」の最後にソーシャルシェア・ライト

そして単独で「Open Graph Tags Lite」

ソーシャルシェア・ライトは選択項目がありますが、テーマを変更しなければデフォルトのままで良さそうです。

Open Graph Tags Lite は自分で属性を作る(必要なら)

Open Graph Tags Lite の文字をクリックすると設定項目が出てきます。

私はTwitterユーザー名しかいれていません。(Facebookやってなくてわからないので)

そしてTwitterカードのカードタイプなどの設定の仕方がわからなくて困りました。検索しても詳しい説明が出てこない。半日くらい悩みました。時間使いたくないのに。

 

で、「ん?ページ属性?属性作ればいいの?」と思いついて、で作ってみたらうまくいきました。

属性に「og:image」は追加されてるので、必要なら他のも追加されてるよねって思い込んでたんですが…あとは自分でやってねって事だったらしい。素人泣かせな…(T_T)

属性の種類を知る でやったのと同じように、「ページとテーマ >属性」から、属性を追加 >タイプを選択 >オプションリスト を選択して、次の画像のように設定して保存。

og_tipe と twitter_card を作りました。

で、ページに追加して設定してみました。

結果、ちゃんとタグに反映されました。よかったーーー。

 

何も設定しない状態のページのソースがこれ。articleにしたいところがwebsiteになってます。sumallyもlargeじゃないやつにしたいときもあるし。

07.何も設定してないソース.png

それが、属性追加のあとはこうなりました。

08.属性を追加して設定したソース.png

articleとsumallyになりました~~!

サイト公開後に試してみたいと思います。Twitterカードがどのように表示されるか確かめるツール

こちらもすごく参考になりました。
Twitterカードとバリデータの使い方の詳しい解説記事

HTMLで印刷ボタンをつける

ページに印刷ボタンを付けることもできます。ボタンをクリックすると印刷ダイアログが開きます。ChromeならPDF保存も選べるので便利だと思います。

ソーシャルシェアボタンをHTMLで設置することもできる

ソーシャルシェア・ライトを使わずに、「HTMLブロック」にタグを入力してソーシャルシェアボタンを設置することもできます。設置用のタグはそれぞれの公式サイトで入手できます。

Twitterカード設定を手動ですることもできます。アドオンの使い方が本当にわからなくて、でも手動でもできるからいいやって思ってました。

このサイトのボタンたち

このサイトは、ページ右上(スマホではサイトタイトルの下)にPocketのボタン、ページの記事下にソーシャルシェアボタンと印刷ボタンを置いています。

Pocketボタンはデザイナーさんに叱られそうな位置に宙ぶらりんになってますが、ページテンプレートを触れなくて位置調整ができないので仕方ないです。このくらいはいいんです、気にしません。

で、Pocketは「後で読む」ためのボタンなので、読む前に目に入る位置に置いておきたくて「あ、ここ空いてるじゃん」て感じに入れました。HTMLブロックです。

ページ記事下のソーシャルはソーシャルシェア・ライトブロックとHTMLブロックです。

設置できないわけではないので、並び方がどうのというのは気にしなければいいんですけど。気になる人にとっては、ソーシャルシェアボタンの並び方がコントロールできないのは『あきらめポイント』かなと思います。たぶん自分でcssとかphpとかできる人は何とかなるんだろうな…

WordPressにソーシャルシェアボタンを設置する

これはWordPressにオリジナルアイコンで設置するための記事ですが、参考までに。phpを触る必要があります。私にはできません。いつかやってみたいけど。