Social Share

URLをコピーするボタンつけたい
なんかShadowDOMというやつを使うと親要素の影響が無くなるのでこういうときに使うといいらしい　たぶん

標準ボタン

Social share

[["X(Twitter)","https://twitter.com/intent/post?text=","ph ph-x-logo"], ["Threads","https://www.threads.net/intent/post?text=","ph ph-threads-logo"], ["Bluesky","https://bsky.app/intent/compose?text=","ph ph-butterfly"], ["Taittsu","https://taittsuu.com/share?text=","ph ph-pants"], ["fedifile","https://fedifile.net/share?text=","ph ph-fediverse-logo"]]

通常はタイトルとURLで機能するがdata-text,data-url属性に記述した内容にも変更可能
data-color,data-color2で「文字&枠線、ホバー時のボタン色、ボタン色、コピー時のお知らせ色」を設定可能

アイコンはPhosphor Icons（MIT License）をつかっている
Water.CSSに合うように作ったつもりだったんですけどなんとか他のページでも使えたらいいなとおもう
<div id="socialshare" style="display: flex;" data-color="#333,#eee,#ccc,#aaa" data-color2="#ccc,#111,#333,#666" data-text="" data-url=""> [["X(Twitter)","https://twitter.com/intent/post?text=","ph ph-x-logo"], ["Threads","https://www.threads.net/intent/post?text=","ph ph-threads-logo"], ["Bluesky","https://bsky.app/intent/compose?text=","ph ph-butterfly"], ["Taittsu","https://taittsuu.com/share?text=","ph ph-pants"], ["fedifile","https://fedifile.net/share?text=","ph ph-fediverse-logo"]] </div> <script src="https://ametama69.github.io/socialshare/socialshare.js"></script>

2024-10-19(Sat)　公開

old
top