Социальное голосование с помощью iframe

Здравствуйте, сегодня поговорим о создании социального голосования на сайте (опроса через социальные сети) без использования каких-либо плагинов и скриптов, а только лишь с помощью iframe вставки.

Скачать исходники для статьи можно ниже

Как это будет выглядеть:

социальный опрос на сайт

Временно демонстрационный пример можете посмотреть на моем тестовом сайте — «mnogoblogun.hostenko.com» — опрос расположен в конце каждой записи (поста) — например зайдите на запись — «mnogoblogun.hostenko.com/test-stranitsa/»

Можно добавить любое количество кнопок других социальных сетей.

 

Для чего это нужно?

Трафик с социальных сетей на ваш сайт.

Теперь приступим к реализации данного социального опроса на сайте — все очень просто!

 

1. Нужно создать 2 файла, отдельно для каждой картинки (варианта ответа на социальное голосование).

Создаем 2 файла, например: 1.php и 2.php

В первый файл (1.php) вставляем картинку и кнопки социальных сетей, код файла например следующий:


<img src="http://mnogoblogun.hostenko.com/wp-content/uploads/pic1.jpg" width="150" height="150" />
<br>
Проголосуй:
<br>
<a href="https://twitter.com/share" class="twitter-share-button" data-lang="ru">Твитнуть</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
<br>
<iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fmnogoblog%2Flikes&amp;send=false&amp;layout=button_count&amp;width=450&amp;show_faces=true&amp;font&amp;colorscheme=light&amp;action=like&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:21px;" allowTransparency="true"></iframe>
<br>

О том, как создать кнопки социальных сетей со счетчиками, читайте тут (написано все подробно)«pib9.ru/sovety-vebmasteru/stavim-sotsialnyie-knopki-na-sayt-knopki-sotsialnyih-setey-dlya-sayta.html»

Далее создаем второй файл (2.php) — также вставляем картинку и кнопки социальных сетей, код файла следующий:


<img src="http://mnogoblogun.hostenko.com/wp-content/uploads/pic2.jpg" width="150" height="150" class="alignnone size-full wp-image-25" />

<br>
Проголосуй:
<br>
<a href="https://twitter.com/share" class="twitter-share-button" data-lang="ru">Твитнуть</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
<br>
<iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fmnogoblog%2Flikes&amp;send=false&amp;layout=button_count&amp;width=450&amp;show_faces=true&amp;font&amp;colorscheme=light&amp;action=like&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:21px;" allowTransparency="true"></iframe>

После чего перекидываем данные файлы (1.php и 2.php) на сервер сайта (например с помощью ftp загрузчика FileZila).

 

2. В нужном месте сайта выводим с помощью фрейма (iframe) созданные нами 2 файла (1.php и 2.php).

Например создадим социальный опрос в конце каждой записи.

В wordpress за вывод записей (постов) отвечает файл single.php, поэтому заходим в панель управления сайтом, в левом меню выбираем пункт «Внешний вид» и его подпункт «Редактор», а справа в списке шаблонов выбираем файл single.php.

И в нужном месте файла single.php вставляем следующий код:


<br>
<br>
<div align=center>
Кто лучше : Блондинки или брюнетки ?
</div>
<table width="700" border="1" cellpadding="10">
<tbody>
<tr>
<td width="205"><iframe src="http://mnogoblogun.hostenko.com/wp-content/themes/responsive/1.php" width="200" height="250" align="left" scrolling="no"></iframe></td>
<td width="205"><iframe src="http://mnogoblogun.hostenko.com/wp-content/themes/responsive/2.php" width="200" height="250" align="left" scrolling="no"></iframe></td>
</tr>
</tbody>
</table>

То есть для создания колонок («Как разбить записи или странички на колонки«) я использую таблицу из 2-х ячеек, в каждой из которых вывожу отдельный файл с помощью тега iframe — слева файл 1.php, а справа 2.php.

Тег iframe создает плавающий фрейм, который находится внутри обычного документа, он позволяет загружать в область заданных размеров любые другие независимые документы.

В атрибуте scr тега iframe указывается путь к файлу, содержимое которого будет загружаться во фрейм.

Атрибут width — отвечает за ширину фрейма.

Атрибут height — отвечает за высоту фрейма.

Атрибут scroolling=»no» — убирает полосы прокрутки внутри фреймов.

 

PS: Также будет полезно почитать следующие статьи блогеров по созданию социального опроса на сайте:

— с помощью скриптов и кода — «sawtech.ru/tehno-blog/golosovanie-na-sajtah-s-pomoshh-yu-sotsial-ny-h-setej/»

— плагин social-votes скачать можно в следующей статье (ссылка «здесь») — «www.lediseo.ru/plagin-social-votes-uvelichivaem-trafik-bloga-s-pomoshhyu-socialnogo-golosovaniya.html»

— виджет социального опроса от социальной сети ВКонтакте — «vk.com/dev/Poll»

Введите свой email адрес для того, чтобы подписаться на мой блог:


knopkisoc

Социальное голосование с помощью iframe: 1 комментарий

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *