シェアボタンをつくる …簡単に。

 

例のサイトにシェアボタンを追加しました。

 

 今回使ったのは、忍者おまとめボタン　ログイン｜忍者ツールズ

とても簡単なので説明は省きます。

ただし、そのままではちょっと使えない部分も多々あるので、カスタマイズしてます。

修正点

• 全体：修正するために、jsとcssは保存して内部リンクにした。
  イメージ（画像）もできるものはなるべくそうした（とりあえず忍者サーバーにある分だけ）。
  →「このボタンやっぱりいらない」というときにもすぐ対応できる。
  →ボタン画像も自作できる。
• Facebookの「いいね」：サイト自体をいいねしてしまうので、Facebookページにいいねするよう指定し直した。
• Googleブックマーク：アイコンが大きいので他と合わせて20×20pixelに指定した。
• ツイートボタン：ツイート数「これらのツイートを見る」のリンク先が、忍者ボタンからツイートしたものしか出てこない設定　または　サイトのURLそのままを検索した設定になり、求める結果が出てこないので、「paintmore.info」を検索ワードにするよう指定した。（「paintmore」だと関係のないツイートもたくさん出てくるので「.info」は重要。独自ドメインの有用性発揮。）
• ツイートボタン：ツイート時にあらかじめ記入される内容を直した。デフォルトだとサイトタイトルとURLになって無駄に長いので「paintmore.info」とし、ここにサイトリンクを埋め込んだ。
• ツイートボタン：先の「リンク先が、忍者ボタンからツイートしたもの」と同じだが、ところどころに忍者ボタン独自のソースコードが埋め込まれてしまうので、それをなくした。（※アクセス解析機能が正しく作動しなくなるかもしれないので自己責任で。）

…今のところ、このくらい。

時間があればまたちょっと解説もどき なこともしたいと思ってます。

が、勘で探りながらやったので、正しいやり方かどうかもちょっと不安なので、もう少しスキルと説明力が備わってから；

スクリプトを触るのはまだまだだけど、人が作ったものをカスタマイズするのが理解の早道のようです（私の場合）。

何度も見るうちに、段々読めてくる気がしました（たぶん気のせい）。

「あ、ここだ、ここ。」というふうに。

さっきまでわからなかったことがわかると楽しいですね～♪（たぶん気のせい）

でも、結局は自分で一つずつ作った方がカスタマイズしやすそうなので、時間ができたら随時していく…かも。（でも自分で作ると当然アクセス解析が使えなくなるのが残念）

別に不都合がなければこのままで。

ツイートボタンは、ツイッター本家サイトTwitterボタン | About

で作ってみたけど、簡単ですぐできました。

が、置き換えがめんどくさいのと、忍者ボタンでうまくできたので今回はそのまま。

FBのいいねボタンは、クライアント経由でFBからコードをもらわないとできないと思っていたけど、難なくできたので意外でした。

既にある「いいね」数も、正しく反映しています。

はてなブックマークはさすが優秀ですね。

数（カウント）をクリックすると、そのサイトにブックマークした人、関連記事・ブログなどが一覧表示されます。

hover（マウスオーバー）すると、それがわかるようイベントしたもの（擬似クラス）、タイトルがポップアップ表示されるもの、逆にそれらが出ない（無反応）もの、まちまちなのが気になるところ。

まぁ、必要最低限のことはできたので今はこれでよし　ということで。

これで、ちょっとは外部との繋がりができた…かな。

みんなに宣伝してもらう、情報を共有できる、リンクが増えるとサイトが強くなる、反応が見える…　

この小さなボタンはとても大事だなぁ。

まぁ、設置後まだ無反応ですが＾＾；

サイト自体もまだまだ訪問者が少ないし。

クライアントからは、「スマホではシェアボタンのあるフッターまで辿り着くのが大変なので、最初のあたりか、常に見えるようにしてほしい」　との要望が…

これはまたちょっと時間がかかりそうなので、追々。

今のところはこれで。

時間を忘れて作っていたら朝になってしまっていました…(^ ^;)

ちなみに今回作ったおまとめボタン（カスタマイズはしてない）はこれ↓