PollUnit を埋め込む
自分のウェブサイト上の投票、アンケート、フォトコンテスト
自分のウェブサイトにアンケートや投票を統合できます。 ここでは PollUnit をホームページに埋め込む方法を紹介します。 高度なプログラミング知識は必要ありません。
どの PollUnit タイプでもホームページに埋め込めます。 これにより、日程、評価、画像投票などをウェブサイトに簡単に統合できます。 まず PollUnit を作成してください。作成方法はこちらです:
最初の投票を作成する
アカウントを作成すると、すべての PollUnit が「マイ PollUnit」に表示されます。 ここで必要な設定を行えます。
コンテキストメニューアイコン（三点メニュー）をクリックするとメニューが表示されます。
PollUnit 自体から直接コンテキストメニュー（管理リンク）を開くこともできます。 権限によっては、ここに他の機能が表示される場合もあります。
自分の投票やアンケートだけをホームページに公開できます。 他人の PollUnit を公開したい場合は、その作成者が必要な設定を行う必要があります。 また、自分のウェブサイトに埋め込めるのはプレミアムユーザーの投票のみです。
「埋め込み」をクリックします。
ここでウェブサイトのホストを入力する必要があります。 これによりウェブサイトが PollUnit にアクセスできるようになります。 たとえばホストは domain.com または subdomain.domain.com のような形式です。
これは、他のウェブサイトが許可なく投票を埋め込めないようにするために必要です。 複数のウェブサイトやホストに対してアンケートを有効化できます。
「Code」セクションには短いコードスニペットが表示されます。 これを自分のウェブサイトに含める必要があります。 高さや幅は必要に応じて調整できます。
<div data-pollunit-width="100%" data-pollunit-height="700"
data-pollunit-src="https://pollunit.com/polls/MEMBERLINK"></div>
<script src="https://pollunit.com/embed/v2.1/parent_code.js"
integrity="sha384-6II6rmwjJBTtYXvc8Cp7CNK/1EEbdzNNwHHmbKeEJgO/mLDydfVVAWxx108HCuZd"
crossorigin="anonymous">
</script>
参加リンクを管理リンクに置き換えると、 PollUnit の管理ビューをウェブサイトに統合することもできます。 その場合はウェブサイト側を適切に保護してください。
これで参加者は自分のウェブサイト上で直接、選択肢の評価、追加、コメントができます。 参加者にアカウントは不要です。
高度な埋め込みオプション
div に data-pollunit-options="..." を追加すると、 追加設定を行えます。これらの設定は自分のウェブサイト上の表示にのみ適用され、 単体の PollUnit には影響しません。
autoresize
スニペットを調整すると、埋め込みコンテンツがウェブサイト上で最適な高さに自動調整されます。 そのため、アンケート内でスクロールする必要がなくなります。
<div data-pollunit-width="100%" data-pollunit-height="700"
data-pollunit-src="https://pollunit.com/polls/MEMBERLINK"
data-pollunit-options="autoresize"></div>
<script src="https://pollunit.com/embed/v2.1/parent_code.js"
integrity="sha384-6II6rmwjJBTtYXvc8Cp7CNK/1EEbdzNNwHHmbKeEJgO/mLDydfVVAWxx108HCuZd"
crossorigin="anonymous">
</script>
埋め込みアンケートはモバイル端末の解像度も含め、 ウェブサイトにレスポンシブに適応します。
kill_background
kill_background を使うと PollUnit の背景を非表示にできます。 これにより、投票を透過的にウェブサイトへ埋め込み、 ウェブサイト側の色や背景画像・パターンをそのまま見せられます。
<div data-pollunit-width="100%" data-pollunit-height="700"
data-pollunit-src="https://pollunit.com/polls/MEMBERLINK"
data-pollunit-options="kill_background"></div>
<script src="https://pollunit.com/embed/v2.1/parent_code.js"
integrity="sha384-6II6rmwjJBTtYXvc8Cp7CNK/1EEbdzNNwHHmbKeEJgO/mLDydfVVAWxx108HCuZd"
crossorigin="anonymous">
</script>
kill_padding
kill_padding を使うと PollUnit 周囲の余白を削除できます。 ページ全体を使わないレイアウトで省スペース化したい場合に便利です。
<div data-pollunit-width="100%" data-pollunit-height="700"
data-pollunit-src="https://pollunit.com/polls/MEMBERLINK"
data-pollunit-options="kill_padding"></div>
<script src="https://pollunit.com/embed/v2.1/parent_code.js"
integrity="sha384-6II6rmwjJBTtYXvc8Cp7CNK/1EEbdzNNwHHmbKeEJgO/mLDydfVVAWxx108HCuZd"
crossorigin="anonymous">
</script>
kill_title
kill_title を使うと PollUnit のタイトルを非表示にできます。 これにより、自分のウェブサイト側で独自タイトルや見出しを付けられます。
<div data-pollunit-width="100%" data-pollunit-height="700"
data-pollunit-src="https://pollunit.com/polls/MEMBERLINK"
data-pollunit-options="kill_title"></div>
<script src="https://pollunit.com/embed/v2.1/parent_code.js"
integrity="sha384-6II6rmwjJBTtYXvc8Cp7CNK/1EEbdzNNwHHmbKeEJgO/mLDydfVVAWxx108HCuZd"
crossorigin="anonymous">
</script>
オプションを組み合わせる
複数のオプションを使いたい場合は、例のようにカンマ区切りで追加できます。
<div data-pollunit-width="100%" data-pollunit-height="700"
data-pollunit-src="https://pollunit.com/polls/MEMBERLINK"
data-pollunit-options="autoresize,kill_title,kill_padding,kill_background"></div>
<script src="https://pollunit.com/embed/v2.1/parent_code.js"
integrity="sha384-6II6rmwjJBTtYXvc8Cp7CNK/1EEbdzNNwHHmbKeEJgO/mLDydfVVAWxx108HCuZd"
crossorigin="anonymous">
</script>
CMS（Content Management System）向け投票
Wordpress に投票を統合したい場合でも、Joomla で投票を実現したい場合でも、 Drupal で画像投票を作成したい場合でも、PollUnit なら数秒で対応できます。 もちろん、他のウェブ技術にも PollUnit を統合できます。