情報アイランド

「情報を制する者は世界を制す」をモットーに様々な情報を提供することを目指すブログです。現在はプログラミング関連情報が多めですが、投資関連情報も取り扱っていきたいです。

話題のPush7!ボタンをWordPressブログに設置しよう!~ブログ運営記録2016年5月②~

Push7とは

Push7

Push7は、Webから直接ユーザの端末へお知らせを送れるWebプッシュ通知サービスです。
面倒なSSL証明書の取得や専用システムの組み込みは不要。コードをコピー&ペーストするだけで、
簡単にサイトからのお知らせをリアルタイムでユーザに届けることが可能です。

登録方法

https://push7.jp/にアクセスします。

「新規登録」をクリックします。

新規登録

「メールアドレス」を入力します。

「仮登録」をクリックします。

仮登録

仮登録完了

メールを確認します。

メールのリンクをクリックします。

メール

「メールアドレス」、「パスワード」、「パスワード(確認)」を入力します。

「利用規約に同意する」をチェックします。

「新規会員登録」をクリックします。

新規会員登録

「始める」をクリックします。

始める

「アプリケーション登録」の「サイト名」、「サイトURL」を入力します。

「ファイルを選択」をクリックし、「サイトアイコン」を選択し、「開く」をクリックします。

「サイトアイコン」の範囲を指定します。

「アプリケーションURL」を入力します。

「登録」をクリックします。

登録

概要

後で使うので「アプリケーションURL」を控えておきます。

「アプリケーション設定」をクリックします。

アプリケーション設定

「自動プッシュ設定」をクリックします。

自動プッシュ設定

「RSS」をクリックします。

RSS

「サイトのRSSリンク」を入力します。

「保存」をクリックします。

保存

保存完了

これで登録は終わりです。

ボタン設置方法

サイドバーに設置する方法です。

まず、ボタンの画像を用意してください。

ブログの管理画面に移動します。

「外観」→「テーマの編集」をクリックします。

「テンプレート」の「サイドバー」をクリックします。

サイドバー

sidebar.phpの適切な場所に下のようなコードを挿入します。

<div class="push">
    <a href="https://info-i.app.push7.jp"  target="_blank">
        <img src="http://i.imgur.com/f6ibbnW.png" alt="follow me in Push7">
    </a>
</div>

imgタグのsrc属性には画像のURLを指定し、aタグのhref属性には上で控えた「アプリケーションURL」を指定します。

「ファイルを更新」をクリックします。

スタイルを設定したい場合には「スタイルシート」をクリックします。

スタイルシート

style.cssにコードを挿入します。

.social-buttons .push {
    width:48%;
    margin: 4px;
}

「ファイルを更新」をクリックします。

これでブログのサイドバーにボタンが設置されます。

ブログ

このボタンをクリックすると、下のような画面に移動します。

Follow on Push7

この時に対応しているブラウザを使用している場合にはメッセージが表示されるはずなので「許可」のようなボタンをクリックするとブログからのプッシュ通知を受け取るようになります。

通知を受け取った場合、Firefoxの場合は下のようなボックスが画面の右下に表示されます。

通知


このブログをフォローしたい方は下のボタンからどうぞ!

pizyumi
プログラミング歴19年のベテランプログラマー。業務システム全般何でも作れます。現在はWeb系の技術を勉強中。
スポンサーリンク

-アクセスアップ, ブログ運営