Webデザインやガジェット、格安SIMの情報ブログ

プッシュ通知が付けられる「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_src imgタグのsrc属性に反映されます。
data-width imgタグのwidth属性に反映されます。
data-height imgタグのheight属性に反映されます。
data-back ユーザーがbpush設定後に戻るページのURLとなります。絶対URLで指定します。
※必須
data-link_target aタグのtarget属性に反映されます。

コメントを残す

writer : 鹿
このブログを管理している鹿。Webデザインとガジェットが好き。