Font Awesome製各種ソーシャルボタンの設置
Font Awesome製各種ソーシャルボタンの設置
Font Awesome製各種ソーシャルボタンの設置
遅まきながら、当サイトにも浮動というか不動というか、固定と言うか、HTML+CSS+JavaScriptと図柄・象形を表現できるVectorフォントFont Awesomeによるソーシャルボタンを設置してみました。
JavaScriptが有効なら、パソコンでもスマホやタブレットでも、仮に直前までの間に当サイトを訪問頂いた方であれば、キャッシュからの読み込みを回避(PCなら[F5]などで画面更新)することで、左下にTwitter/Facebook/はてな/LINE/Pocketの各種ソーシャルボタンと表示・非表示用矢印マークが、縦に並んで薄っすら表示され、マウスでポイントや指で触れたりするとハッキリと表示されるはずです。 => [2024/02/29]遺憾ながら、諸事情により外すことにしました。
W3CのドラフトにVector Fontがあったことは知っていたものの、今回、初めて知ったFont Awesomeサイトは、図柄や象形をフォント化したvector iconに加え、HTML+CSSとしてタグとidやclassを一通り、定義済みのサービスを展開しており、無料と有料のフォントがあります。
今回は、無料のフォントのみを使いました。
画像ではなく、フォントであるため、フォントサイズの設定でサイズを変更することもできます。
概要
一連のソーシャルボタンが並んだバーを作成するのにやることと言えば、HTMLはhead内にmetaタグやlinkタグの追記を、CSSは、機能追加・微調整用に1つだけファイルを作成、JavaScriptは、body内にボタンをdocument.writeしつつ、タイトルやURLの設定をするだけです。
HTML
(各)HTMLファイルには、このように太字部分のソーシャルボタン用スタイルシート(CSS)を読み込むlinkタグとソーシャルサイトが要求するmetaタグを追加するだけです。
太字じゃない3行は、今回の話とは直接関係ありませんが、IE対応やモバイル対応用の一例であり、他は省略しているものの、既存のページならtitleやdescriptionなどのmetaタグもあるはずです。
CSS用のlinkタグについては、後述します。
太字部分のmetaタグは、ソーシャルメディア・SNS専用で、基本、[meta property="og:...]は、各種ソーシャルメディアに対応する汎用、[meta name="twitter:xxx...]は、その名の通り、Twitter用です。
ソーシャル用のmetaタグについては、http://ogp.me/にあるように、もっとありますが、ここで挙げたSNSにおいて最小限のタグは足りているはずです。
Twitter用にも汎用と同様の属性値のものもありますが、汎用で事足りるのであれば、最小限で良いでしょう。
尚、Twitter用は、[<meta name="twitter:...]、汎用は[<meta property="og:...]のように[twitter:]と[og:]だけでなく、属性[name]と[property]も異なるので注意。
[og:]は、たぶん、各種SNS上でWebページ情報を認識するためのプロトコル(お約束の規定)OGP/Open Graph Protocolの略でしょう。
[og:title]、[og:description]の内容は、特にこだわりがなければ、[title]、[description]と同じで構わず、[og:site_name]は、サイト名として適切な任意の文字列を指定します。
[og:url]は、各ページのURLのようですが、ソーシャルボタンには後述のようにJavaScriptで各ページURLを指定してあることもあり、自身は、全てサイトトップページのURLにしました。
[og:type]は、メディアに合わせてサイトトップページについては、[website]か[blog]、それ以外は、[article]などとするのが一般的なようです。
[og:image]は、各SNS上でシェアされたり、タイムラインに流れたりする際に他の文字情報と共に表示される画像を指定します。
ただし、Facebookのタイムラインに表示されるようにしたり、設置者がFacebookユーザーでFacebook内のツールで「いいね！」や「シェア」のカウント数をチェックしたりしたい場合には、個人情報丸出しのfb:adminsか、そうではないfb:app_idかの何れかを設定したmetaタグの追記が必要です。
Facebookの公式サイトでは、fb:app_idが、必須となっており、シェアデバッガやOpen Graph Debugger(共に要ログイン)でも、これがないと警告は出るものの、エラーではなく、ボタン自体は機能しそうなので自身は入れていません。
画像については、画像サイズやファイルサイズ、画像の縦横比率(アスペクト比)によっては、どのSNSでも表示されなかったり、Facebookでは表示されるものの、Twitterでは表示されないというケースもありえます。
そこで整理してみるとTwitterのみ専用の指定ができる、LINEとPocketは未確認もhatenaは割と柔軟、Facebookは要求がシビアなので[og:image]には、現時点でFacebookが推奨している横1200ピクセルx縦630ピクセル(限りなく1.91:1に近い比率)以上かつ、ファイルサイズ8MB以下にし、Twitter用は、表示されるサイズのものを[meta name="twitter:image...]で指定するのが無難そうです。
Facebookのオススメ設定については、ウェブサイトとモバイルアプリのシェアのベストプラクティスに詳しく書かれています。
今回試した結果、1200x630だとTwitterでは表示されず、Facebookのサイトで「600 x 315ピクセル以下でも...最小は200x200ピクセル」と触れているものの、W600xH315だと当のFacebookでは表示できなかったのですが、Twitterでは表示できたので[meta name="twitter:image...]でTwitter用を別途指定しました。
Twitter CardとFacebookの設定状態を確認できる公式ツール(要ログイン)が、それぞれ用意されています。
ちなみにFacebookのデバッガは、TwitterのOGPタグの間違いも指摘してくれたりします。
はてなは、IDを取得して実際にブックマークすることで確認するしかなさ気、未検証ですが、LINEも同様かと思われます。
他方、使ったことがなく、一緒くたにしていましたが、Pocketも試してみるとログインして確認するしかなさ気ですが、SNSではなく「あとで読む」タイプの自分用のブックマークだから当然と言えば当然、同じ画像が並んでも困るわけで、そもそもOGP対応ではなく、ページ内に相応の画像があれば(複数ある場合、任意に)ピックアップされる模様です。
CSSとFont Awesome/Bootstrap/BootstrapCDN
Font AwesomeのCSSを使うにあたっては、HTMLファイルにlinkタグを追加するだけです。
ただし、いくつか、対処すべき点がありました。
まず、バージョンや派生版によるようで収録されているフォントに差異があり、全てのボタン用ロゴ全てを1つで賄うCSSファイルがなく、マージ(統合)するか、今回のように適当なサイトやバージョンを探して複数指定する必要があり、設定が被るものがあるようでCSSファイルを複数指定する場合は、その順序も重要でした。
尚、はてなの[B!]ロゴのフォントは、該当するものがなかったため、[B]と[!]に該当するiタグを並べて指定しました。
ちなみにFont Awesomeのフォントは、突然、減ることもあるのか、無料だったものが有料化するケースがあるのか、定かではありませんが、中身の比較はしていないものの、例えば、fontawesome.comとstackpath.bootstrapcdn.comでは、同じ[4.7.0]とあっても収録内容が異なるようで、前者だとfullバージョンでもminiバージョンでもダメで、.miniの後者でないとうまく表示できませんでした。
そんなこんなで何気なく使っていますが、今回、BootstrapやBootstrapCDNについても初めて知りました。
前者は、定義済みHTML/CSS(HTML5/CSS3)を収録したウェブサイトやWebアプリケーションを作成するフロントエンドWebアプリケーションフレームワーク、後者は、そのホスティングサービスだそうです。
つまり、自分で書く必要なく、linkタグで読み込んで望むスタイルの記述方法を調べて指定するだけで簡単にHTML5/CSS3による多彩な見栄えの実装ができることに魅力を感じる人が使うサービスということですね。
そこにFont Awesomeもホストされているという。
また、既設のCSSと被る設定があった場合やレイアウトを変えたい場合の調整用、JavaScirptで機能追加したい場合などには、これら含めマージするなら不要も、必要に応じて今回のように別途、CSSファイルを1つ書いて指定する必要があります。
今回は、既設CSSとの干渉回避、CSS設定の補完、ソーシャルバーを縦に表示するため、ボタン間隔をあけるため、JavaScriptによるソーシャルボタン表示/非表示用の矢印マーク用vectorフォントの追加、マウスを重ねたり、指でタッチする前後にopacity値で透過率を変更するため等の理由でCSSファイルを1つ追加しました。
自身の場合、5でも良かったのですが、4.7版をダウンロードし、完全に精査したわけではないものの、不要なものを削り、必要なものを残しつつ、追加編集したところ、こんな感じになりました。
JavaScript
パラメータ引数付きのソーシャルボタンの表示、今回追加することにしたソーシャルボタンバーの表示/非表示用のJavaScriptコードはこれだけです。
これを<body>〜</body>内に挿入しました(挿入位置は任意)。
ちなみにFacebookやはてなは、いいね！ボタンではなく、シェアボタンやブックマーク追加ボタンです。
ソーシャルボタンバー開閉用に[id=social_btn]としたdivタグを追加、document.getElementById( social_btn )で、このタグ(の内側)のdisplayの設定値を判定し、表示・非表示を切り替えているのが、上段のスクリプトです。
続くdocument.writeでHTMLファイルに一連のdivタグを出力するにあたり、各ソーシャルボタンにおいて必要となるパラメータ値を適宜、document.titleやdocument.URLで取得、設定しています。
今こうして書きながらも修正を怠っている当サイトページ上段・下段に設置した[戻る][進む]ボタンと違って、このように全てJavaScriptで出力しておけば、仮にJavaScriptを無効にしているブラウザで閲覧した際には、ソーシャルボタン自体が表示されないのでスマートです。
備考
当初、metaタグもJavaScriptで出力、Firefoxツールメニューの[ウェブ開発]にある[インスペクター]上は、表示されたものの、TwitterやFacebook上では認識されなかったため、直書きにしました。
尚、既存のサイトの複数ページにこれらタグやスクリプトなどを埋め込む場合、PHPなど動的に生成されるサイト、また、WordPressやブログサービスを利用している場合などは、ともかく、当サイトのように1ページずつHTMLを作成するケースでは、ページ数が多ければ多いほど、手作業でやるのは非現実的であり、正規表現を使った一括置換を行なうのが正攻法です。
Debian(GNU/Linux)を使っている自身は、C言語で実装されたPCRE/Perl(Perl5) Compatible Regular Expressionsライブラリを採用したBlueFishという正規表現による検索・一括置換ができるGUIのフリーソフトウェアでこれを行っています。
ただ、普段よりも入念にBlueFishで埋め込み対象位置であり、基本的に当サイトページ共通であるはずの2地点について、[.]が改行を含むようにしつつ、正規表現で検索、パイプ経由でwc -lしたところ、件数が不一致となり、それならばとPerl5のワンライナーでそれぞれ同じ正規表現を試してみると件数が一致...なぜか、PCREとperl -peによるワンライナーとの間に相違があるも原因がわからず、今回に関しては、両者の検出結果が一致するよう対象範囲を絞るなど若干、正規表現の熟慮が必要でした。
関連サイト
関連リンク
