頑張らない!でも諦めない!必死にならずにええかげん

09.共有-Jetpack by WordPress.com

      2014/11/22

Google or AdMax Promotion(it)

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

はじめに

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

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

共有

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

共有

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

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

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

01_JetPack共有詳細

JetPack共有詳細

設定方法

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

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

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

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

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

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

02_サイドバー共有の表示

サイドバー共有の表示

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

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

03_共有設定

共有設定

利用可能なサービス

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

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

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

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

04_共有ボタンの配置方法

共有ボタンの配置方法

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

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

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

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

06_共有ボタンの全配置

共有ボタンの全配置

ボタンのスタイル

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

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

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

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

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

08_認められるGoogle+ボタン

認められるGoogle+ボタン

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

09_Google+ボタンの例と公式ボタン

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

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

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

Share – Google+ Platform — Google Developers

10_Google+ボタンの例(英語)

Google+ボタンの例(英語)

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

共有 – Google+ Platform — Google Developers

11_Google+ボタンの例(日本)

Google+ボタンの例(日本)

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

A Style Guide for Promoting your Google+ Page

12_Googleのポリシー

Googleのポリシー

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

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

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

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

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

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

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

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

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

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

共有ラベル

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

15_共有うラベルの変更

共有うラベルの変更

リンクを開くウィンドウ

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

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

ボタン表示

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

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

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

CSS と JavaScript を無効化

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

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

16_CSSとJavaScriptを無効化を有効

CSSとJavaScriptを無効化を有効

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

共有動作

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

Facebookへの共有

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

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

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

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

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

Google+への共有

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

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

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

04_Google+ストリーム

Google+ストリーム

Twitterへの共有

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

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

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

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

05_Twitterタイムライン表示

Twitterタイムライン表示

Tumblrへの共有

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

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

04_Tumblrタイムライン表示

Tumblrタイムライン表示

StumbleUponへの共有

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

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

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

04_共有されたLikes表示

共有されたLikes表示 

LinkedInへの共有

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

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

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

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

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

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

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

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

01_JetPackのLinkedIn共有ボタン

JetPackのLinkedIn共有ボタン

Pinterestへの共有

Pinterest

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

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

04_共有されたピン表示

共有されたピン表示

Pocketへの共有

Pocket

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

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

03_Pocket保存された投稿

Pocket保存された投稿

Diggへの共有

Digg

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

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

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

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

Redditへの共有

Reddit

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

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

05_保存されたRedditのsubreddit表示

保存されたRedditのsubreddit表示

メール送信

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

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

04_email共有送信メール

email共有送信メール

印刷

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

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

02_印刷ダイアログ(Chrome)

印刷ダイアログ(Chrome)

プロモーション(btm)

Google or AdMax Promotion (it)

さいごに

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

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

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

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

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


FacebookおよびFacebookロゴは、
フェイスブック・インコーポレイテッドの登録商標です。
登録番号は以下の通りです。
第5035555号、第5062344号、第5062344号防護第1号、第5086425号
第5150051号、第5487959号、第5576709号、第5586751号
FacebookおよびFacebookロゴは、
フェイスブック・インコーポレイテッドの国際登録商標(1075094)です。

Google™はGoogle Inc. の登録商標(第4478963号及び第4906016号)です。
GoogleロゴはGoogle Inc. の国際登録商標です。
国際登録番号:881006及び926052及び1086299及び1091990及び1145934
Google+、Google+ロゴはGoogle Profiles™ サービスの一部を示し、
Google+、Google+ロゴはGoogle Inc. の商標です。

twitterおよび、twitterロゴは、トゥイッター インコーポレイテッドの登録商標です。
登録番号は以下の通りです。
第5188811号、第5469003号

Tumblrおよび、Tumblrロゴは、Tumblr, Inc.(タンブラー,インク.)の登録商標です。
登録番号は以下の通りです。
第5300691号、第5545195号

stumbleuponおよびstumbleuponロゴは、スタンブルアポン, インコーポレイテッドの登録商標です。
登録番号は以下の通りです。
第5248521号、第5509548号

LinkedInおよび、LinkedInロゴは、
リンクトイン アイルランド リミテッドの登録商標(第4910650号)です。
LinkedInおよび、LinkedInロゴは、Linkedin Ireland Limitedの国際登録商標です。
登録番号は以下の通りです。
927127、1058792、1058794

PinterestおよびPinterestロゴは、
プレミアム インタレスト リミテッド(Pinterest, Inc.)の登録商標(第5618817号)です。
PinterestおよびPinterestロゴは、ピンタレスト,インコーポレイテッド(Pinterest, Inc.)の登録商標です。
登録番号は以下の通りです。
商願2012-10577、商願2013-2255
PinterestおよびPinterestロゴは、Pinterest, Inc.の国際登録商標(1140599)です。

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

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

*本ページ内に記載されされた各社ブランド、サービス名、商標、登録商標については、
各社ブランドのロゴや商標等に関する帰属についてをご確認ください


最後までお読みいただきありがとうございました。
アルゴリズン


役に立ったと思っていただけたら、以下からシェア頂けたら幸いです^^

QRコードからもこのURLを開けます。

Pitta Promotion

アイキャッチ画像に利用させて頂いております、各社ブランドのロゴやシンボルに関しては、
各社ブランドのロゴや商標等に関する帰属についてをご確認頂けますようお願い致します。
ロゴの使用等に関する苦情・ご意見等がございましたら管理者までご連絡ください。

AdMax Promotion

カテゴリ
すべて展開 | すべて省略

Rakuten Promotion

 - jetpack, WordPress , ,

  関連記事