プッシュ通知が付けられる「bpush」に簡単設置のボタンカスタマイズ機能が追加

以前紹介したWEBサイトにプッシュ通知が付けられるWEBサービス「bpush」に簡単設置のボタンカスタマイズが追加されました。

スポンサードリンク

簡単設置でもサイトに合わせたボタンを設置できるように

これまでのbpushでは、簡単設置でボタンを表示させる時に決められたボタンしか表示できませんでしたが、 2015年12月28日からユーザーでカスタマイズすることが可能になりました。

WEBサイトにプッシュ通知が付けられるWEBサービス「bpush」を試してみる

2015.12.23

カスタマイズ前

カスタマイズ前は通知と書かれた小さなボタンのみだったので、サイトのデザインから浮いてしまうこともありました。


<div id="bpush_button" style="display: inline-block;"
     data-site="350" data-back="【ページURL】"
     data-height="20" data-width="60"></div>
<script>
(function(d,s,ns){
  var ns = d.createElement(s);
    ns.async=1;ns.src="//bpush.net/connect/button.js";
    var s0=d.getElementsByTagName(s)[0];
  s0.parentNode.insertBefore(ns, s0);
})(document,'script');
</script>

カスタマイズ例

カスタマイズ後では、画像のURLや幅・高さの指定、リンクの別窓などを独自のdata属性を使って変更できます。


<div id="bpush_button" style="display: inline-block;"
     data-site="350" data-back="https://creatorclip.info/"
     data-link_target="_blank"
     data-image_src="https://creatorclip.info/wp-content/themes/material/img/favicons/android-chrome-192x192.png"
     data-width="192" data-height="192"></div>
<script>
(function(d,s,ns){
  var ns = d.createElement(s);
    ns.async=1;ns.src="//bpush.net/connect/button.js";
    var s0=d.getElementsByTagName(s)[0];
  s0.parentNode.insertBefore(ns, s0);
})(document,'script');
</script>

設定可能な属性

属性内容
data-image_srcimgタグのsrc属性に反映されます。
data-widthimgタグのwidth属性に反映されます。
data-heightimgタグのheight属性に反映されます。
data-backユーザーがbpush設定後に戻るページのURLとなります。絶対URLで指定します。
※必須
data-link_targetaタグのtarget属性に反映されます。

鹿
writer : 鹿
このブログを管理している鹿。Webデザインとガジェットが好き。
  • Feedly(RSS)で
    ブログを購読してみる
    購読する
  • Push7(プッシュ通知)で
    ブログを購読する
    購読する