Interpult Studio. Создание и построение seo ссылок

Пользовательский виджет Facebook с использованием CSS


Настройка вашей ленты Facebook

Как и во всех наших виджетах, вы можете использовать CSS для создания собственного виджета Facebook, который подойдет к любому дизайну веб-сайта. Экран настройки нашего виджета ленты Facebook позволяет создавать различные стили. Однако мы понимаем, что вам может понадобиться виджет новостной ленты, стилизованный под дизайн вашего сайта; используя CSS, вы можете добиться практически любого стиля, который хотите.

Структура HTML и классы CSS

Вот классы и структура CSS для создания пользовательского виджета Facebook:

Инструкции по внедрению

1. Создайте файл CSS

Используйте свой любимый текстовый редактор или программное обеспечение для подготовки файла CSS. Блокнот++ — отличный бесплатный редактор, который идеально подходит для создания файла CSS, но есть и другие, доступные в Интернете. Все, что вам нужно, это текстовый редактор, который не применяет никакого форматирования, такого как размер шрифта и т. д.

Базовый файл будет выглядеть примерно так, как в примере (см. ниже), и будет создавать пользовательский виджет facebook, который вы видите в примере ниже. Как видите, CSS разделен на три раздела; Контейнер, заголовок и содержимое. Мы прокомментировали их. Вы можете просто скопировать этот код в свой код/текстовый редактор и изменить содержимое, а затем сохранить как мое имя файла.css (или любое другое имя, которое вы хотите, но оно должно иметь расширение .css).

READ  В Facebook обнаружили рекламную кампанию рекламных вредоносов для Android • Interpult Studio

2. Загрузите файл CSS для своего пользовательского виджета Facebook на свой веб-сервер.

Поместите файл CSS на локальный сервер или используйте такой сервис, как Dropbox, для хранения вашего CSS файл вне сайта. Скопируйте URL-адрес для использования на экране настройки Feedwind.

3. Введите URL-адрес CSS

Нажми на >Расширенные настройки ссылка в “Общий” на экране настройки. Введите URL-адрес пользовательского расположения CSS в поле URL-адрес пользовательского CSS. Новый пользовательский дизайн виджета facebook будет отображаться в области предварительного просмотра.

Примечание: При использовании пользовательского CSS некоторые части экрана настроек FeedWind будут выделены серым цветом и отключены. Это сделано для предотвращения конфликтов между настройками FeedWind по умолчанию и настройками в пользовательском CSS.

Сопоставьте свои настройки с доступным размером контейнера

FeedWind имеет возможность установить максимальную длину заголовков и содержимого каналов, указав количество отображаемых символов. FeedWind автоматически регулирует количество отображаемых каналов на основе введенного значения максимальной длины. Иногда элемент фида может отображаться за пределами контейнера в зависимости от высоты строки и других настроек в пользовательском CSS. В этом случае измените настройки в файле CSS или измените количество символов, разрешенных в заголовках/контенте.


Похожие сообщения



Source link