stryhのノート ~stryh/changelog

[WordPress][SNS]プラグイン・外部サービスに頼らずソーシャルボタンを設置 / 参考にしたサイトも掲載!

[WordPress][SNS]プラグイン・外部サービスに頼らずソーシャルボタンを設置 / 参考にしたサイトも掲載!

どうも@saita_ryouheiです。

タイトルにもある通りソーシャルボタンを設置しました。
設置したのはちょっと前なので既に当ブログをご覧になられている方は気付いているかと思います。

以前から設置はしていたのですが、それはプラグイン、外部サービスのJSファイルを読込み設置していました。

それでも良かったのですが、ソーシャルボタンの表示が小さいアイコンになってしまい、それとデザインに自由がきかなかったのであまり納得はしてませんでした。

そんな理由もあり納得のいくボタンを設置したいと思いかなり経つのですが、今回設置しました。
その備忘録でごあす。

表示箇所

PC

PCの場合は以下、2箇所です。

PCの表示箇所 - WordPressに自前でソーシャルボタンを設置

  • エントリーページの最初
  • 左サイド(少しスクロールするとアニメーションで表示されます)

iPhone

iPhoneの場合は以下に表示してます。

iPhoneの表示箇所 - WordPressに自前でソーシャルボタンを設置

  • エントリーの最初と最後

iPhoneの場合、画面が小さい事もありますし、たくさん表示して本来見て欲しいエントリー内容に目がいかないのは良くないかな〜と思ったので表示するボタンの数を意図的に少なくしています。

ソースコードを公開

デフォルトでソースコードの表示は折り畳んであります。
広げてみたい場合はリンク表示されている所をクリックし広げて見て下さい。

それとCSSについては当ブログのデザインにあわせて定義しています。
もしお使いになる場合はお使いになるサイト、ブログにあわせて修正をしお使いください。

PC

HTML – 左サイド

PC版のHTML – 左サイドは以下です。
ソーシャルボタンと一緒にページ内TOPに移動するリンクも一緒に設置しています。
このリンクは三角形の形していますが、画像を使わず、CSSのみで表示しています。

CSS – 左サイド

次にCSSです。

HTML – エントリー毎

次はエントリー毎のHTMLです。

CSS – エントリー毎

そしてエントリー毎のCSSです。

iPhone

iPhoneの場合は2箇所で表示していますが、共に同じコードを使用し設置しています。
大ちゃん(@delaymania)のブログのソースコードを大いに参考にさせてもらいました。

HTML

CSS

こんな工夫もありますよ

ソーシャルボタンを後読みさせるやり方。
こちらのエントリーを参考にソーシャルボタンの後読みをさせてみました。

しかし、このあと読み。
Pocketのブログパーツだけ表示されたりされなかったりという現象。

後読みさせず通常の表示(レスポンスが返ってきたら後読みぜず、そのまま表示)だと問題なく表示されます。
原因がよく分からないんですよね〜( ´﹏ˋ)
PCから見た際、左サイドにもソーシャルのボタンがあり、ここにもPocketのブログパーツがあります。
これとかちあって上手く表示されないのかなーなんて勝手に思ってます。

しかし、それなら他のボタンも状況としては同じなので似た事が起きてもいいはずなのに起きない。
ん〜。分からん。

Pocketが無い状態だと後読み除いて平均3〜4秒で画面が表示されます。
その後にSNSボタンの後読みが行われます。

こうする事でGoogleの検索エンジンからもインデックスされやすくなるのかなと思います。

自分はPocketのブログパーツがあるので今は後読みを断念してます。

ボタンのHTMLを簡単に作れるサービス

春友(@speing_friends)さんの↑エントリーはPCから閲覧した場合にスクロールしても追従するソーシャルボタンの設置エントリーです。
このエントリーの中に簡単にソーシャルボタンを作るサービスへのリンクが貼られています。

Pocketについては以下のオフィシャルサイトでHTMLが取得出来ます。

参考にさせて頂いた他ブログエントリー

ソーシャルボタンの設置で下記にあげるエントリーを参考にさせてもらいました。
エントリーの内容以外にもブログのソースコード、HTML、CSS、jQueryも参考にさせてもらいました。

最後に

プラグインや外部サービス使ったソーシャルボタン設置も良いですが、自前でコード弄って設置するのも良いですね(^-^)
ブログを作ってる!っいう感じが楽しいですね。

自分の場合、そのまま仕事でも使えるのでとても良い勉強になります

URL :
TRACKBACK URL :

Comments & Trackbacks

  • コメント ( 0 )
  • トラックバック ( 15 )

No commented yet.

  1. […] [WordPress][SNS]プラグイン・外部サービスに頼らずソーシャルボタンを設置 / 備忘録ですよ、奥さん! | stryhの日記 ~stryh/changelog どうも@saita_ryouheiです。 タイトルにもある通りソーシャルボ […]

  2. […] [WordPress][SNS]プラグイン・外部サービスに頼らずソーシャルボタンを設置 / 備忘録ですよ、奥さん! | stryhの日記 ~stryh/changelog どうも@saita_ryouheiです。 タイトルにもある通りソーシャルボ […]

  3. […] [WordPress][SNS]プラグイン・外部サービスに頼らずソーシャルボタンを設置 / 備忘録ですよ、奥さん! | stryhの日記 ~stryh/changelog どうも@saita_ryouheiです。 タイトルにもある通りソーシャルボ […]

  4. […] [WordPress][SNS]プラグイン・外部サービスに頼らずソーシャルボタンを設置 / 備忘録ですよ、奥さん! | stryhの日記 ~stryh/changelog どうも@saita_ryouheiです。 タイトルにもある通りソーシャルボ […]

  5. […] [WordPress][SNS]プラグイン・外部サービスに頼らずソーシャルボタンを設置 / 備忘録ですよ、奥さん! | stryhの日記 ~stryh/changelog どうも@saita_ryouheiです。 タイトルにもある通りソーシャルボ […]

  6. […] [WordPress][SNS]プラグイン・外部サービスに頼らずソーシャルボタンを設置 / 備忘録ですよ、奥さん! | stryhの日記 ~stryh/changelog どうも@saita_ryouheiです。 タイトルにもある通りソーシャルボ […]

  7. […] [WordPress][SNS]プラグイン・外部サービスに頼らずソーシャルボタンを設置 / 備忘録ですよ、奥さん! | stryhの日記 ~stryh/changelog どうも@saita_ryouheiです。 タイトルにもある通りソーシャルボ […]

  8. […] [WordPress][SNS]プラグイン・外部サービスに頼らずソーシャルボタンを設置 / 備忘録ですよ、奥さん! | stryhの日記 ~stryh/changelog どうも@saita_ryouheiです。 タイトルにもある通りソーシャルボ […]

  9. […] [WordPress][SNS]プラグイン・外部サービスに頼らずソーシャルボタンを設置 / 備忘録ですよ、奥さん! | stryhの日記 ~stryh/changelog どうも@saita_ryouheiです。 タイトルにもある通りソーシャルボ […]

  10. […] [WordPress][SNS]プラグイン・外部サービスに頼らずソーシャルボタンを設置 / 備忘録ですよ、奥さん! | stryhの日記 ~stryh/changelog どうも@saita_ryouheiです。 タイトルにもある通りソーシャルボ […]

  11. […] [WordPress][SNS]プラグイン・外部サービスに頼らずソーシャルボタンを設置 / 備忘録ですよ、奥さん! | stryhの日記 ~stryh/changelog どうも@saita_ryouheiです。 タイトルにもある通りソーシャルボ […]

  12. […] [WordPress][SNS]プラグイン・外部サービスに頼らずソーシャルボタンを設置 / 備忘録ですよ、奥さん! | stryhの日記 ~stryh/changelog どうも@saita_ryouheiです。 タイトルにもある通りソーシャルボ […]

  13. […] [WordPress][SNS]プラグイン・外部サービスに頼らずソーシャルボタンを設置 / 備忘録ですよ、奥さん! | stryhの日記 ~stryh/changelog どうも@saita_ryouheiです。 タイトルにもある通りソーシャルボ […]

  14. […] [WordPress][SNS]プラグイン・外部サービスに頼らずソーシャルボタンを設置 / 備忘録ですよ、奥さん! | stryhの日記 ~stryh/changelog どうも@saita_ryouheiです。 タイトルにもある通りソーシャルボ […]

  15. […] [WordPress][SNS]プラグイン・外部サービスに頼らずソーシャルボタンを設置 / 参考にしたサイトも掲載! | stryhの日記 ~stryh/changelog […]

Leave a reply

*
*
* (公開されません)

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

Return Top