せっかく書いた記事だし色んな人に見てもらいたい！というのはアフィリエイターならもちろん、ブログでもWEBで書いてる以上は誰かが見て感想をくれれば…なんて思うものです。
という事でjetpackの機能でSNSシェアボタンを記事に表示させてみようかと思いましたが、何故か出てこない現象に悩まされましたので解決方法を残しておきます。
共有設定をしたのにSNSシェアボタンが表示されない
jetpackを導入したタイミングで
こんな感じで投稿ページに「ソーシャル共有アイコンを表示する。」表示が出たからチェックを入れたのに、実際に投稿した記事を確認してもウンともスンとも。
どうやらここにチェックをするだけでは表示されるようにはならないようです。
わかりづらい！
jetpackの共有設定を変更する
jetpackの機能でシェアボタンを表示させようとした場合、
・どのSNSの共有ボタンを表示させるか
・どのような形で表示させるか
・どのページに表示させるか
を設定しておかないといけません。
メニューの「jetpack」⇒「共有」⇒「共有ボタン」と進むことで設定が可能ですので順に見ていきましょう。
表示させるSNSの設定
まずはどのSNSシェアボタンをページに表示させるかを設定します。
「+共有ボタンを追加」をクリックするとSNSボタンが表示されます。
この中から表示させたいものをクリックして選択していきます。
FacebookやTwitterなど好きなものを選べば良いと思いますが、ボタンの数が多すぎるとユーザーインターフェースが悪くなりますので2個～多くて6個程度に抑えておくとよいでしょう。
ボタンを非表示にする場合は選択したSNSボタンを再度クリックする事で表示⇔非表示を切り替えることができます。
表示形式の設定
表示したいSNSシェアボタンが選択できたらどのように表示させるかを選択します。
アイコン+テキスト
アイコンのみ
テキストのみ
公式ボタン
上記の4つのパターンからサイトのカラーや記事ページのレイアウトに合わせて選択することが可能です。後からCSSで全部作り替える！という方はデフォルト（アイコン・テキスト）のまま先に進んでしまって構いません。
表示するページの設定
最後にどのページに表示させるかを設定します。ここでチェックをつけておかないとページにSNSシェアボタンが表示されませんので注意してください！
大体チェック項目に書いてある通りですので、「投稿」「固定ページ」など表示させたいページにチェックを入れておきます。
これで表示設定は完成です。記事ページをリロードすると記事内にSNSシェアボタンが生成されているのが分かるかと思います。
その他のSNSをシェアボタンとして登録する
デフォルトで用意してあるシェアボタン以外に共有したいSNSサービスがあれば追加することも可能です。ただし、jetpackの設定からではなく、ダッシュボードの「設定」⇒「共有」からになりますので注意してください。
共有を開くと、利用可能なサービスの項目に「新サービスを追加」というコンテンツがありますので、こちらから登録を行います。
新サービスを追加
試しにシェアボタンとしてよく用いられているはてなブックマーク（はてブ）のシェアボタンを作成してみましょう。
新サービスを追加をクリックすると
このような設定画面がポップアップしますので、ここに必要事項を記入していきます。
サービス名
サービス名にはそのまま「はてなブックマーク」を記入します。記入した内容がページに表示されますので間違いの無いように記入しましょう。
共有URL
各SNSの共有URLを記入するエリアになります。
はてなブックマークの場合は「http://b.hatena.ne.jp/bookmarklet?url=%post_full_url%」とする事で該当記事ページを共有することが可能です。
アイコンURL
はてなブックマークの素材集からはてなブックマークのロゴをダウンロードし、ワードプレスのメディアにアップロードしておきます。
そちらのURLを記入してください。
全て記入できれば「共有ボタンを作成」を押して完了です。
有効化後にライブプレビューを見てみると
このようにはてなブックマークのシェアボタンが出てくるかと思います。
なお、このままですと他のSNSシェアボタンと色味が違いますのでCSSで調整してあげる必要があります。
まとめ
という事で今回はjetpackを使用したSNSシェアボタンの表示方法と追加方法でした。
どこかに説明書きがあったのかもしれませんがjetpackを設定した時に確認していなかったせいで頭をかしげることになりました。
もし同じ状態で困っている場合は一度上記の項目を見直してみてください。
