記事納品のお仕事をされている方は、納品した記事にどれくらいのいいねが集まっているかが分かるコードも添えて納品すれば、いいねが増えたとき、お互い気持ちがいいですよね。
ウェブ記事のいいねボタンといえば、facebookが一般的。
以下のシンプルなボックスのタイプがとくによく使われてきました。スマートでシンプルだから。
フェイスブックのいいねボタン作成ページにて、layoutに「button_count」を選ぶと、上のデザインになります。
というか、なるはずでした。最近なぜか、layoutでbutton_countを選んでいるのに、以下のようにデフォルトのstandardの形でコードが発行されてしまいます。
何回やってもダメ。
まあこれでもいいのですが、やっぱりシンプルなボックスがいいな。
そこで、部分的にコードをいじってみました。すると、以下のようにコードを書き換えて、IFrameで埋め込むと、いままでのようにbutton_countタイプで表示できました。自分へのメモがてら書いておくので、必要な方はご活用ください。
<iframe src=”https://www.facebook.com/plugins/like.php?href=ここにURL&width=190&layout=button_count&action=like&size=small&share=true&height=46&appId” width=”190″ height=”46″ style=”border:none;overflow:hidden” scrolling=”no” frameborder=”0″ allowfullscreen=”true” allow=”autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share”></iframe>
ここにURL・・・この部分に対象ページのURLを入力します。すべてアルファベットの場合はそのままペーストで問題ありません。URLに日本語が含まれる場合はPunycode（ピュニコード、プニコード）に変換する必要があります。その場合は、フェイスブックのいいねボタン作成ページにて、「いいね！ボタン設定ツール」の「href」にURLを入力し、「コード取得」ボタンを押せば、対象URLのPunycodeが分かるので（下図の赤のカギ括弧内、href=の後から&width=の前まで）、これをコピーして、上記のiframeコードの「ここにURL」に貼り付ければ簡単です。
