私ども平和の絵本の、日々の活動日誌です。

SNSボタン対応作業中:「平和の絵本で-和を地球へ」活動日誌

TOPへ-活動日誌(平和の絵本から)

私どもの平和と癒しの運動の、日々の活動日誌です。

SNSボタン対応作業中


以下、自分用の備忘録として。

SNSボタンに関しては、今まで忍者ツールズを利用していたのだが、柔軟性が欲しくなり(スマホ対応で行空けを大きくしたい他)、個別に対応作業中。

物によって簡単なものと、難しいものが色々。
MIXIは、携帯メルアドの登録をしなければいけないなど色々制約があり、諦めることとした。携帯用メルアドは普段使っていないので、存在するのかどうかもよく分からない。^^;

MIXI以外のほとんどのSNSでは、会員登録をしなくても、SNSボタンを設置できる。
どれを選んだものかしばらく悩んだが、なるべく会員数が多そうなところを。グーグル+は検索に影響するかも、と入れることとした。新しく設置したのはポケット。これもよく分からないのだが、便利だとの記事を読んで。

一番ややこしいかったのがフェイスブック。 フェイスブック用にMETAをいじったり、表示する画像をアップしたり。すでにhtml上の表示しているサイトのタイトルや説明文を、FB用に載せる必要がある。(載せなくても イイネ シェアーボタンそのものは設置可能)
自分のIDをMETAに入れる必要もある。なぜか複数のIDがあり、有効なものと無効なものがあるようで、ここもややこしかった。
画像の大きさも横1.200px以上と大きな画像を要求される。

なにかやろうとすると、次から次へと新しい概念が登場し、いつまでも終わらない。^^;
まずはFBのいいねとシェアボタンの作り方はこちら。レイアウントのところをstandardにすると、横幅が広くなりすぎる。widthを指定しても無効。そこで、button countを選択。これで横幅はOKとなった。
Facebook SDKというscript部分は、indexの頁ではなく、読み込みのphpファイルへ記入。それぞれのSNSボタンに必要なscriptは、どれもphpファイルへ記入した。おそらく読み込みスピードは遅くなると思うけれど、html本体で記述するのは、しんどい。

FBのMETAについては、こちらのオープングラフを参照。

METAなどFBから見てOKかどうかを判定するのには、こちらのテストの頁。なぜか理解できないレスを返されたことも(20kbの画像を8mb超だと判定されて、混乱)

各種SNSボタンを設置するとき、特に参照したのは、この頁。SNSのシェアボタンの設置方法まとめ (サンプルコード付き)

それからグーグルのスピードテストをクリアしたくて、こちらのページを見ながら、cssのインライン化も挑戦。最小限のcssをhtml内に記入して、大半のcss情報をscriptで読み込むようにするのだが、なぜかスピードテストの点数がかえって低くなってしまう。
訳が分からないので、結局、cssの読み込み順序の最適化はあきらめた。

一方で圧縮によるスピード化は、サーバーのマニュアルを見ると、サーバーの方で対応しているようなので、onへと。
ごくまれに表示が崩れるということだが、ま、崩れたら考えよう。こちらは次のサーバーの頁を参照。mod_pagespeed設定について

テスト用の頁では、成功したので、あとは頁のアップを。METAについては、日本語版だけでも100ページ超いじる必要がある。
WEBの左側の目次は、順番を変える必要もある。これは全部で4種類のphpファイルの書き換えで、対応できる。なんだかんだとあと半月ぐらいはかかるかなあ。

絵本の各ページの下の部分の目次も作り変える必要がある。WEBを最初に作ってから12年超。スマホ対応はずいぶんと終わったけれど、まだまだ修繕する必要がある。^^;
関連記事

  1. 2016/05/26(木) 14:15:14|
  2. 日誌|
  3. トラックバック:0|
  4. コメント:0
<<辞世の句 | HOME | スマホ対応作業中>>

コメント

コメントの投稿。 ☆スパムはご遠慮くださいね。

管理者にだけ表示を許可する

トラックバック

トラックバックURLはこちら
http://peaceactivity.blog50.fc2.com/tb.php/1688-4d72f7c7
















































当サイトと無関係の広告;[

FC2Ad