09.共有－Jetpack by WordPress.com

2014/01/06 2014/11/22

wordpressを利用していて一番利用されているプラグインが、
このwordpress.comが提供しているJetPackではないでしょうか。
JetPackプラグインは機能が多いのですが、ここでは「共有」の機能についてご紹介します。

はじめに

Jetpack by WordPress.comのすべての機能を使っているでしょうか。
私はこれまで必要なものだけを使って、ほかの機能はあまり気にしていない状態でした。

ざっと全体の機能を確認しましたので、ご紹介しておきます。

Jetpack の共有の機能概要は以下のように表示されます。

共有

共有設定を変更するには、一般設定 → 共有メニューを利用してください。

有効化セクションに共有サービスをドラッグ & ドロップし、サイトに表示させます。非表示セクションにドラッグすると、「共有」ボタンをクリックした際にのみ表示されます。

詳しくは共有ツールサポートページをご覧ください。この動画で簡単な機能概要を見ていただくこともできます。

JetPack共有詳細

設定方法

共有はサイトに訪れてくれた方が、投稿の内容を気に入ってくれた際に、
自分が利用しているSNSに対して共有(Share)する際に利用するボタンを設置する機能です。

「共有」を有効化すると以下のようにサイドメニューに[共有]が表示されます。
この[共有]メニューは、JetPackのパブリサイズ共有を有効化した場合にも表示されます。

サイドバー共有メニュー表示

その為、両方を有効にしている場合には、
同じ[共有]設定内に「パブリサイズ共有」と「共有」の設定を行う部分が表示されます。

パブリサイズ共有で表示される共有設定内の項目

サイドバー共有の表示

尚、パブリサイズ共有の機能の詳細は以下でご紹介しています。
01.パブリサイズ共有の機能－Jetpack by WordPress.com

「共有」機能を有効にした際に表示される設定項目は以下のようになります。

共有設定

利用可能なサービス

JetPack共有では、Facebookやtwitterという有名どころだけでなく、
以下の共有サービスが利用できます。

※以下リンクをクリックすると、このページの対象SNSの説明にスクロールします。

Facebook
Google
Twitter
Tumblr
StumbleUpon
LinkedIn
Pinterest
Pocket
Digg
Reddit
メール
印刷

個人的には、はてぶ™が欲しいところではありますが、海外製ということでまぁ仕方ないですね。

設定画面で各共有サービスを有効にするには、
[利用可能なサービス]に表示されているボタンを[有効化済みのサービス]へドラッグします。

共有ボタンの配置方法

ボタンが[有効化済みのサービス]に配置されると、
下部のライブプレビューに対してボタンが表示されイメージを確認することができます。

共有ボタンの配置とプレビュー

すべてのSNSを表示するように設定を行うと以下のようになります。

共有ボタンの全配置

ボタンのスタイル

尚、ボタンのイメージは下部の[ボタンのスタイル]のプルダウンを選択することで、
ボタンイメージを変更することができます。

ボタンスタイルオプション

ボタンスタイルの選択は注意が必要

ただ、このボタンはあくまでもイメージで実際にサイトを表示した際に表示されるボタンは異なっています。
厳密にはGoogle+の共有ボタンは、
プリビューのデザインではなく以下のデザインを採用すべきであると考えています。

認められるGoogle＋ボタン

「公式ボタン」を選択し実際にサイトを表示した際には正しく表示が行われます。
ただし、その他の[ボタンのスタイル]を選択することはまずいかなと感じます。

Google＋ボタンの例と公式ボタン

以前、Google+1ボタンの改変したいと思った時に確認することにてご紹介していますが、
念のため「ボタンポリシー – Google+ Platform — Google Developers」を
ご確認されることをお勧めします。

例えば英語版の共有ボタンとして推奨されているデザインは以下のようなデザインです。

Share – Google+ Platform — Google Developers

Google＋ボタンの例（英語）

日本語表示でも以下のようなデザインになります。

共有 – Google+ Platform — Google Developers

Google＋ボタンの例（日本）

また使用してはいけない表示方法、デザインとして以下のようなPDFが提供されています。

A Style Guide for Promoting your Google+ Page

Googleのポリシー

個人的にはJetPackのプリビュー画面のデザインの方が見た目が綺麗なので好きなのですが、
Googleの推奨デザイン以外を利用するのはあまり良くないかなと危惧するところです。

あくまでもスタイルの変更は自己責任でお願いします。

ボタンの共有ボタン内表示

話がずれましたが、ボタンはドラックするだけで簡単に表示を行うことができるので簡単です。
また、スペースの都合などで、ボタンをまとめる機能も備わっています。

全てをまとめると以下のような感じになります。

共有ボタンのプルダウン表示例

現実的なまとめ方は以下のような感じかと思います。

共有ボタンのプルダウン表示共用例

共有ラベル

共有ラベルに指定したテキストは、ボタンの表示横のラベルとして表示されます。

共有うラベルの変更

リンクを開くウィンドウ

リンクを開くウィンドウの設定は[新規ウィンドウ]と[同一ウィンドウ]から選択ができますが、
この設定がどのように働くのかを突き止めることができませんでした。

共有時のポップアップ制御かと思いますが設定に関わらずポップアップ表示されます。

ボタン表示

ボタン表示の設定は共有ボタンをどのページ種別の際に表示を行うかを設定します。

フロントページ、アーカイブページ、検索結果ページ
投稿
固定ページ
メディア

この設定で抜粋表示を行っている場合には、共有ボタンを表示しないといった制御が行えます。

CSS と JavaScript を無効化

CSS と JavaScript を無効化の設定を有効化すると、
CSSのスタイルが無効化され、レイアウトなどを自分で別途定義するようになります。
その為、無効化した時点では以下のように体裁が乱れます。

また[続き（共有）]ボタン内にまとめられた各ボタンはJavaScriptの効果が無効になります。
その為、無効化した時点ではリンクは動作しなくなります。

CSSとJavaScriptを無効化を有効

この設定を有効化する際にはJetPackの生成するHTMLに合わせて、
別途CSSとJavaScriptを準備し、カスタマイズを行う必要があります。

共有動作

実際に各共有サービスへ連携を行うと以下のようになります。

Facebookへの共有

Facebookは言わずと知れたSNS最大手で多くの人が利用されていることでしょう。

必要ないとは思いますが、利用登録の方法は以下でご紹介しています。
Facebook共有サービス(SNS)の利用登録

JetPackを利用した共有の動作は以下でご紹介しています。
Facebook™への共有をJetpack by WordPress.comで行う動作

フォローされているユーザーからの表示

Google+への共有

Google+も検索大手GoogleのSNSでちょっと他のSNSとは着眼点が異なっていますが、
+1することによってサイトを評価するといった意味あいが強い印象です。
自分が評価した+1をアクティビティーとして見たり公開したりすることはできますが、
それ自体を媒体としてコミュニケーションをするといった用途ではありません。

必要ないとは思いますが、利用登録の方法は以下でご紹介しています。
Google+共有サービス(SNS)の利用登録

JetPackを利用した共有の動作は以下でご紹介しています。
Google+™への共有をJetpack by WordPress.comで行う動作

Google＋ストリーム

Twitterへの共有

Twitterも言わずと知れたSNSというか短文投稿サービスの最大手です。
ブログなどのコンテンツを作成するとなると敷居が高く、何を書くか？と迷うところではありますが、
Twitterであれば他愛もないつぶやきを公開して共有することで、共感を得ることができます。

いいと思ったサイトなどを紹介して、拡散することでアクセスが増えたり、
炎上したりするのはよく耳にすることでしょう。
拡散力という点では一番威力のあるサービスであると思います。

必要ないとは思いますが、利用登録の方法は以下でご紹介しています。
twitter共有サービス(SNS)の利用登録

JetPackを利用した共有の動作は以下でご紹介しています。
Twitter™への共有をJetpack by WordPress.comで行う動作

Twitterタイムライン表示

Tumblrへの共有

必要ないとは思いますが、利用登録の方法は以下でご紹介しています。
tumblr共有サービス(SNS)の利用登録

JetPackを利用した共有の動作は以下でご紹介しています。
Tumblr™への共有をJetpack by WordPress.comで行う動作

Tumblrタイムライン表示

StumbleUponへの共有

StumbleUponはあまり日本では利用が進んでいないSNSではないかと思います。
SNS(Social Networking Service)というよりもSBS(Social Bookmarking Service)な感じで、
日本でいうところの「はてなブックマーク」のようなサービスです。

必要ないとは思いますが、利用登録の方法は以下でご紹介しています。
StumbleUpon共有サービス(SNS)の利用登録

JetPackを利用した共有の動作は以下でご紹介しています。
StumbleUpon™への共有をJetpack by WordPress.comで行う動作

共有されたLikes表示

LinkedInへの共有

LinkedInと言えば、履歴書SNSとしてビジネスユースで利用されていることが多いようです。
実際にシリコンバレーなどでは使っていて当たり前といったものになっているようです。

もしサイトやブログなどで自身のスキルを発信されているようでしたら、
LinkedInへの共有を行うとよりコミュニケーションが活発になるかもしれません。

必要ないとは思いますが、利用登録の方法は以下でご紹介しています。
LinkedIn™共有サービス(SNS)の利用登録

JetPackを利用した共有の動作は以下でご紹介しています。
LinkedIn™への共有をJetpack by WordPress.comで行う動作

尚、LinkedInによる共有は共有を行ってから、
LinkedInのアップデートに表示されるまで少々のタイムラグが必要です。
数分後に公開されるといった感覚で表示されます。

共有されたアップデート表示

また、JetPackの共有ボタンで「公式ボタン」を選択した場合、
LinkedInの共有ボタンが表示されないという症状に出逢いました。
ボタンのスタイルを「ボタンとテキスト」にすることで共有ボタンを表示することができます。

JetPackのLinkedIn共有ボタン

Pinterestへの共有

必要ないとは思いますが、利用登録の方法は以下でご紹介しています。
Pinterest™共有サービス(SNS)の利用登録

JetPackを利用した共有の動作は以下でご紹介しています。
Pinterest™への共有をJetpack by WordPress.comで行う動作

共有されたピン表示

Pocketへの共有

Pocket

必要ないとは思いますが、利用登録の方法は以下でご紹介しています。
Pocket™共有サービス(SNS)の利用登録

JetPackを利用した共有の動作は以下でご紹介しています。
Pocket™への共有をJetpack by WordPress.comで行う動作

Pocket保存された投稿

Diggへの共有

Digg

必要ないとは思いますが、利用登録の方法は以下でご紹介しています。
Digg™共有サービス(SNS)の利用登録

JetPackを利用した共有の動作は以下でご紹介しています。
Digg™への共有をJetpack by WordPress.comで行う動作

保存後のSaved一覧表示と削除

Redditへの共有

必要ないとは思いますが、利用登録の方法は以下でご紹介しています。
Reddit™共有サービス(SNS)の利用登録

JetPackを利用した共有の動作は以下でご紹介しています。
Reddit™への共有をJetpack by WordPress.comで行う動作

保存されたRedditのsubreddit表示

メール送信

メール送信による共有もJetPackから行うことができます。
とは言え、追加のメッセージなどを入力することはできませんので、
送信先の方には事前にURLを共有するように連絡しておくといいかもしれません。

JetPackを利用した共有の動作は以下でご紹介しています。
電子メール(email)への共有をJetpack by WordPress.comで行う動作

email共有送信メール

印刷

印刷を行うこともJetPackから行うことができます。
とは言え、レイアウトなどは選択できませんし
そのままブラウザを印刷した方が見栄えは綺麗かもしれません。

JetPackを利用した共有の動作は以下でご紹介しています。
印刷をJetpack by WordPress.comで行う動作

印刷ダイアログ(Chrome)

さいごに

ざっと、Jetpack by WordPress.comを利用した共有の機能をご紹介しました。

使えるものもあれば使いづらいものもありますが、
簡単に導入ができますので、一つの選択肢として考えれば便利でしょう。

実際サイトに設置した共有ボタンを自分で利用することは、あまりないかもしれません。
投稿を行うと自動的に投稿されるように設定しておくことで、より効率的に作業が行えます。

そうした機能をJetPackは提供しています。
01.パブリサイズ共有の機能－Jetpack by WordPress.com

ただ、パブリサイズ共有を利用して共有が行えるSNSも限られています。
自動的に共有を行う動作では普段利用しているSNSが利用できない場合には、
こちらの共有機能を利用して個別に共有を行うといいでしょう。

FacebookおよびFacebookロゴは、
フェイスブック・インコーポレイテッドの登録商標です。
登録番号は以下の通りです。
第５０３５５５５号、第５０６２３４４号、第５０６２３４４号防護第１号、第５０８６４２５号
第５１５００５１号、第５４８７９５９号、第５５７６７０９号、第５５８６７５１号
FacebookおよびFacebookロゴは、
フェイスブック・インコーポレイテッドの国際登録商標(１０７５０９４)です。

Google™はGoogle Inc. の登録商標（第４４７８９６３号及び第４９０６０１６号）です。
GoogleロゴはGoogle Inc. の国際登録商標です。
国際登録番号：８８１００６及び９２６０５２及び１０８６２９９及び１０９１９９０及び１１４５９３４
Google+、Google+ロゴはGoogle Profiles™ サービスの一部を示し、
Google+、Google+ロゴはGoogle Inc. の商標です。

twitterおよび、twitterロゴは、トゥイッター　インコーポレイテッドの登録商標です。
登録番号は以下の通りです。
第５１８８８１１号、第５４６９００３号

Tumblrおよび、Tumblrロゴは、Tumblr, Inc.(タンブラー，インク．)の登録商標です。
登録番号は以下の通りです。
第５３００６９１号、第５５４５１９５号

stumbleuponおよびstumbleuponロゴは、スタンブルアポン，　インコーポレイテッドの登録商標です。
登録番号は以下の通りです。
第５２４８５２１号、第５５０９５４８号

LinkedInおよび、LinkedInロゴは、
リンクトイン　アイルランド　リミテッドの登録商標(第４９１０６５０号)です。
LinkedInおよび、LinkedInロゴは、Linkedin Ireland Limitedの国際登録商標です。
登録番号は以下の通りです。
９２７１２７、１０５８７９２、１０５８７９４

PinterestおよびPinterestロゴは、
プレミアム　インタレスト　リミテッド（Pinterest, Inc.）の登録商標(第５６１８８１７号)です。
PinterestおよびPinterestロゴは、ピンタレスト，インコーポレイテッド（Pinterest, Inc.）の登録商標です。
登録番号は以下の通りです。
商願２０１２－１０５７７、商願２０１３－２２５５
PinterestおよびPinterestロゴは、Pinterest, Inc.の国際登録商標(１１４０５９９)です。

DiggおよびDiggロゴは、Digg Inc.(ディッグ　インコーポレーテッド) の登録商標(第５１０４６０３号)です。
Digg Inc. によって運営されるサービスの著作権はNews.me, Inc. が保有しています。

Redditおよび、Redditロゴは、reddit inc.(レディット・インコーポレイテッド)の
登録商標(第５４７２０８０号)です。