はてなブックマークボタンの作成・設置について

<!DOCTYPE html> <html lang="ja" data-page-scope="" data-stable-request-url="https://b.hatena.ne.jp/guide/bbutton?url=https%3A%2F%2Fspeakerdeck.com%2Fleveragestech%2Fmou-du-shi-ye-wozhi-erusisutemuni" data-sentry-environment="production" data-sentry-sample-rate="0.1" > <head>  <script> (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-5TDHQX'); </script>  <meta charset="UTF-8"> <title>はてなブックマークボタンの作成・設置について</title> <script src="https://b.st-hatena.com/77d2ee6f79ddaf78eb2d198936bae315b6721993/js/v4/bookmark.js" async></script> <link type="text/css" rel="stylesheet" href="https://b.st-hatena.com/77d2ee6f79ddaf78eb2d198936bae315b6721993/css/v4/bookmark.css" /> <link type="text/css" rel="stylesheet" href="https://b.st-hatena.com/77d2ee6f79ddaf78eb2d198936bae315b6721993/css/v4/bookmark.star.css" /> <link type="text/css" rel="stylesheet" href="https://b.st-hatena.com/77d2ee6f79ddaf78eb2d198936bae315b6721993/css/v4/entry-button.css" /> <link type="text/css" rel="stylesheet" href="https://b.st-hatena.com/77d2ee6f79ddaf78eb2d198936bae315b6721993/css/v4/guide/bbutton.css" /> <link rel="canonical" href="https://b.hatena.ne.jp/guide/bbutton" /> <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" /> <meta name="viewport" content="width=device-width"> <link rel="search" type="application/opensearchdescription+xml" title="はてなブックマーク検索" href="/opensearch.xml" /> <link rel="apple-touch-icon-precomposed" href="https://b.st-hatena.com/77d2ee6f79ddaf78eb2d198936bae315b6721993/images/v4/public/apple-touch-icon-precomposed.png" /> <link rel="mask-icon" href="https://b.st-hatena.com/77d2ee6f79ddaf78eb2d198936bae315b6721993/images/v4/public/safari-pinned-tab-icon.svg" color="#00A4DE" /> <meta name="msapplication-navbutton-color" content="#2C6EBD" /> <meta name="msapplication-task" content="name=はてなブックマーク; action-uri=/; icon-uri=https://b.st-hatena.com/77d2ee6f79ddaf78eb2d198936bae315b6721993/images/v4/public/icons/bookmark.ico" /> <meta name="msapplication-task" content="name=マイブックマーク; action-uri=/my; icon-uri=https://b.st-hatena.com/77d2ee6f79ddaf78eb2d198936bae315b6721993/images/v4/public/icons/my-bookmark.ico" /> <meta name="msapplication-task" content="name=お気に入りのブックマーク; action-uri=/my/favorite; icon-uri=https://b.st-hatena.com/77d2ee6f79ddaf78eb2d198936bae315b6721993/images/v4/public/icons/favorite-bookmark.ico" /> <meta name="msapplication-task" content="name=人気エントリー; action-uri=/hotentry; icon-uri=https://b.st-hatena.com/77d2ee6f79ddaf78eb2d198936bae315b6721993/images/v4/public/icons/hotentry.ico" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="referrer" content="always"> <script> function isMobile() { const html = document.documentElement; const deviceType = html.dataset.deviceType || ''; if (deviceType.length > 0) { return deviceType === 'MOBILE'; } else { const maxMobileWidth = 480; const windowWidth = window.innerWidth; return maxMobileWidth >= windowWidth; } } </script> </head> <body class="guide fixed-header">  <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-5TDHQX" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>  <div class="link-app-banner js-dynamic-link-app-banner is-hidden"> <button class="link-app-banner-btn-close js-dynamic-link-app-banner-close-button"><span>close</span></button> <a class="link-app-banner-btn" href="https://hatenabookmark.page.link/app"> <div class="link-app-banner-btn-detail"> <div class="link-app-banner-icon"><img src="/images/v4/public/app/ic-ios.svg" alt="はてなブックマークアプリ"></div> <p class="link-app-banner-text">サクサク読めて、<br class="link-app-banner-text-newline">アプリ限定の機能も多数！</p> </div> <div class="link-app-banner-btn-open">アプリで開く</div> </a> </div> <header id="global-header" data-portal-static-origin="//cdn.www.st-hatena.com"> <div id="header" class="global-header-inner js-global-header-inner"> <h2 id="gh-logo"><a href="/" data-gtm-label="gh-blogo"><span>はてなブックマーク</span></a></h2> <div class="is-guest js-guest is-hidden"> <input id="gh-search-icon-check" type="checkbox" checked="checked" /> <label class="gh-search-icon" for="gh-search-icon-check" aria-label="検索を閉じる"><span>閉じる</span></label> <form class="gh-searchbox" method="get" action="/search_dwim" role="search"> <input value="" name="q" type="search" class="gh-inputtext" placeholder="キーワード・URLを検索" size="40" /> <input value="" type="submit" class="gh-search-button" /> </form> <ul class="gh-service-menu"> <li><a href="/guide" data-gtm-label="gh-guest-guide">はてなブックマークって？</a></li> <li><a href="/guide/tools" data-gtm-label="gh-guest-tools">アプリ・拡張の紹介</a></li> <li><a href="https://www.hatena.ne.jp/register?location=https%3A%2F%2Fb.hatena.ne.jp%2F%3Fregistered_from%3Dglobal-header&via=201037" class="gh-guest-register" data-gtm-label="gh-guest-register">ユーザー登録</a></li> <li><a href="https://www.hatena.ne.jp/login?location=https%3A%2F%2Fb.hatena.ne.jp%2Fguide%2Fbbutton%3Furl%3Dhttps%253A%252F%252Fspeakerdeck.com%252Fleveragestech%252Fmou-du-shi-ye-wozhi-erusisutemuni" rel="nofollow" class="gh-guest-login" data-gtm-label="gh-guest-login">ログイン</a></li> <li class="gh-hatena-logo"><a href="http://www.hatena.ne.jp/"><img src="https://b.st-hatena.com/77d2ee6f79ddaf78eb2d198936bae315b6721993/images/v4/public/logo/logo-global-white.svg" alt="Hatena" width="74px" height="13px"/></a></li> </ul> </div> <noscript> <ul class="gh-service-menu"> <li><a href="https://www.hatena.ne.jp/logout?location=https%3A%2F%2Fb.hatena.ne.jp%2F">ログアウト</a></li> </ul> </noscript> <script type="text/x-template" id="template-menu-hatena-user"> <form class="gh-searchbox" method="get" action="/search_dwim" role="search"> <input value="" name="q" type="search" class="gh-inputtext" placeholder="キーワード・URLを検索" size="40" /> <input value="" type="submit" class="gh-search-button" /> </form> <ul class="gh-service-menu"> <li><a class="hotentry" data-gtm-label="gh-mypage" href="{{hotentry_url}}"><img src="{{user_image_url}}" class="header-profile-icon" width="16" height="16" alt="{{username}}" /></a><a class="hotentry" data-gtm-label="gh-mypage" href="{{hotentry_url}}">マイページ</a></li> <li><a class="bookmark" data-gtm-label="gh-bookmark" href="{{bookmark_url}}">ブックマーク</a></li> <li><a class="unread_bookmark" data-gtm-label="gh-ril" href="{{bookmark_stock_url}}">あとで読む</a></li> <li><a class="add" data-gtm-label="gh-add" href="{{add_bookmark_url}}">追加</a></li> <li><a class="tools" data-gtm-label="gh-tools" href="/guide/tools">ツール</a></li> <li><a class="config" data-gtm-label="gh-config" href="/-/my/config/profile">設定</a></li> <li><a class="feedback" data-gtm-label="gh-feedback" href="/-/feedback/hatena_bookmark" target="_blank">フィードバック</a></li> <li id="header-username" class="gh-dropdown-services" data-gtm-label="gh-services" title="利用中のサービス" data-name="{{username}}"> <span class="header-dropdown gh-dropdown" tabindex="0"> <img src="https://b.st-hatena.com/77d2ee6f79ddaf78eb2d198936bae315b6721993/images/v4/public/common/usermenu-wh.svg" alt="利用中のサービス" width="24" height="24" /> </span> <dl class="header-window" id="username-window"></dl> </li> <li id="header-notify" data-gtm-label="gh-notify" class="gh-dropdown-notify" title="あなたへのお知らせ"> <span class="header-dropdown gh-dropdown" tabindex="0"> <img src="https://b.st-hatena.com/77d2ee6f79ddaf78eb2d198936bae315b6721993/images/v4/public/common/notify-wh.svg" alt="あなたへのお知らせ" width="25" height="25" /> <span class="notify-count"></span> </span> <div id="notify-window" class="header-window header-notify"></div> </li> <li class="gh-hatena-logo"><a href="http://www.hatena.ne.jp/"><img src="https://b.st-hatena.com/77d2ee6f79ddaf78eb2d198936bae315b6721993/images/v4/public/logo/logo-global-white.svg" alt="Hatena" width="74px" height="13px"/></a></li> </ul> </script> </div> </header> <div id="info-header"><div id="info-header-message"></div><span></span></div> <div class="global-notification is-hidden js-global-notification"></div> <div id = "container"> <div class="guide-bbutton-contaier"> <div id="guide-headline"> <div class="guide-headline-inner"> <h2>はてなブックマークボタン</h2> <p>はてなブックマークボタンは、はてなブックマークが提供するソーシャルボタンです。ボタンを利用すると、ユーザーはその場でページをブックマークすることができます。</p> <p>設置はとても簡単。以下のフォームで設定を行い、コードをあなたのページに貼るだけです。</p> </div> </div> <div class="bbutton-container js-bbutton-container"> <div class="bbutton-2column"> <section class="bbutton-section"> <h3 class="bbutton-title">1. ボタンのデザインを選びましょう</h3> <ul class="bbutton-design js-button-style-radios"> <li> <label for="design-basic" class="bbutton-design-label"> <input type="radio" name="design" value="basic" id="design-basic" checked="on" class="js-button-style" data-style="basic"> <div style="width:89px; height:20px;"> <div class="btn-standard show-text"> <span class="icon"></span> </div> </div> </label> </li> <li> <label for="design-touch" class="bbutton-design-label"> <input type="radio" name="design" value="touch" id="design-touch" class="js-button-style" data-style="touch"> <div style="width:40px; height:40px;"> <div class="btn-touch"> <span class="icon"></span> </div> </div> </label> </li> <li> <label for="design-vertical" class="bbutton-design-label"> <input type="radio" name="design" value="vertical" id="design-vertical" class="js-button-style" data-style="vertical"> <div style="width:84px; height:40px;"> <div class="btn-vertical"> <span class="count">3618</span> <span class="text"></span> </div> </div> </label> </li> </ul> </section> <section class="bbutton-section"> <h3 class="bbutton-title">2. ボタンの設定をしましょう</h3> <ul class="bbutton-setting js-button-settings-panel"> <li class="js-label-setting js-group-basic"> <span class="bbutton-setting-label">ボタンのラベル</span> <label for="label-on" class="bbutton-setting-select"> <input type="radio" name="label" id="label-on" class="js-button-label-on" checked="on">表示 </label> <label for="label-off" class="bbutton-setting-select"> <input type="radio" name="label" id="label-off" class="js-button-label-off">非表示 </label> </li> <li class="js-count-setting js-group-basic js-group-touch"> <span class="bbutton-setting-label">ブックマーク数</span> <label for="count-on" class="bbutton-setting-select"> <input type="radio" name="count" id="count-on" checked="on">表示 </label> <label for="count-off" class="bbutton-setting-select"> <input type="radio" name="count" id="count-off">非表示 </label> </li> <li class="js-size-setting is-hidden js-group-vertical"> <span class="bbutton-setting-label">サイズ</span> <label for="size-standard" class="bbutton-setting-select"> <input type="radio" name="size" id="size-standard" checked="on">標準 </label> <label for="size-large" class="bbutton-setting-select"> <input type="radio" name="size" id="size-large">大きいボタン </label> </li> <li class="js-lang-setting js-group-basic js-group-vertical"> <span class="bbutton-setting-label">表示言語</span> <label for="lang-on" class="bbutton-setting-select"> <input type="radio" name="lang" id="lang-on" checked="on">日本語 </label> <label for="lang-off" class="bbutton-setting-select"> <input type="radio" name="lang" id="lang-off">英語 </label> </li> <li class="js-url-setting js-group-basic js-group-touch js-group-vertical"> <span class="bbutton-setting-label">保存するURL</span> <div class="bbutton-setting-contents"> <span> <input type="radio" name="url" id="url-default" checked="on"><label for="url-default">ページのURLを使う</label> </span> <span> <input type="radio" name="url" id="url-optional" class="js-radio-use-custom-url"><input id="button-url" class="bbutton-setting-textarea js-input-custom-url" type="url" value="" placeholder="例）https://b.hatena.ne.jp" pattern="^https?://.+" /> <span class="invalid-error-message">正しいURLを入力してください</span> </span> </div> </li> <li class="js-width-setting js-group-basic js-group-touch"> <span class="bbutton-setting-label">Width<span>任意</span></span> <input type="text" id="btn-width" class="bbutton-setting-textarea-value js-input-width" placeholder="20〜100" pattern="[1-9][0-9]*"><span class="invalid-error-message js-invalid-width">20〜100の数値を入力してください</span><span class="bbutton-setting-px">px</span> </li> <li class="js-height-setting js-group-basic js-group-touch"> <span class="bbutton-setting-label">Height<span>任意</span></span> <input type="text" id="btn-height" class="bbutton-setting-textarea-value js-input-height" placeholder="20〜100" pattern="[1-9][0-9]*"><span class="invalid-error-message js-invalid-height">20〜100の数値を入力してください</span><span class="bbutton-setting-px">px</span> </li> </ul> </section> </div> <div class="bbutton-2column"> <section class="bbutton-section"> <h3 class="bbutton-title">3. ボタンを確認しましょう</h3> <ul> <li class="preview"> <div id="button-preview" class="preview-area js-button-preview-area"></div> </li> </ul> </section> <section class="bbutton-section"> <h3 class="bbutton-title">4. ページにコードを貼りましょう</h3> <textarea name="codegen" id="codegen" class="js-button-code-box" cols="80" rows="9" onfocus="var self = this; window.setTimeout(function () { self.select(); }, 10);"></textarea> <p class="bbutton-note">入力内容を元に生成されたボタンのサンプルです。この内容で問題がなければ、表示されているコードをコピーして、ページの表示したい場所に貼りましょう。</p> <p class="bbutton-note">※１ページ中に複数のはてなブックマークボタンを設置する場合、script要素は１回分の記述で問題ありません。</p> </section> </div> </div> <div id="guide-rule">はてなブックマークボタンのご利用には、はてなの<a href="http://www.hatena.ne.jp/rule/rule" target="_blank">利用規約</a>および<a href="http://www.hatena.ne.jp/rule/privacypolicy" target="_blank">プライバシーポリシー</a>への同意が必要です。</div> </div> <script src="https://b.st-hatena.com/77d2ee6f79ddaf78eb2d198936bae315b6721993/js/v4/guide_bbutton.js"></script> <script src="https://b.st-hatena.com/77d2ee6f79ddaf78eb2d198936bae315b6721993/js/v4/bookmark_button.js"></script> </div> <div class="footer"> <div class="footer-inner"> <div class="footer-inner-group footer-bookmark"> <h2 class="footer-title"><a href="/" data-gtm-label="footer-btop">はてなブックマーク</a></h2> <div class="footer-list-wrapper"> <ul class="footer-list footer-list--pc"> <li class="footer-list-item js-keyboard-selectable-item"><a href="/hotentry/all" class="hotentry js-keyboard-openable" data-gtm-label="footerCategories-hotentry">総合</a></li> <li class="footer-list-item js-keyboard-selectable-item"><a href="/hotentry/general" class="general js-keyboard-openable" data-gtm-label="footerCategories-general">一般</a></li> <li class="footer-list-item js-keyboard-selectable-item"><a href="/hotentry/social" class="cat-social js-keyboard-openable" data-gtm-label="footerCategories-social">世の中</a></li> <li class="footer-list-item js-keyboard-selectable-item"><a href="/hotentry/economics" class="cat-economics js-keyboard-openable" data-gtm-label="footerCategories-economics">政治と経済</a></li> <li class="footer-list-item js-keyboard-selectable-item"><a href="/hotentry/life" class="cat-life js-keyboard-openable" data-gtm-label="footerCategories-life">暮らし</a></li> <li class="footer-list-item js-keyboard-selectable-item"><a href="/hotentry/knowledge" class="cat-knowledge js-keyboard-openable" data-gtm-label="footerCategories-knowledge">学び</a></li> </ul> <ul class="footer-list footer-list--pc"> <li class="footer-list-item js-keyboard-selectable-item"><a href="/hotentry/it" class="cat-it js-keyboard-openable" data-gtm-label="footerCategories-it">テクノロジー</a></li> <li class="footer-list-item js-keyboard-selectable-item"><a href="/hotentry/entertainment" class="cat-entertainment js-keyboard-openable" data-gtm-label="footerCategories-entertainment">エンタメ</a></li> <li class="footer-list-item js-keyboard-selectable-item"><a href="/hotentry/game" class="cat-game js-keyboard-openable" data-gtm-label="footerCategories-game">アニメとゲーム</a></li> <li class="footer-list-item js-keyboard-selectable-item"><a href="/hotentry/fun" class="cat-fun js-keyboard-openable" data-gtm-label="footerCategories-fun">おもしろ</a></li> </ul> <ul class="footer-list"> <li class="footer-list-item"><a href="/guide/tools">アプリ・拡張機能</a></li> <li class="footer-list-item"><a href="https://bookmark.hatenastaff.com/">開発ブログ</a></li> <li class="footer-list-item"><a href="/help/">ヘルプ</a></li> <li class="footer-list-item"><a href="https://hatena.zendesk.com/hc/ja/categories/900000153166">お問い合わせ</a></li> <li class="footer-list-item footer-list-item--sp"><a href="/guide/guideline">ガイドライン</a></li> <li class="footer-list-item footer-list-item--sp"><a href="https://policies.hatena.ne.jp/rule">利用規約</a></li> <li class="footer-list-item footer-list-item--sp"><a href="https://policies.hatena.ne.jp/privacypolicy-ja">プライバシーポリシー</a></li> <li class="footer-list-item footer-list-item--sp"><a href="https://policies.hatena.ne.jp/cookie-policy">利用者情報の外部送信について</a></li> </ul> <ul class="footer-list footer-list--pc"> <li class="footer-list-item footer-list-item--pc"><a href="/guide/guideline">ガイドライン</a></li> <li class="footer-list-item footer-list-item--pc"><a href="https://policies.hatena.ne.jp/rule">利用規約</a></li> <li class="footer-list-item footer-list-item--pc"><a href="https://policies.hatena.ne.jp/privacypolicy-ja">プライバシーポリシー</a></li> <li class="footer-list-item footer-list-item--pc"><a href="https://policies.hatena.ne.jp/cookie-policy">利用者情報の外部送信について</a></li> </ul> </div> </div> <div class="footer-inner-group footer-bookmark-sns"> <h2 class="footer-title">公式Twitter</h2> <div class="footer-bookmark-list"> <ul class="footer-list"> <li class="footer-list-item"><a href="https://twitter.com/HatenaBookmark" target="_blank" rel="noopener" data-gtm-click-label="footer-officialTwitter-name">公式アカウント</a></li> <li class="footer-list-item"><a href="https://twitter.com/hatebu" target="_blank" rel="noopener" data-gtm-click-label="footer-hotentryTwitter-name">ホットエントリー</a></li> </ul> </div> </div> <div class="footer-inner-group footer-hatena"> <h2 class="footer-title">はてなのサービス</h2> <ul class="footer-list"> <li class="footer-list-item"><a href="https://hatenablog.com/" data-gtm-label="footerServices-blog">はてなブログ</a></li> <li class="footer-list-item"><a href="https://hatenablog.com/guide/pro?plus_via=hatenabookmark_footer&utm_source=hatenabookmark&utm_medium=referral&utm_campaign=hatenabookmark_to_hatenablog_pro&utm_content=hatenabookmark_footer" data-gtm-label="footerServices-blog-pro">はてなブログPro</a></li> <li class="footer-list-item"><a href="https://q.hatena.ne.jp/" data-gtm-label="footerServices-question">人力検索はてな</a></li> <li class="footer-list-item"><a href="http://d.hatena.ne.jp/" data-gtm-label="footerServices-keyword">はてなブログタグ</a></li> <li class="footer-list-item"><a href="http://hatenanews.com/" data-gtm-label="footerServices-hatenanews">はてなニュース</a></li> <li class="footer-list-item"><a href="https://soredoko.jp/" data-gtm-label="footerServices-soredoko">ソレドコ</a></li> </ul> </div> </div> <div class="footer-bottom"> <div class="footer-app"> <ul> <li class="footer-list-item"><a href="https://apps.apple.com/jp/app/hatenabukkumaku/id354976659?mt=8" target="_blank" rel="noopener" data-gtm-click-label="footer-app-ios"><img src="https://b.st-hatena.com/77d2ee6f79ddaf78eb2d198936bae315b6721993/images/v4/public/common/dl-button/appstore@2x.png" alt="App Storeからダウンロード"></a></li> <li class="footer-list-item"><a href="https://play.google.com/store/apps/details?id=com.hatena.android.bookmark&referrer=utm_source%3Dbookmark_sp%26utm_campaign%3Dbookmark_sp_user&hl=ja" target="_blank" rel="noopener" data-gtm-click-label="footer-app-android"><img src="https://b.st-hatena.com/77d2ee6f79ddaf78eb2d198936bae315b6721993/images/v4/public/common/dl-button/googleplay@2x.png" alt="Google Playで手に入れよう"></a></li> </ul> </div> <div class="copyright">Copyright © 2005-2024 <a href="http://www.hatena.ne.jp/">Hatena</a>. All Rights Reserved.</div> </div> </div> <div class="modal-overlay"></div> <script type="text/javascript" src="https://b.st-hatena.com/77d2ee6f79ddaf78eb2d198936bae315b6721993/js/v4/bookmark.star.js" async></script> <div class="js-head-notify is-hidden">設定を変更しました<span class="js-head-notify-close-button">x</span></div> </body> </html>

CINXE.COM

はてなブックマークボタンの作成・設置について