sns_button_on_entry_detail_page


当サイトの記事詳細ページのコンテンツの末尾辺りにTwitterのツイートボタンやFacebookのシェアボタンを設置しているが、

最近、公式から配布されているものから自家製のものに変えた。


例えば、Twitterで公式から配布されているパーツを貼り付けると、


twitter_button


こんな感じで見栄えの良いボタンや様々な便利な機能が付くけれども、このボタンの読み込みにはJavaScriptが使われており、PageSpeed Insightsの評価が下がってしまう。


そこで、自作でボタンを作ってみることにした。

今回はとりあえず、Twitterボタンのみを紹介する事にして、他のボタンは当記事のソースコードから該当するコードを探してみてください。


それではTwitterボタンに触れてみる。

まずはHTMLの方で、

<a href="http://twitter.com/share?text={記事タイトル}&url={URL}" target="_blank" rel="noopener" class="sns_btn twitter">ツイート</a>

※{記事タイトル}には表示している記事のタイトル、{URL}には表示しているページのURLを入れる。


次にCSSの方で、

<style>
.sns_btn{
    color: #FFFFFF;
    padding: 3px 10px 3px 10px;
    border-radius: 5px;
}
.twitter {
    background-color: #1da1f2;
    
}
.twitter:hover{
    color: #FFFFFF;
    background-color: #8dcff8;
}

このようにした。


再びボタンのHTMLの方に戻り、SOY CMSで記事毎のボタンをどのように作ったか？について触れてみると、

<!-- b_block:id="entry" -->
<a href="http://twitter.com/share?text=<!-- cms:id="title_plain" /-->&url=<!-- cms:id="entry_url" /-->" target="_blank" rel="noopener" class="sns_btn twitter">ツイート</a>
<!-- /b_block:id="entry" -->

cms:id="title_plain"とcms:id="entry_url"を用いて組み立てた。

※b_block:id="entry"の位置やcms:id="title_plain"等の複数使用時の*の付与は適宜調整してください。


これでページの読み込み時のJavaScriptの読み込みと実行の回数を減らすことが出来、PageSpeed Insightsのスコアも向上した。