- 追加された行はこの色です。
- 削除された行はこの色です。
#author("2020-07-14T07:37:54+09:00;2020-05-02T10:14:49+09:00","default:tgoto","tgoto")
#author("2023-01-09T18:00:51+09:00;2020-05-02T10:14:49+09:00","","")
このサイトは個人のメモ書きという要素が強かったのでSNSでのシェアのしやすさはそれほど意識していなかったのと、ウェブサイトが重くならないように極力シンプルな構成を目指していましたが、AMP用スクリプトはいずれもウェブサイトの重さに極力影響を与えずに様々な機能が実装できることがわかってきたので、SNSでのシェアを容易にするためのAMP-social-shareスクリプトも設定してみました。
*AMP-social-shareスクリプト
*AMP-social-shareスクリプト [#oa214d7c]
https://amp.dev/ja/documentation/components/amp-social-share/
TwitterやFacebookなどスクリプトにオフィシャルとして認められているSNSの場合は設定はほぼコピペのみで完了します。はてなブックマーク、はてなブログや、最近人気が出てきているnoteなどは日本でしか普及していないからかスクリプトの公式対応がまだなので、設定は手打ちしてやる必要があり、若干手間がかかります。
下記にnoteのボタンを設置するための例を記載しておきます。なお、ロゴは公式サイトにてSVGが配布されています。このSVGをテキストエディタで開いて、背景と本体の色を反転させています。
** <HEAD>内に設置する
** <HEAD>内に設置する [#ge762376]
これを予め読み込ませておく必要があります。
> <script async custom-element="amp-social-share" src="https://cdn.ampproject.org/v0/amp-social-share-0.1.js"></script>
これは''async''属性が付いているので設置場所はどこでも構いません。当サイトの実感では''preload''などを併用しなくてもPagespeed Insightのスコアにはあまり悪影響を与えていないようですが、もしスコアが下がるようなら''preload''を併用しても良いかもしれません。
''preload''を併用する場合は上記のAMP-social-shareを''<HEAD>''内のできるだけ下の方に配置しつつ、下記の''preload''は''<HEAD>''内のできるだけ上の方に置きます。無くてもOKです。
> <link rel="preload" as="script" href="https://cdn.ampproject.org/v0/amp-social-share-0.1.js">
**CSS（noteの例）
**CSS（noteの例） [#fbc8d709]
AMP-social-shareスクリプトが公式にサポートしていないSNSの場合はデザインを用意してやる必要があります。
> amp-social-share[type=note] {
> background-color: #41C9B4 ;
> background-image: url('<?php echo get_script_uri() ?>skin/note_logo.svg');
> background-repeat: no-repeat;
> }
TwitterやFacebookやPinterestなどのような公式SNSの場合はこの設定は不要です。
また全体の整形のために下記のスタイルシートを置いておいてもよいでしょう。この例では''class="sns"''は全体をくくる''div''（または''p''）で、''class="snsicon"''は各アイコンのスタイルを設定しています。なお、このsnsiconではwidthとheightを指定してもうまく適用されないようで、下記のbodyに直接記載するようにしています。
> .sns {
> display: -webkit-flex;
> display:flex;
> -webkit-flex-direction: row;
> flex-direction: row;
> -webkit-flex-wrap: nowrap;
> flex-wrap: nowrap;
> justify-content: center;
> }
> .snsicon {
> margin:4px;
> border-radius: 4px;
> }
**body内
**body内 [#rcd070fd]
下記はこのサイトで設定している例です。Twitter、Facebook、はてなブックマーク、note、LINEのアイコンを表示しています。Twitter、Facebook、LINEは公式SNSなのでリンク先やデザインの設定が不要です。
widthとheightは指定しなければデフォルトのサイズが適用されます。''data-param-url="<?php echo $canonical_url ?>"''は設定しなくても構いませんが、短縮URLを使用しているpukiwikiの場合はこれを入れないとデフォルトURLへのリンクとなりますので短縮URLへのリンクとしたい場合はこれを記載します。
これを''<?php echo $body ?>''の下など、SNSアイコンを設置したい場所に書きます。
> <p class="sns">
> <amp-social-share type="twitter" class="snsicon" width="50" height="40" data-param-url="<?php echo $canonical_url ?>"></amp-social-share>
> <amp-social-share type="facebook" data-param-app_id="213482095348858" class="snsicon" width="50" height="40" data-param-url="<?php echo $canonical_url ?>"></amp-social-share>
> <amp-social-share type="hatebo" class="snsicon" width="50" height="40" data-share-endpoint="http://b.hatena.ne.jp/entry/<?php echo $canonical_url ?>"></amp-social-share>
> <amp-social-share type="note" class="snsicon" width="50" height="40" data-share-endpoint="https://note.mu/intent/post?url=<?php echo $canonical_url ?>"></amp-social-share>
> <amp-social-share type="line" class="snsicon" width="50" height="40" data-param-url="<?php echo $canonical_url ?>"></amp-social-share>
> </p>
*IEではLINEのロゴが表示されない問題
*IEではLINEのロゴが表示されない問題 [#q9c553ee]
IEで見るとLINEだけなぜか緑でつぶれてしまってロゴが見えません。[[LINE公式サイト>https://www.linebiz.com/jp/logo/]]よりロゴ画像をダウンロードできますので、これを使って背景画像を矯正上書きします。ロゴが中心からずれてしまわないように''background:center;''と''background-size: contain;''で調整します。
> amp-social-share[type=line] {
> background: #52b448 center;
> background-size: contain;
> background-image: url(<?php echo get_script_uri() ?>skin/line_logo.svg);
> background-repeat: no-repeat;
> }
''追記''：利用が少ないのとウェブサイトの高速化のために廃止しました。（2020.7.14）
*SEOには逆効果か？ [#n81fe2bf]
残念ながらこのAMP-socialを入れるとPagespeed Insightsのスコアが下がるようです。効果とデメリットのトレードオフで導入をご判断ください。
*ボタンを画面に固定するには [#i7d48355]
#ogpi(https://oncologynote.jp/?f1af6c5cb3)
#pcomment