外部向けブログページにシェアボタンを付ける

JunichiIto commented 1 year ago

https://bootcamp.fjord.jp/articles/70 を書いてみましたが、読んだ人が記事を気軽にシェアできるように各種シェアボタンがあればいいなと思いました。

参考：以下は僕のブログに付いてるシェアボタンです。

machida commented 1 year ago

:memo:

参考: https://webdesign-trends.net/entry/3632

Twitter
Facebook
はてぶ

を設置。

設置場所は以下の二箇所。
デザインはmachidaがやります。

上部

下部

github-actions[bot] commented 1 year ago

このissue|PRは60日間更新がないため7日後にcloseします。closeしたくない場合はstaleラベルを外してください。

github-actions[bot] commented 10 months ago

このissue|PRは60日間更新がないため7日後にcloseします。closeしたくない場合はstaleラベルを外してください。

github-actions[bot] commented 8 months ago

このissue|PRは60日間更新がないため7日後にcloseします。closeしたくない場合はstaleラベルを外してください。

machida commented 7 months ago

@88-99

https://bootcamp.fjord.jp/reports/84748#comment_150067 日報での質問

デザインは @machida さんがされるということで、class も町田さんが記述されるのであれば、以下のようにシェアするためのコードを並べておくだけでよろしいのでしょうか？

はい、それで大丈夫ですー

88-99 commented 7 months ago

@machida

ありがとうございます🙏かしこまりました。

88-99 commented 7 months ago

@machida , @komagata , @JunichiIto

2点質問させていただいてもよろしいでしょうか？現在 X, Facebook, はてなブックマークの公式ページから取得したプラグインのサンプルコードを利用して以下のように書いています。

= link_to "X", "https://twitter.com/intent/tweet?url=https://bootcamp.fjord.jp/articles/#{@article.id}&hashtags=fjordbootcamp", target: :_blank, rel: "noopener noreferrer"
iframe [src="https://www.facebook.com/plugins/share_button.php?href=https%3A%2F%2Fbootcamp.fjord.jp%2Farticles%2F95&layout&size&width=102&height=20&appId"
  width="102" height="20" style="border:none;overflow:hidden" scrolling="no" frameborder="0"
  allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"]
a [href="https://b.hatena.ne.jp/entry/s/bootcamp.fjord.jp/articles/#{@article.id}"
  class="hatena-bookmark-button" data-hatena-bookmark-layout="vertical-normal"
  data-hatena-bookmark-lang="ja" title="このエントリーをはてなブックマークに追加"]
  img [src="https://b.st-hatena.com/images/v4/public/entry-button/button-only@2x.png"
  alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;"]
  script type="text/javascript" src="https://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"

=linke_to〜が X
iframe〜が Facebook
a [href=〜がはてなブックマークのシェアボタンです。

ブラウザでの表示

質問①

プラグインを使用しているのでスタイルが入ってしまうのですがよろしいでしょうか？

デザインはmachidaがやります。

↑についての質問です。 https://github.com/fjordllc/bootcamp/issues/6407#issuecomment-1521332903

質問②

rails では a タグの代わりに linke_to を使うことが主流ではないかと思うのですが、a タグのままでも構わないでしょうか？はてなブックマークを linke_to で書こうとしましたが、うまくいきませんでした。

公式ページ

X https://developer.twitter.com/en/docs/twitter-for-websites/tweet-button/overview

Facebook https://developers.facebook.com/docs/plugins/share-button?locale=ja_JP

はてなブックマーク https://b.hatena.ne.jp/guide/bbutton

machida commented 7 months ago

@88-99 プラグインにデザインが入っていても大丈夫ですー。プラグインを使ったものをコミットしておいてください。

88-99 commented 7 months ago

@machida ありがとうございます。かしこまりました。

88-99 commented 7 months ago

@machida , @komagata

Facebook のシェアボタンでエラーが出て解消することができておりません。どのように対処したら良いかご教示いただけませんでしょうか？

エラー内容

ボタンを設置した画面のconsole上に出ています。

Error with Permissions-Policy header: Unrecognized feature: 'ambient-light-sensor'.
Error with Permissions-Policy-Report-Only header: Unrecognized feature: 'document-domain'.

エラーの再現方法

最新のコードを取得

git fetch

ブランチをチェックアウト

git checkout feature/add-share-buttons-on-blog-page-for-external

ブログ記事のいずれかを開いてconsoleを確認

http://localhost:3000/articles/

エラーが発生しているコード

app/views/articles/show.html.slim:47 :62

iframe [src="https://www.facebook.com/plugins/share_button.php?href=https%3A%2F%2Fbootcamp.fjord.jp%2Farticles%2F#{@article.id}&layout&size&width=102&height=20&appId"
  width="102" height="20" style="border:none;overflow:hidden" scrolling="no" frameborder="0"
  allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture"]

上記コードの取得方法

シェアボタン - Meta for Dvelopers にアクセス https://developers.facebook.com/docs/plugins/share-button?locale=ja_JP

実際のブログ URL を入力してコードを取得

iframe タブのコードをコピペ article ナンバー部分95を #{article.id}に変更。

考えたこと・調べたこと

Error with Permissions-Policy header: Unrecognized feature: 'ambient-light-sensor'.
Error with Permissions-Policy-Report-Only header: Unrecognized feature: 'document-domain'.

Unrecognized featureは機能が認識されていないという意味で、iframe で認識されていない機能があるのでエラーが出ているのではないか。

試したこと

src= URLより後ろを全て削除してボタンを押してみると、動作は変わらずエラーは出ました。

iframe [src="https://www.facebook.com/plugins/share_button.php?href=https%3A%2F%2Fbootcamp.fjord.jp%2Farticles%2F#{@article.id}"]

以下記事にも目を通しましたが、具体的にどうしたら良いのかがわかりませんでした。

Permissions Policy https://developer.mozilla.org/ja/docs/Web/HTTP/Permissions_Policy
Permissions-Policy https://developer.mozilla.org/ja/docs/Web/HTTP/Headers/Permissions-Policy

ambient-light-sensor 現在の文書が、端末の周囲の環境における光量についての情報を、 AmbientLightSensor インターフェイスを通じて収集することを許可するかどうかを制御します。

document-domain 現在の文書が document.domain を設定することを許可するかどうかを制御します。このポリシーが無効な場合、 document.domain を設定しようとすると失敗し、 SecurityError の DOMException が発生します。

機能ポリシーが設定できていないからでしょうか。

komagata commented 7 months ago

@88-99 コードを追加する前は出ていないメッセージでしょうか？何を追加すると出て、何を追加しなければ出ないなど、もう少しデバッグ・調査してみてください〜

88-99 commented 7 months ago

@komagata

ありがとうございます。

公式サイトから持ってきて追加したコード（プラグイン）は以下です。こちらのコードを書く前はエラーは出ておりませんでした。

iframe [src="https://www.facebook.com/plugins/share_button.php?href=https%3A%2F%2Fbootcamp.fjord.jp%2Farticles%2F#{@article.id}&layout&size&width=102&height=20&appId"
  width="102" height="20" style="border:none;overflow:hidden" scrolling="no" frameborder="0"
  allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture"]

上のコードから必要最小限に削ったコードでも全く同じエラーが出ますので、iframe を使うことが原因だと思っています。iframe の権限ポリシーが関係しているのではないかと考えています。

iframe [src="https://www.facebook.com/plugins/share_button.php?href=https%3A%2F%2Fbootcamp.fjord.jp%2Farticles%2F#{@article.id}]

【補足】

以下は最初に私が書いていたプラグインに変更する前のコードです。こちらのコード（a タグ）ではエラーは出ません。

a href="http://www.facebook.com/share.php?u=https://bootcamp.fjord.jp/articles/#{@article.id}" Facebook

https://github.com/fjordllc/bootcamp/issues/6407#issuecomment-1521332903 ↑こちらの参考記事に記載のコードを使っています。

<a href="http://www.facebook.com/share.php?u={URL}" rel="nofollow noopener" target="_blank">リンクテキスト</a>

komagata commented 6 months ago

@88-99 表示されるメッセージがどういう意味で、表示されていても問題ないとしたらなぜ問題ないのか調べてみてください。

実際のお仕事でも必ず必要になるはずです〜。

88-99 commented 6 months ago

@komagata

表示されるメッセージがどういう意味で、表示されていても問題ないとしたらなぜ問題ないのか調べてみてください。

ありがとうございます。理由を自分なりに考えてみました。現在は、コードを修正し発生しているエラーは一つです。

Error with Permissions-Policy header: Unrecognized feature: 'ambient-light-sensor'.

この警告は、「Permissions-Policy header でambient-light-sensorという機能が認識されていません。」という意味で、この機能を利用するには、Permissions API により 'ambient-light-sensor' デバイスセンサーを使用する許可を与える必要があり、それをしていないので認識されないという警告が出ているのではと推測しました。

またMDNには、「Experimental: これは実験的な機能です。」と「この機能はサーバーで設定された Permissions Policy でブロックされる可能性があります」との記載もあり、以下3つの点からも無視して問題はないと判断します。

下に記載したこの機能の内容を考えても使う必要性を感じないこと
シェアボタンを押したときの挙動が意図したものであること
このFacebookのプラグインが実装されている他サイトにおいても同じ警告が発生してそのままにされていること

ambient-light-sensorとは、現在の文書が、端末の周囲の環境における光量についての情報を、 AmbientLightSensor インターフェイスを通じて収集することを許可するかどうかを制御します。AmbientLightSensor インターフェイスは、現在の光レベル、すなわちホストデバイス周辺の環境光の照度を返します。

AmbientLightSensor https://developer.mozilla.org/ja/docs/Web/API/AmbientLightSensor

komagata commented 6 months ago

@88-99 なるほどですね〜！では無視していいと思います〜！

88-99 commented 6 months ago

@komagata ご確認ありがとうございます！かしこまりました！

github-actions[bot] commented 4 months ago

このissue|PRは60日間更新がないため7日後にcloseします。closeしたくない場合はstaleラベルを外してください。

88-99 commented 4 months ago

本番環境で確認しました。closeします。

fjordllc / bootcamp