[JS]ブログの記事を読み終えたユーザーに、シェアなど次のアクションを促すスクリプト -jQuery Engage

サイト構築 -JavaScript

Post on:2013年4月25日

jQuery Engageのデモ

デモはWordPressで作られたブログに実装されています。

デモページ：ページを表示したとこ

スクロールして記事を読み終えると、下からアニメーションでパネルが表示されます。

デモページ：記事を読み終えたとこ

パネルには左から、コメント、ソーシャルメディア、メールニュースが配置されており、これはカスタマイズできます。

jQuery Engageの使い方

Step 1: 外部ファイル

当スクリプトとスタイルシートを外部ファイルとして記述します。
※WordPressなのでjquery.jsは既に利用していると思いますが、無ければ追加してください。

<script src="js/dist/jquery.engage.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.engage.css">

Step 2: スクリプトの実行

記事の上にスクリプトを記述し、実行するだけです。

<script>$(".article").engage();</script>

パネルのカスタマイズ

スクリプトのオプションでは、パネルの表示位置、配置するコンテンツを設定できます。

<script>
    {
        offset: 0, // パネルの表示位置
        scrollhide : false // 記事の最上部にスクロールして戻った時
        contents : ["comment","share", "newsletter"], // 配置するコンテンツ
        newsletter : {
            url : "http://www.mailchimp.com/mylisttoken" // メールニュースのURL
        },
        share: :{ // 配置するソーシャルメディア
            buttons : ['linkedin', 'twitter', 'facebook', 'reddit'],
            title : document.title, // シェア時のタイトル
            url : location.href // シェア時のURL
        },
        // 配置するテキスト
        comment : {
            url : "/wp-comments-post.php",
            text : {
                defaults : {
                    title : "Have your say!",
                    thanks : "Thank you for contributing, your comment will be added shortly."
                },
                morning : {
                    title : "Morning! Have some opinions on this article?",
                    thanks : "Thank you for contributing, your comment will be added shortly."
                },
                night : {
                    title : "Have your say!",
                    thanks : "Thank you for contributing, your comment will be added shortly."
                }
            }
        }
    };
</script>