Web Share APIでurl共有モーダルを簡単実装
今回は以下のようなurl共有機能の実装例を紹介します。 chrome/iPhoneの場合 edge/macbookの場合 safari/macbookの場合 このようなUIや機能は自前で実装するとかなり大変ですが、Web Share APIを利用することで簡単に実装することができます。 要件 PC,スマホの両方に対応したサイトで、urlを共有するボタンを作成する。 LINE, X(旧Twitter), Facebook等への共有機能を持つWeb Share APIを使う。 Web Share APIが対応していない環境ではurlをクリップボードにコピーできる簡易的なモーダルを表示する。 Web Share APIとは？ Web Share APIを使用すると、Webアプリは、プラットフォーム固有のアプリと同じ方法で、デバイスにインストールされている他のアプリへのリンク、テキスト、およびファ
FacebookやTwitterの投稿時表示画像（OGP）を確認・修正する方法 | New Standard
OGPとは「Open Graph protocol」の略称です。簡単に言うとFacebookやTwitterなどにURLを投稿した際、表示されるタイトルや説明文、アイキャッチ画像の表示内容を制御する仕組みです。 これらは専用のコードを書いて個別にコントロールするのですが、New Standardでは自動的に表示を整えられるようにしています。 ただ、SNSの仕様上100％コントロールできるものではないので「あれ、意図した画像と違う……」という時は、以下の手順で確認・修正してください。 Facebook投稿表示の確認 Facebookには「シェアデバッガー」という、シェアした時に表示される画像を確認するサイトがあります。 https://developers.facebook.com/tools/debug/ 使い方も簡単。確認したいURLを入れて「デバッグ」ボタンを押すだけです。 例えばNe
各種SNSのシェアボタン設置用URLまとめ！サンプルコードも | Web Design Trends
Facebook、TwitterなどのSNSに記事をシェアしてもらうのに必要なのが「シェアボタン」です。サービスごとにURLやパラメータが異なるため、オリジナルでシェアボタンを作成する場合はそれぞれ設定しなければなりません。 今回は、SNSごとにシェアボタンに設定するためのURLや設定の方法などをご紹介します。 オリジナルでシェアボタンを設置するメリット 公式サイトのジェネレータやプラグインを使ってシェアボタンを作成することができますが、オリジナルでシェアボタンを作成するメリットにはどのようなものがあるのでしょうか？ 思い通りのデザインで作れる WordPressのプラグインにシェアボタンを設置できるものは色々と公開されていますが、意外とデザインのバリエーションが少なく、思い通りのものが見つかりません。 HTMLとCSSがある程度理解できていれば特に難しい技術は必要ないので、自分でシェアボ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
tenpu
https://www.google.com/mymaps/viewer?usp=sharing&mid=1pbfxtxmkezbEUVa_b-NUWJJ5oMbYyTYL
ごりゅご.com
