Здравствуйте, сегодня поговорим о создании социального голосования на сайте (опроса через социальные сети) без использования каких-либо плагинов и скриптов, а только лишь с помощью 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”