В первой части мы немного поговорили о монетизации, и моем к ней отношении, ну а это – часть техническая: как установить форму для приема денег на поддержку сайта, кнопку сбора пожертвований с помощью яндекс денег или прямых переводов с кредиток, ну или просто кнопку “поддержать сайт или проект”. И самое важное: как впихнуть на свой блог, в узкую колонку, iframe с формой перевода яндекс.денег в виде пожертвований так, чтобы все внутри него масштабировалось, и было без полос прокрутки, или не тупо обрезалось с краю.

Итак, сначала к вопросу – как вообще добавить на свой сайт модуль сбора пожертвований и материальной помощи на благие дела и его развитие.

Полез на яндекс, смотреть, какие варианты перечислений на кошелек существуют. Основных – два (ну, вернее – есть еще и просто кнопки, но они – совсем ущербные, их даже не рассматриваем):

Форма приема платежей, выглядит так:

В ширину – около 450 пикселей, в высоту – от 177 до 213, в зависимости от того, хотим ли мы выводить дополнительно оплату через кредитки, или же только яндекс.деньги. Можно настроить и сразу выводить назначение платежа, добавить поле с комментарием плательщика, вывести один из четырех вариантов текста на кнопке – “перевести, купить, оплатить или подарить”, вбить сумму по умолчанию.

Вторая форма – это форма приема пожертвований и благотворительных взносов:

Основное отличие от первого варианта – ширина, она от 469 до 498 пикселей, опять же – в зависимости от того, выбрана ли опция приема не только яндекс-денег, но и возможность принять пожертвование с кредитки, в высоту – максимум 201 пиксель. Ну и выбор вариантов текста на кнопке – побольше: “Пожертвовать, подарить, перевести, отправить, поддержать”. В остальном – примерно тоже самое.

Вот ниже – две сгенерированные формы в максимальном исполнении рядом:

Ну, т.е. в целом – обе формы предлагают приблизительно одинаковый функционал, лишь немного отличаясь в дизайне. Так что выбирать нужно, основываясь исключительно на своем вкусе. Идем по нужной ссылке (необходимо быть залогиненым в яндекс.деньгах – думаю, никого этому учить не нужно), и делаем ту, что больше понравилась – либо приема платежей, либо приема пожертвований. Мне, откровенно говоря, гораздо больше нравится нижняя форма, из-за того, что она невысокая, и не займет много места по высоте.

Далее – полученный на сайте яндекса код необходимо вставить либо себе в пост (туда, где эта форма должна выводиться), либо – в соответствующее место в single.php и/или index.php. Но вот беда – обе формы не влезают в мою колонку, ограниченную 400 пикселями по ширине. Нет, конечно, если бы это была картинка – то всегда можно было бы ее ужать и отмасштабировать, применив стандартные функции html и css типа height и width, чтобы получилось что-то вроде:

Но вот незадача – данная платежная форма выводится в iframe. Ну, то есть по сути – у вас на сайте выводится часть другого сайта, воздействовать на который вы можете очень уж ограниченно. В результате – выглядело это так:

Видно, что кнопка “Перевести” – практически начисто обрезана. Если вы попытаетесь применить функции height и width – то форма просто напросто обрежется у вас с правого края, и будет выглядеть точно также; а если вы в свойствах iframe изменете scrolling=”no” на yes или auto – то этим добьетесь только того, что добавятся полосы прокрутки, и прокручивать-то вы, конечно, сможете – но выглядеть это будет не слишком красиво (примерно, как представленный в колонке код – но с ним уж точно ничего не сделаешь).  Часа два, наверное, я гуглил, как же все-таки мне впихнуть невпихуемое, а именно – как ужать форму приема яндекс денег, вернее – ее содержимое на 498 пикселей под колонку в 400 пикселей (а кстати, в примере, который будет приведен на этой странице – аж 510 пикселей в 400). Наконец, на одном из сайтов, в комментарии, нашел такую строчку:

Понял, что надо копать в этом направлении. И нашел отличную статью, в которой как раз описывается, как вставить в свой сайт страницу с другого сайта, при этом изменив ее масштаб, т.е. уменьшив масштаб содержимого iframe. Необходимая строчка звучала следующим образом:

Преобразовав свою запись в нечто подобное, используя

и убрав

и вставив вместо адреса сайта тот код, который предоставил яндекс, я – Бинго!: получил зуммирование формы, но вот беда – она была смещена очень сильно влево, и никакие попытки сделать ей float:left или align:left – не помогали. Этот div, html блок – ну никак не хотел выравниваться по левому краю. Выглядело это так:

В результате, вычислив, на сколько пикселей он смещен, я убрал из строчки кода

И добавил

И тут же все стало просто замечательно! В результате код стал выглядеть следующим образом:

Ну а в живую – это выглядит так:

Если кто-то хочет протестировать и отправить копеечку в благодарность за полезный урок – добро пожаловать, можно пробовать прямо из формы выше 🙂