角丸

色を使って、分かりやすく
Webパーツ工房|SNSシェアボタンをコピペで設置
サイトに合うボタンを、選んでつくる。
SNSシェアボタンの色・形・サイズを選び、完成したデザインを見ながらコードを生成。プラグインを追加せず、WordPressや静的HTMLサイトの編集できる場所へ設置できます。
生成したコードを設置できるサイト向け。シェア時は各SNSへ移動します。
公式カラーとシンプルな配色、四角・角丸・円形、大・中・小を組み合わせて作れます。

表示例:アプリで生成したボタン

色を使って、分かりやすく

アイコン中心のコンパクトな形

落ち着いた配色でページに合わせる
自分のサイトに合うボタンをつくる
プレビューを確認して、そのままコードをコピーできます。
シェアボタンを作る生成されたコードは、HTMLを編集できるWordPressや静的HTMLサイトなどへ設置できます。設置先がstyleタグやscriptタグを許可しているか確認してください。
生成コードの一部
<div id="petatto-share-buttons"></div>
<script>
(function() {
const container = document.getElementById('petatto-share-buttons');
if (!container) { console.error('Share button container #petatto-share-buttons not found.'); return; }
const config = { sns: ["x","line","facebook"], template: 'official', shape: 'rounded', size: 'large', commonText: "" };
const url = encodeURIComponent(window.location.href), title = document.title;
const descMeta = document.querySelector('meta[name="description"]');
生成コードはHTML / CSS / JavaScriptを含みます。
設置したページのタイトルやURL、descriptionを読み込み、シェア文を作ります。共通の追加テキストも指定できます。
選んだSNSやデザイン設定を保存して、別のサイト用のボタン作成にも使えます。
設定やコードの生成はブラウザ内で行い、設定はブラウザのlocalStorageに保存します。生成ツールから入力内容を当サイトへ送信する処理はありません。
完成したボタンを押すと、共有するタイトルやURLなどが各SNSへ渡されます。生成時の処理とは別です。
プラグインを追加せず、生成したHTML / CSS / JSを設置する方式です。表示速度は設置先のページや他のスクリプトにも左右されます。
HOW TO USE
表示したいSNS、デザイン、形状、サイズなどを左のパネルで組み合わせます。
右側のプレビューを確認し、「コードをコピー」ボタンでHTMLを取得します。
WordPressや静的サイトなど、HTMLを貼り付けられる場所にそのまま設置します。
FAQ
A1: 無料で利用でき、生成コードは商用サイトにも設置できます。掲載する内容やSNSロゴなどの利用条件は、各提供元の規約も確認してください。
A2: はい。静的HTMLサイトや各種ブログサービスなど、生成されたコードを貼り付けられる環境であれば、どこでもお使いいただけます。
A3: プラグインを追加せず、生成したHTML/CSS/JSを設置する方式です。表示速度は設置先のページや他のスクリプトにも左右されます。
A4: 設定やコード生成はブラウザ内で行い、設定はlocalStorageに保存します。完成したボタンを押すと、共有するタイトルやURLなどが各SNSへ渡されます。
サイトに合うシェアボタンをつくる
デザインを選び、生成コードを設置できます。
無料でシェアボタンを作る