AMP-social-shareの実装
このサイトは個人のメモ書きという要素が強かったのでSNSでのシェアのしやすさはそれほど意識していなかったのと、ウェブサイトが重くならないように極力シンプルな構成を目指していましたが、AMP用スクリプトはいずれもウェブサイトの重さに極力影響を与えずに様々な機能が実装できることがわかってきたので、SNSでのシェアを容易にするためのAMP-social-shareスクリプトも設定してみました。
AMP-social-shareスクリプト
https://amp.dev/ja/documentation/components/amp-social-share/
TwitterやFacebookなどスクリプトにオフィシャルとして認められているSNSの場合は設定はほぼコピペのみで完了します。はてなブックマーク、はてなブログや、最近人気が出てきているnoteなどは日本でしか普及していないからかスクリプトの公式対応がまだなので、設定は手打ちしてやる必要があり、若干手間がかかります。
下記にnoteのボタンを設置するための例を記載しておきます。なお、ロゴは公式サイトにてSVGが配布されています。このSVGをテキストエディタで開いて、背景と本体の色を反転させています。
<HEAD>内に設置する
これを予め読み込ませておく必要があります。
<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の例）
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内
下記はこのサイトで設定している例です。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だけなぜか緑でつぶれてしまってロゴが見えません。LINE公式サイトよりロゴ画像をダウンロードできますので、これを使って背景画像を矯正上書きします。ロゴが中心からずれてしまわないように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;
}
SEOには逆効果か？
残念ながらこのAMP-socialを入れるとPagespeed Insightsのスコアが下がるようです。効果とデメリットのトレードオフで導入をご判断ください。
ボタンを画面に固定するには
この記事に対するコメント
このページには、まだコメントはありません。
更新日：2020-05-02 閲覧数：1508 views.