Picasa/Flickr виджет для блога!

8 июня 2011 • Категория: WEB мастеру на заметку, Дизайн • Комментариев нет • Многие блогеры используют на своих страничках, в sidebar’e плагин WP-Cumulus (виждет для вывода тэгов). Этот скрипт уже давно не является диковинкой и пользуется заслуженно хорошей репутацией. Но, далеко не все, как мне кажется, знают, что на примере этого виджета можно сделать галерею.., точнее – виджет галереи! Причем, со ссылками не только с таких сервисов хранения изображений, Flickr и Picasa, но и с собственного сайта – полностью настраиваемый! Представляю Вашему вниманию генератор виджета Flickr и Picasa, с помощью которого Вы легко сможете сделать свой виджетик и вставить в sidebar или прямо в страничку блога. Но, прежде чем Вы начнете эту не хитрую процедуру, обратите внимание на пару нюансов, а именно, какие ссылки брать и откуда? Если Вы имеете свою страничку на Flickr, то в меню Вашего аккуанта есть кнопка с надписью “You”, а нажав на нее, откроется подменю, где, наверняка, Вы обнаружите, на ряду с другими надписями, надпись – ссылку “Your Sets“. Это страничка с Вашими фотками. Выбираем галерею, жмем и внизу, под картинками, будет иконка на RSS фид этой галереи. Наведите мышку на ссылку Feed и скопируйте ее. Это и есть ссылка для вставки в поле Feed URL формы-ренератора. С генерацией виджета альбома с Picasa немного иначе. Опять-таки, если у Вас есть страничка в Picasa, то переходим туда и, справа, в сайд баре, видим под надписью “Ссылка на этот альбом” голубую иконку RSS канала со ссылкой. Во ее-то и копируем. Сохраняем в блокнот и немного подправим – уберем из ссылки https://picasaweb.google.com……. всего лишь буковку “s” в https://…, остальное – без изменений (!). И теперь вставим в поле Feed URL формы-ренератора измененную строку – http://picasaweb.google.com/data/feed/base/user/kaminmaster/albumid/5570084941110754977?alt=rss&kind=photo&hl=ru Попробуйте! Если сделано все правильно, то в превью, после нажима на кнопку “Generate code snippet“, отобразится готовая галерея в виде летающих миниатюр, как в виджете WP-Cumulus. А теперь – самое интересное! Делаем собственный виджет со ссылками с любого URL! Для этого, сначала отредактируем файл photowidget.xml, который находится в папке (архив с файлами сможете скачать по ссылке ниже), вписав в него ссылку на страницу с постом и ссылку на изображение (путь должен быть полным – с http://www……) к этому посту: 1 2 3 4 5 http://www.master-sv.com/pro/wp-content/uploads/2011/05/avant-guard.jpg img/test.jpg img/test.jpg Как видно из кода – первая строчка ведет на сайт и картинка взята из папки uploads, но можно здесь указать путь к картинкам с любого URL в Интернет (с хранилища Google, например). Во второй и третьей строках – картинка лежит в папке img, которая находится в той же папке, что и файл photowidget.xml. Туда Вы можете загрузить свои изображения и прописать их названия в файле по принципу 2-й и 3-й строк кода. Изображений или ссылок может быть сколь угодно, но.., если их будет более 30 – мешанина отобразится в виджете. Необходимо знать меру. Поэкспериментируйте с этими параметрами и выберите “золотую серединку” для себя. Далее, когда файл photowidget.xml заполнен, переходим к файлу example.html (его Вы можете “обозвать” как угодно…) и “выдерем” из него блок, заключенный в div’ах для публикации в sidebar’e или на странице блога, причем, пути к swf и xml файлам обязательно должны быть полными; 1 2 3 4 5 6 7 8 9 И, последнее: для того, чтобы фон виджета не отличался от фона Вашей странички, пропишите свой HEX код в параметре “bgcolor”, также, можно изменить размер виджета, на свой в параметре “width” и “height” (в коде – width=”300″ height=”250″) . Вот, в принципе, и все настройки. Готовый вариант установлен у меня в sidebar’e. Скачать исходники можно по ссылке ниже. Материал подготовлен по обзорам сайта Roy Tanck.com