WordPressプラグインでソーシャルメディアボタンを実装する

「AddThis Sharing Buttons」でシェアボタンをカスタマイズする

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
「AddThis Sharing Buttons」の設定画面から、シェアボタンの表示スタイルや表示項目、表示位置などをカスタマイズする方法について解説致します。
講師:
06:02

字幕

このレッスンでは AddThis Sharing Buttons の 設定画面からシェアボタンの 表示スタイルや表示項目 表示位置などを カスタマイズする方法について 解説していきます それでは さっそく画面の方を 見ていきましょう 今こちらのウェブサイトでは こちらの投稿の上に このようにシェアボタンが表示されていますね 今回はこのボタンに対して 表示スタイルや表示項目 表示位置などを カスタマイズしてみたいと思います それでは WordPress の 管理画面に移ります はい これが WordPress の管理画面 そして AddThis Sharing Buttons の 設定画面となっています 今 現状はこちらのー Sharing Buttons Above Content の方に チェックが入っていて そして それぞれのスタイルなどが 選択された状態になっていますね 今回はこちらの設定を 変更していってみたいと思います まず こちらの表示スタイルですね これは こちらの中から好きなスタイルを 選んで選択すればオッケーです 今は こちらが選択されている状態ですが 例えば 公式のボタンがいいということであれば こちらを選択すればオッケーです または小さいアイコンがいいと いうことであれば こちらを選択すれば良いでしょう そして 次にこちらの Services です こちらの Services は Auto Personalization が 選択されている際は 自動的にユーザーの環境や 行動履歴に基づいて ボタンが決定されますが こちらをクリックしてみると このように ボタンの表示項目を 自ら決定することができます こちらの右側に表示されているのが 実際に表示するボタンとなっています そして 左側が 選択できるボタンとなっています これをドラックアンドドロップ してあげることによって ボタンの入れ替えをしていくことが可能です それでは実際にやってみましょう 例えば こちらに Hatena と 入れてみるとー このように Hatena Bookmark の アイコンが出てきます これをそのまま こちらに移してあげます するとこのようにボタンが一つ増えましたね そして 例えば 不要になったボタンなどは そのボタンの上にマウスカーソルを合わせて そして こちらの × 印をクリックすることで 表示から外すことができるようになっています それではクリックしてみます はい これで表示から消えましたね また こちらのリンクを クリックすることによってー 編集する前の元の状態に戻すことも 可能になっています それではこの状態で Preview ボタンを押してみましょう すると このように表示されてきましたね ボタンが小さくなっていて かつ一番前に Hatena Bookmark のアイコンが 表示されています それでは このプレビュー画面を閉じます それでは次に こちらのシェアボタンの 表示位置のカスタマイズを見てみましょう 今はこちらの Sharing Buttons Above Content が 選択されている状態ですが これを下にずーっと見ていきますと 実は もう2つ種類があります 一つ目は Sharing Buttons Below Content これは投稿の本部の下にシェアボタンを 表示するといった内容になります そして 更に下に行くと こちらに Sharing Sidebar とありますね これは このように縦長のボタンアイコン これを画面左右どちらかの端に 表示させることができる内容となっています それでは今回はこちらのチェックを オンにしましょう すると こちらの設定内容が 選択できるようになります そして Position を 選べるようになっているので 今回は Right を選択しておきましょう そして この状態で こちらの下の方にもある Preview ボタンを クリックしてみます すると このように先程のアイコンが 残った状態で こちらにも表示されてきましたね このように投稿の上や投稿の下 もしくは画面の左右の端に このようなスタイルでシェアボタンを 表示することが可能になっているわけです また それらを組み合わせて 同時に 表示させることも可能になっています それではプレビュー画面を閉じます そして特に問題なければ こちらの Save Changes を クリックすれば設定は完了です また こちらの ADVANCED OPTIONS という ところをクリックすると さらに高度な設定を行うことが できるようになっています ただ こちらの設定はどちらかというと 少しマーケティングよりの設定であったり また見た目の設定であったとしても 少し複雑な知識が必要になったりしますので 興味がある方は のぞいてみるとよいでしょう それでは最後に こちらの設定で ウェブサイトを確認してみたいと思います そして更新ボタンをクリックします すると 先程設定したとおりに 画面に表示されてきましたね これが AddThis Sharing Buttons の カスタマイズ方法となります 以上でレッスンは終了です 今回は AddThis Sharing Buttons の 設定画面から シェアボタンの表示スタイルや表示項目 表示位置などのカスタマイズ方法について 解説いたしました

WordPressプラグインでソーシャルメディアボタンを実装する

WordPressは世界中で人気の無料のブログソフト/CMSです。このコースではその機能を人気のプラグインであるJetpackとWP Social Bookmarking Light、それにAddThis Sharing Buttonsでさらに拡張し、サイト上に各種ソーシャルメディアの共有ボタンを設置する方法について解説します。

54分 (15 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
カテゴリー
ウェブデザイン
CMS
価格: 1,990
発売日:2015年12月29日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。