|
|
@@ -32,52 +32,60 @@ MastodonもMisskeyも `<host>/share?text=` のWeb Intent URLのパスが共通
|
|
|
|
|
|
## Usage
|
|
|
|
|
|
-1 index.htmlに記載している以下のコードを共有ボタンを設置したい場所にHTMLとして記述する (iframeで参照するのもあり)。WordPressだとWidgetの [Custom HTML] などで配置できる。
|
|
|
+1 index.htmlに記載している以下のコード (main要素内部) を共有ボタンを設置したい場所にHTMLとして記述する (iframeで参照するのもあり)。WordPressだとWidgetの [Custom HTML] などで配置できる。
|
|
|
|
|
|
```
|
|
|
<fieldset>
|
|
|
<style>
|
|
|
/* @scope { */
|
|
|
- fieldset input, fieldset button {
|
|
|
+ fieldset input, fieldset a {
|
|
|
width: 100%;
|
|
|
color: white;
|
|
|
font-size: 2em;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ fieldset div {
|
|
|
+ display: flex;
|
|
|
}
|
|
|
/* } */
|
|
|
</style>
|
|
|
- <div style="display:flex; width:100%;">
|
|
|
- <button style="background-color:#333"
|
|
|
+ <legend>Share</legend>
|
|
|
+ <div>
|
|
|
+ <a style="background-color:#333"
|
|
|
onclick="navigator.clipboard.writeText(
|
|
|
- document.title+' '+location.href);">Copy</button>
|
|
|
- <button style="background-color:#2c6ebd"
|
|
|
- onclick="location.href='https://b.hatena.ne.jp/entry/s/'
|
|
|
- +location.host+'/'+location.pathname">Hatena</button>
|
|
|
- <button style="background-color:#3b5998"
|
|
|
- onclick="location.href='https://www.facebook.com/sharer/sharer.php?t='
|
|
|
+ document.title+' '+location.href);">Copy</a>
|
|
|
+ <a style="background-color:#2c6ebd"
|
|
|
+ href="https://b.hatena.ne.jp/entry/s/"
|
|
|
+ onmousedown="this.href='https://b.hatena.ne.jp/entry/s/'
|
|
|
+ +location.host+'/'+location.pathname">Hatena</a>
|
|
|
+ <a style="background-color:#3b5998"
|
|
|
+ href="https://www.facebook.com/sharer/sharer.php?t="
|
|
|
+ onmousedown="this.href='https://www.facebook.com/sharer/sharer.php?t='
|
|
|
+encodeURIComponent('QP '+document.title)
|
|
|
- +'&u='+encodeURIComponent(location.href);">Facebook</button>
|
|
|
- <button style="background-color:#1da1f2"
|
|
|
- onclick="location.href='https://twitter.com/intent/tweet?text='
|
|
|
+ +'&u='+encodeURIComponent(location.href);">Facebook</a>
|
|
|
+ <a style="background-color:#1da1f2"
|
|
|
+ href="https://twitter.com/intent/tweet?text="
|
|
|
+ onmousedown="this.href='https://twitter.com/intent/tweet?text='
|
|
|
+encodeURIComponent('QP '+document.title)
|
|
|
- +'&url='+encodeURIComponent(location.href);">X/Twitter</button>
|
|
|
- <button style="background-color:black"
|
|
|
- onclick="location.href='https://www.threads.net/intent/post?text='
|
|
|
+ +'&url='+encodeURIComponent(location.href);">X/Twitter</a>
|
|
|
+ <a style="background-color:black"
|
|
|
+ href="https://www.threads.net/intent/post?text="
|
|
|
+ onmousedown="this.href='https://www.threads.net/intent/post?text='
|
|
|
+encodeURIComponent('QP '
|
|
|
- +document.title+' '+location.href);">Threads</button>
|
|
|
+ +document.title+' '+location.href);">Threads</a>
|
|
|
</div>
|
|
|
- <form novalidate="novalidate" onformdata="
|
|
|
- event.formData.set('text', 'QP ' +document.title+' '+location.href);"
|
|
|
- style="display:flex;" >
|
|
|
+ <div>
|
|
|
<input id="MaMiShare.host" list="MaMiList" type="email" inputmode="email"
|
|
|
autocomplete="on" autocorrect="off" autocapitalize="off"
|
|
|
- placeholder="mstdn.jp misskey.io"
|
|
|
+ formnovalidate='formnovaildate' placeholder="mstdn.jp misskey.io"
|
|
|
style="background-color:rgb(158,194,63)" />
|
|
|
- <button style="background-color:rgb(99,100,255);"
|
|
|
- onclick="this.parentElement.action =
|
|
|
- `https://${this.previousElementSibling.value}/share`;
|
|
|
- localStorage.setItem('MaMiShare.host',
|
|
|
- this.previousElementSibling.value);
|
|
|
- ">MaMiShare</button>
|
|
|
+ <a style="background-color:rgb(99,100,255);"
|
|
|
+ href="https://mamishare.jp"
|
|
|
+ onmousedown="localStorage.setItem('MaMiShare.host',
|
|
|
+ this.previousElementSibling.value);
|
|
|
+ this.href=`https://${this.previousElementSibling.value}/share?text=QP `
|
|
|
+ +encodeURIComponent(document.title+' '+location.href);
|
|
|
+ ">MaMiShare</a>
|
|
|
<script>
|
|
|
window.addEventListener('load', () => {
|
|
|
document.getElementById('MaMiShare.host').value =
|
|
|
@@ -109,11 +117,42 @@ MastodonもMisskeyも `<host>/share?text=` のWeb Intent URLのパスが共通
|
|
|
<option value="submarin.online"></option>
|
|
|
<option value="sushi.ski"></option>
|
|
|
</datalist>
|
|
|
- </form>
|
|
|
+ </div>
|
|
|
+</fieldset>
|
|
|
+<fieldset>
|
|
|
+ <legend>Follow</legend>
|
|
|
+ <div>
|
|
|
+ <a style="background-color:#f26522"
|
|
|
+ href="https://web.gnusocial.jp/feed">
|
|
|
+ RSS</a>
|
|
|
+ <a style="background-color:#2bb24c"
|
|
|
+ href="https://feedly.com/i/discover/sources/search/feed/https%3A%2F%2Fweb.gnusocial.jp">
|
|
|
+ Feedly</a>
|
|
|
+ <a style="background-color:#3b5998"
|
|
|
+ href="https://www.facebook.com/profile.php?id=61556435340202">
|
|
|
+ Facebook</a>
|
|
|
+ <a style="background-color:#1da1f2"
|
|
|
+ href="https://x.com/gnusocialjp">X/Twitter</a>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <a style="background-color:black"
|
|
|
+ href="https://www.threads.net/@gnusocialjp">
|
|
|
+ Threads</a>
|
|
|
+ <a style="background-color:rgb(0,112,255)"
|
|
|
+ href="https://bsky.app/profile/did:plc:cgtlyuedd3qwmtycjv62xhma">
|
|
|
+ Bluesky</a>
|
|
|
+ <a style="background-color:#a22430"
|
|
|
+ href="https://gnusocial.jp/gnusocialjp">
|
|
|
+ GNU social</a>
|
|
|
+ </div>
|
|
|
</fieldset>
|
|
|
```
|
|
|
|
|
|
-datalist要素はなくても問題ない。div要素内のFacebookなどの共有ボタンはおまけでこれもなくても問題ない。
|
|
|
+以下の項目は泣くても問題ない。
|
|
|
+
|
|
|
+1. datalist要素。
|
|
|
+2. div要素内のFacebookなどの共有ボタン。
|
|
|
+3. フォローボタン用の2個目のfieldset要素。
|
|
|
|
|
|
2 続いて、左側のフォームにMastodon/Misskeyサーバーのホスト名 (例: mstdn.jp) を記入し、[MaMiShare] を選ぶ。datalist要素で固定になるが候補サーバーの候補を必要に応じて設定しておくとユーザーには親切だろう。
|
|
|
|
|
|
@@ -140,5 +179,8 @@ GPLの採用理由は他人の改善内容をこのコードに取り込みた
|
|
|
- GNU social。たぶん実装がないので作る必要がある。
|
|
|
|
|
|
## CHANGELOG
|
|
|
-### 2024-02-25 Sun: v1.0.0 公開
|
|
|
-### 2024-02-24 Sat: v0.0.0 誕生
|
|
|
+### 2024-02-26 Mon: v1.1.0
|
|
|
+- フォローボタンを追加。
|
|
|
+- アクセス解析ツールでの分析のためにbutton->a要素に変更。
|
|
|
+### 2024-02-25 Sun: v1.0.0
|
|
|
+### 2024-02-24 Sat: v0.0.0
|
SENOO, Ken
