うえのブログ

身の回りの気になった事を記事にすることが多いのですが、気付いたら雑学系が多くなりました。今のとこ一年以上は毎日更新しちゃってます(^o^)

シェアボタンをもっと便利かつ手軽に!Add This使ってみた

f:id:uenoyou111:20180325213323j:plain

ずっと名前の横にTwitter載せてるつもりだったうえの(@uenoyou111)です!

 

はてなのID載せてました。あほですやん。

 

つい先日、最近よく絡ませて頂いてるにーち(@nych87)さんがこんな記事を書いておりまして( ˘ω˘)

 

nych87.com

 

相変わらず見事なイラスト…(;˘ω˘)

 

タイトルと関係なくて大変申し訳無いのですが、ちらっと下の方にシェアボタンのカスタマイズについて触れていまして。

 

f:id:uenoyou111:20180325220821j:plain

【雑談】アクションゲームは爽快感重視!下手でも気持ちよくさせてくれなきゃイヤ【最近のこと】 – にーちの趣味ぶろ

 

(にーちさん、勝手に切り取らせていただきました!)

 

こういうやつなんですけど「AddToAny Share Buttons」という、ワードプレスのプラグインを導入されたとのことでした。

 

見てみれば分かるのですが…このシェアボタンがなかなか良いんですよ。

 

はてなブログでも画面固定・追尾で導入できるものがあるので、試してみた次第です( ˘ω˘)

 

 

そういえば見たことある

 

記憶を辿ると、以前オークニ(id:a24o92)さんがAdd Thisというサービスが大変オススメと紹介して下さっていたのを思い出します。

 

www.okuni.me

 

記事見て色々いじってみたのは覚えてるのですが、それで満足したのかすっかり忘れておりました。

 

基本的な使い方について詳しく説明して下さっています。

 

こちらでは導入したものが少し違うので、そちらも合わせて紹介していきます。

 

(画像サイズばらばら注意です)

 

 

実際に導入してみた

 

まずはいつでも押してもらえるシェアボタンを配置してみたいと思い、下記サイトへアクセス。

 

www.addthis.com

 

Activateをクリックするとアドレスやパスワードを入力する画面になります。

 

f:id:uenoyou111:20180325222015j:plain

 

テキトーでも良いと思いますが導入した後で編集できますし、どれくらいの人数がシェアしてくれたかがグラフで分かるようになります。

 

ので、ログイン出来るように覚えておく必要があります。終わったらLet's Get Startedをクリック。

 

f:id:uenoyou111:20180325223229j:plain

 

今回利用するシェアボタンは一番上にあるFloatingになります。右側にプレビューが表示されてて、パソコン表示とスマホ表示も確認できます。

 

まずはFloatingを選択した状態で下のContinueをクリックします。

 

f:id:uenoyou111:20180325223626j:plain

 

するとこのような画面になり、色々と設定をいじることが出来ます。

 

上から順に説明していきます。

 

Position

f:id:uenoyou111:20180325223856j:plain

 

シェアボタンの配置で、Desktopはパソコン、Mobileはスマホです。

 

プレビューが表示されるので自分の好みの場所へ動かしましょう。

 

Hideは消えちゃいますが、例えばPCとスマホで別々のシェアボタンを表示させて使い分けが出来ます。

 

Share Counters

f:id:uenoyou111:20180325223955j:plain

 

シェア数をカウントしてくれるものなのですが、普段見るSNSだとフェイスブックしか対応してない模様…?

 

単体ごとにカウントするならIndividualですが、カウントなしのNoneでいいと思います。

 

Social Networks

f:id:uenoyou111:20180325224158j:plain

 

アイコンを自動で追加するか手動で追加するかです。

 

Select your ownを選択し、要らないやつは×ボタンで消してADD MORE SERVICESから入れたいサービスを追加していきます。

 

なんと100種類のサービスが利用可能です。個人的にはLINEのシェアボタン付くのがいいですね~。

 

DESIGN

f:id:uenoyou111:20180325224822j:plain

 

Styleはプレビューを参考に。

 

Mobile Button Sizeはスマホから見た時のサイズが選べます。

 

Total Share Count Labelはそのままで大丈夫です。

 

後はアイコンの色と背景色を変更できます。

 

Advanced Options

f:id:uenoyou111:20180325230714j:plain

 

Hide on Specific Pagesは基本無視でOKです。

 

Extra Appearance Setteings内のResponsive Widthはいくつからレスポンシブさせるか、というところですが玄人向けの設定ですね。

 

Desktop Vertical Offsetはパソコンから見た時の表示位置です。

 

コードのコピー&貼り付け

 

終わったらSave & Continueボタンをクリックし、Install AddThisというページに飛んだら下の方へ。

 

f:id:uenoyou111:20180325230854j:plain

 

ここにあるコードをまるごとコピーします。

 

その後、はてなブログへログインし、デザインを選択します。

 

f:id:uenoyou111:20180320232858j:plain

 

スパナマークをクリックし、記事を開きます。

 

f:id:uenoyou111:20180325231244j:plain

 

記事下の一番下に先程コピーしたコードを貼り付けします。

 

f:id:uenoyou111:20180325231517j:plain

 

このままだと反映されないので、記事ページをプレビューを押して出てきたら保存して完成です。

 

f:id:uenoyou111:20180325231838j:plain

 

 

当ブログで導入したボタン

 

上に戻るボタンを設置する際に、ここにシェアボタンが格納できたらいいなーってずっと思ってたんですよね。

 

このままでも良いのですが、プレビューを見ながら他にどんな種類があるかと思って見てたら。

 

f:id:uenoyou111:20180325232059j:plain

 

ありました。という事でこちらを導入してみます。

 

若干使い勝手は悪い

 

項目名はExpandingになります。

 

f:id:uenoyou111:20180325232130j:plain

 

こちらはポジションを右か左かにしか変えられず、細かい位置調整や大きさの変更が出来ません。

 

また、色もオレンジか黒かグレーにしか変えられません。有料登録をすれば他色に変えられるようです。

 

当ブログだと右に設定した場合、スマホ表示でボタンが切れます( ˘ω˘)ようわからん

 

f:id:uenoyou111:20180325233227j:plain

 

少し小さめな気もしますが、テーマカラーのオレンジに合ってたから左に配置してこれでいいか…ということで落ち着いてます。

 

会社のテスト端末をいくつか拝借して試しましたが、アニメーションがなめらかで好きです(笑)

 

f:id:uenoyou111:20180326000136j:plain

 

はてなブログ公式アプリでは表示されず

 

こちらはオークニ(id:a24o92)さんが実際に試されていますが、はてなブログの公式アプリ(iOS)では表示がされません。

 

私も実際に試しましたが…

 

f:id:uenoyou111:20180325235300j:plain

 

iPhone、iPad共に公式アプリは上がちょこんと見えるぐらいです。

 

シェアボタンにしても、同化してしまってどうかしてます。

 

f:id:uenoyou111:20180325235610j:plain

 

確認した所Androidでは問題なく表示がされていました。まぁ、このまま使用してもいいかなぁと思う次第です。

 

 

まとめ

 

でも出来るならボタンタイプで表示させたほうが良いです。

 

格納しちゃうと見えなくなるしスマホからだとワンプッシュの手間が発生し、めんどくさ…なんて思われる可能性高めです。

 

ちなみにiPhoneで動作確認したら更に1行程増えたような…?(;˘ω˘)

 

見飽きたらボタンに変えるかもしれません。

 

 

 

ではでは(`・ω・´)ゞ