О платформах и кодах: как вставить код и сниппеты JavaScript на сайт (перевод). Как вставить сайт в свой сайт


Как вставить сайт на сайт?

Долго думал, как назвать статью, лучше не придумал. Но сейчас вы сразу поймете в чем суть. У вас есть сайт, вы пишите на нем статьи и это здорово. Но чего-то не хватает? Человек пришел, почитал, и ушел, возможно, навсегда. А вам так хочется, чтобы он не раз вернулся на ваш сайт. А куда люди возвращаются чаще всего? Правильно, на сервисы!

Но сделать на своем сайте даже небольшой сервис, типа фотохостинга или сокращателя ссылок могут не все, нужен некоторый опыт. Но что мешает нам показывать чужой сервис на своем сайте? Практически ничего! Как это сделать? Вот тут и уместно название статьи: как вставить сайт на сайт?

Для профи я не сделаю открытия, в для новичков это будет, скорее всего, полезно. Хотя, если честно, я ни разу не видел такого подхода ни на одном блоге. А зря, все эти фишки часто дают хороший результат. Хороший пример - это мой способ получения обратных ссылок, описанный в этой статье. Результат - 38512 ссылок, и все естественные 😉

Как вставить сайт на сайт?В этом же случае все решается банальным iframe. Сразу перейду к практике: я порой пользуюсь сервисом сжатия png картинок. Есть замечательные онлайн сервисы, ими можно пользоваться без проблем. Но тут есть минус: нужно постоянно держать в уме или в закладках все эти сервисы, вы покидаете свой сайт и пользуетесь чужим. А так, если вставить сайт в сайте iframe, то вы будете пользоваться сервисом (да и не только вы) не покидая своего сайта!

Я уже сегодня сделал на отдельной странице себе такой псевдосервис - Сжать фото онлайн без потери качества (естественно, в заглавии хороший НЧ запрос, и в поясняющем тексте тоже)

Как вставить сайт на сайт?Сразу даже и не понятно, что это чужеродный сайт поселился на моем сайте. Работает все так же, как если бы вы зашли на родной сервис. И так можно вставить практически любой сайт в сайт, единственное условие - АДАПТИВНОСТЬ первого, иначе будет неудобно пользоваться. Хотя, допускаю, что это можно как то решить.

Ну и конечно рекламный блок между текстом и сервисом, может кто и кликнет, тем более под сервисы часто дают рекламу, тогда она будет полностью релевантна.

Как вставить сайт в сайт за 1 минуту?

Так как вставить сайт в сайт? Все просто, держите это маленький код:

<iframe src="https://tinypng.com/" name="iframe" scrolling="auto"> </iframe>

Теперь создаете страницу и в режиме html вставляете этот код, заменив мой url на свой.

Пояснения для тех, кто не в теме: width - это ширина, нужно выставить ширину вашего шаблона, height - это высота, тут нужно подбирать оптимально, чтобы не показывать лишнего, но при этом и не урезать функционал.

Я сегодня сделал еще одну подобную страницу - дешифратор ссылок, долго искал сервис и до сих пор не уверен, что это лучший.

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

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

Как сделать iframe адаптивным?

Вот какой метод можно использовать в этом случае:

<div> <iframe src="//www.youtube.com/channel/UCuwruYz1tbwxgsyKTWtVgpQ?rel=0" allowfullscreen></iframe> </div> .video { height: 0; position: relative; padding-bottom: 56.25%; } .video iframe { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }

СОВЕТ ВЕБМАСТЕРУ: Умение зарабатывать в интернете - это только пол дела, вторая половина - это умение ВЫГОДНО обналичивать электронные деньги. Вот список офшорных банковских карт, на которые можно выводить средства и потом снимать с них хрустящие купюры:

1. Epayments - можно открыть счет в долларах, евро и рублях. Формально банка нет, юридический адрес в Лондоне, но можно получить реквизиты банка в Латвии.

2. AdvCash - Офшорный банк находится в Белизе, можно открыть счет в долларах, евро, фунтах и рублях.

3. Payeer - Штаб квартира этой платежной системы находится в Грузии, тут так же можно открыть счет в долларах, евро и рублях.

4. Capitalist - Можно создать счета в долларах, евро и рублях. Низкие тарифы на вывод. Компания зарегистрирована в юрисдикции Британских Виргинских Островов.

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

zmoe.ru

Как вставить iframe на сайт – вставка страницы другого сайта на свой

Всем привет! Сегодня для одного из моих проектов мне понадобилось вставить страницу с другого сайта на свой. Как ни странно, решение этой проблемы оказалось максимально простым, о чём я и расскажу в этом посте.

Представьте такую ситуацию: вам нужно разместить страницу с другого сайта на вашем. Целей этому действию может быть множество. Возьмём, наверное, наиболее банальную из них: мы хотим вставить программу передач какого-либо ТВ-канала на страницу нашего сайта, чтобы у нас всегда была актуальная информация. Для примера возьмём телепрограмму одного известного спортивного канала.

Как это сделать? Очень просто. Без знаний программирования или какого-либо глубокого погружения в html или куда-то ещё мы размещаем у нас на сайте одну строку:

<iframe src="https://matchtv.ru/tvguide" scrolling="auto"> </iframe>

Разберём эту строку подробнее с атрибутами:

  • при помощи iframeвставить другой сайт на свою страницу проще простого;
  • src — сюда мы прописываем непосредственно адрес страницы, которую хотим вывести у себя на сайте;
  • width и height — ширина и высота области, в которой будет отображаться чужой сайт;
  • scrolling — отображение полосы прокрутки (если она нужна, то значение auto выведет её, если не нужна — вместо auto пропишите значение no).

Результат работы этого кода представляю на скриншоте ниже: страница прекрасно вписалась к нам на сайт, а справа отображается блок контекстной рекламы в сайдбаре.

Как вставить страницу другого сайта на свой сайт

Также стоит отметить, что если вы захотите скрыть от поисковиков то, что вы вставили себе на сайт, стоит воспользоваться noindex. Только учитывайте, что использовать его нужно не в виде обычных тегов html, а вот так: <!--noindex--><iframe src="https://matchtv.ru/tvguide" scrolling="auto"></iframe><!--/noindex-->

Вот и всё. Надеюсь, что пост оказался для вас полезным.

Вконтакте

Facebook

Twitter

Google+

good-seo.ru

Как вставить в html iframe

Всем привет. В html есть один интересный тег, с помощью которого можно на свою веб-страничку вставить другую, причем она будет выглядеть так, как будто вшита в вашу. Это статья о том, как вставить в html iframe с примером.

Возможности iframe

Итак, с помощью этого парного тега можно вставить в свою статью страницу с любого веб-сайта в интернете. Давайте рассмотрим вот такой фрагмент кода:

<iframe src="http://mysite.ru" name="iframe" scrolling="auto"> </iframe>

Как видите, все параметры вставки задаются в атрибутах тега. О первых двух, я думаю, вам объяснять ничего не надо – это ширина и высота нашего фрейма, в котором будет находиться нужная страничка. Размеры нужно подбирать исходя из ширины вашего контентного блока.

Адрес нужной страницы задается в атрибуте src. В нем нужно написать полный адрес до сайта. Следующий атрибут – имя фрейма. Тут можно написать произвольное значение. Наконец, scrolling отвечает за появление полос прокрутки, а его значение auto делает так, что прокрутка появится только при необходимости. Также тут можно задать значение no. В этом случае полосы прокрутки не будут появляться, но тогда и прокрутить страницу нельзя будет — вы сможете только просмотреть ее фрагмент, на сколько хватит заданной высоты.

Остальные параметры при необходимости вы можете задать через css. Например, это могут быть отступы или рамка.

Пример вставки iframe в html

В примере кода, который я приводил выше, вам нужно лишь изменить адрес страницы на свой, а также размеры фрейма, если это необходимо. Вот пример:

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

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

dolinacoda.ru

Как добавить сайт в поисковики: пошаговая инструкция

Доброго времени суток!

Для того, чтобы интернет ресурс начал работать, чтобы о нем узнали рядовые пользователи и заинтересованные лица, ему необходима реклама.

Наилучшей рекламой станет топовая строка при выдаче ответа на запрос в поисковой системе.

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

Каким образом интернет пользователи узнают о том, что в Сети появилось новое творение? На него начинают выдавать ссылку поисковые системы – Яндекс, Google, mail и прочие.

Добавляем сайт в поисковую систему самостоятельно

Предварительная проверка

Сначала давайте разберемся, что такое индексация web-страницы.

Индексация — это процесс занесения роботом-поисковиком web-страницы в индекс поисковой системы (Яндекс, Google и другие)

Поскольку индексация – своего рода проверка, стоит еще раз трезво оценить готовый веб-сайт, убедиться, что он готов для оценки программой-роботом.

Ресурс понравится поисковику, если он доведен до ума:

  • линки — работают,
  • тексты — уникальны,
  • страницы — доработаны.

Проблемы с индексацией могут возникнуть именно из-за того, что страницы «сырые», перегружены выпадающими блоками, ресурс неправильно структурирован, излишне иллюстрирован или не раскрывает заявленную тему. Причин может быть много.

На основе своих наблюдений могу сказать, что в индекс попадают абсолютно все сайты, даже самые неказистые. А требуется на это примерно 3-4 недели.

Правильная оптимизация сайта по всем правилам – это отдельная тема. В качестве примера можете взять мой блог. У меня не всё идеально, но основные моменты учтены =)

А рекомендации Яндекса по продвижению web-сайта в интернете читайте здесь.

Процесс добавления

Для того чтобы добавить сайт, нужно сначала создать свой аккаунт в поисковике, будь то Гугл, Яндекс или майл, исключение составляют Рамблер и Yahoo. После регистрации появляется доступ к кабинету вебмастера, туда нужно добавить свой сайт.

Вот необходимые ссылки:

  • https://www.google.com/webmasters — кабинет для вебмастеров в Google
  • https://webmaster.yandex.ru — кабинет для вебмастеров в Яндексе

Далее, алгоритм действий следующий:

  1. Необходимо указать адрес ресурса
  2. Пройти аутентификацию – доказать, что сайт регистрирует владелец, имеющий на это право
  3. Создать карту вебсайта и сообщить об этом поисковой системе. Она поможет поисковому роботу оценить потенциал нового портала, быстро проиндексировать все страницы. Для создания карты обычно используют плагин для WordPress — GoogleXML-SiteMap
  4. А также желательно создать файл robots.txt, который говорит поисковым роботам, какие страницы нужно индексировать, а какие – нет. Этот файл необходимо загрузить в корневую папку сайта. Как правильно создать этот файл robots.txt — отдельная тема. У меня он такой:

Инструкция была приведена на примере вебмастера Яндекса. В google и других поисковиках инструкция примерно такая же.

Аддурилки – что это и с чем их едят?

Крупнейшие системы поиска: Яндекс и Гугл — располагают специальными формами, заполнив которые можно надеяться на более оперативное появление новой веб-странички в сети. Их называют аддурилками.

Для получения желаемого результата достаточно указать адрес страницы и заполнить окошко с каптчей (если нужно).

  • Аддурилка Яндекса: https://webmaster.yandex.ru/addurl.xml
  • Аддурилка Гугла: https://www.google.com/webmasters/tools/submit-url

Как видите, работа по добавлению сайта и его страниц в поисковики – не сложная, однако если есть желание раскрутить сайт, поднять его высоко в топе, то нужно, как минимум:

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

одним словом, делать все, чтобы веб-ресурс был «живым», рос и развивался, а не оставался макетом.

Статья: как правильно писать статьи для сайта / блога

Ускорение индексации с помощью ссылок

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

Обмен линками между сайтами

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

А вообще поисковики наказывают за обмен ссылками и за их покупку =) Все ссылки должны появляться естественно.

Размещение гиперссылок в каталогах поисковых систем

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

Подобрав подходящие каталоги, зарегистрируйте в них свой сайт и ожидайте результатов.

Вот три самых известных каталога:

  • Для того чтобы зарегистрироваться в каталоге Яндекс, нужно заполнить форму, перейдя по ссылке http://catalog.yandex.ru/
  • Для регистрации в Рамблер: http://top100.rambler.ru/
  • Каталог Гугл: http://dmoz.org

На этом всё. В этой статье я рассказал вам, как добавить свой сайт в поисковики и вообще, как происходит индексация новых web-ресурсов.

Применяйте полученные знания. Задавайте вопросы в комментариях.  Делитесь статьей в социальных сетях со своими товарищами и друзьями.

Подпишитесь на обновления блога, тогда все новые статьи вы будете получать прямо на свой email. Это очень удобно.

Всем пока и до скорых встреч!

С уважением! Абдуллин Руслан

Понравился блог? Подпишись, чтобы получать новые статьи на почту и быть в курсе всех событий!

abdullinru.ru

Урок 11. Как добавлять материалы на сайт

добавление материала джумла, как добавить материал джумла 3, добавляем материал на сайт, joomla 3 В предыдущем уроке я рассказала, как создать категории материалов, сегодня приступим к добавлению материалов в созданные категории. Для этого вам нужно было подготовить статьи и если нужно, графическую информацию.о том, как написать статью, читайте в разделе Копирайтинг на нашем портале, старайтесь писать статьи уникальные, интересные, полезные. Не стоит стараться наполнять сайт некачественной информацией, лишь бы только ее было много, пусть меньше, но качественнее. Добавляйте материалы на свой сайт, которые будут полезны посетителям сайта, но и слишком мало информации это тоже не очень хорошо. Особенно в первое время придется много и упорно работать, добавляя на сайт не менее

одной статьи в день, а лучше всего, если будет добавляться ежедневно по 3 статьи в среднем, через одинаковый интервал времени. Более подробно будем говорить об этом в теме по оптимизации сайта, а пока добавляем материалы...

Итак, отрываем свою панель администратора сайта и переходим по верхнему меню по пути: Материалы - Менеджер материалов - Создать материал:

sozdat materil joomla, джумла 3, как создать материал, создаем материал на сайте

В открывшемся окне необходимо сделать следующие настройки: Написать название статьи, вставить текст статьи (скопировать его можно в предварительно подготовленном файле), но для вставки текста в текстовое поле следует использовать такой метод. Кликните правой кнопкой мышки в текстовое поле, в появившемся меню выберите - Вставить как обычный текст и уже в открывшемся окошке вставьте текст. Это делается для того, чтобы не сбить стили шаблона, потому что текстовые редакторы, особенно Word  любят тянуть за собой все собственные стили и это приведет к тому, что на сайте все тексты со временем будут разными, что может испортить внешний вид сайта. Обязательно придерживайтесь данной рекомендации и у вас всегда на сайте будет порядок и уют.

Когда текст будет вставлен, можно добавить картинку в любое место сайта. Для этого в редакторе нажмите пикторгамку dobavit izobrajenie и в открывшемся окошке нужно будет создать папку для изображений и загрузить изображение со своего компьютера, более подробно и детально смотрите об этом в данном видео уроке. Также в видео формате я расскажу о том, как добавить ссылку в текст при необходимости и как выделять подзаголовки.

Далее, нужно выбрать в правом меню редактора категорию, в которой необходимо разместить данный материал и выбрать состояние - Опубликовано, или если пока не хотите публиковать материал, выберите - Не опубликовано.

sozdat materil joomla 3, создаем материал, как добавить материал, добавление материала на сайт, джумла 3

Переходим по вкладке Параметры публикации, где необходимо прописать мета-описание для материала и мета-теги, также указать автора.

Кроме того, здесь можно сделать автоматические установки даты публикации и снятия с публикации материала, если это необходимо. Это может понадобиться, если мы заранее размещаем несколько материалов и настраиваем, чтобы они автоматически публиковались через одинаковое время, или если материал временный, он снимется с публикации в назначенную дату. Не забудьте при выборе автонастроек состояние публикации включить - Опубликовано!

materialy joomla, создание материала

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

Теперь вы умеете добавлять информацию на собственный сайт и в самое ближайшее время мы уже откроем сайт для посетителей, осталось совсем немного настроек и сайт будет готов к полноценной работе, поэтому наполняйте его качественной информацией. Для начала, пока сайт не процитируется поисковыми роботами, будет достаточно добавлять в день по 1 материалу, а затем объем полезной информации необходимо будет увеличить.

Желаю всем удачи и высоких достижений!

Если заметили ошибку, выделите фрагмент текста и нажмите Ctrl+Enter

lessons-24.ru

Куда можно добавить свой сайт для привлечения клиентов?

После того, как вы сделали свой сайт, нужно чтобы о нем узнало как можно больше потенциальных клиентов. Если вы выбрали бесплатное самостоятельно продвижение сайта, то можете быть уверены, что о вашем сайте информации в интернете нет. Даже поисковые системы могут о нем никогда не узнать. Рассмотрим по порядку, куда можно добавить сайт.

Предостережение.

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

Добавить сайт в поисковые системы

Это нужно сделать первым делом, когда закончились работы над сайтом и он наполнен информацией. Сообщите поисковикам о том, что появился новый сайт. Каждый поисковик имеет так называемую «адурилку» (от слов add url — добавить ссылку (англ.), где вы вводите адрес созданного сайта. После того, как вы оставите заявку, робот поисковой системы посетит ваш сайт и занесет страницы в свою базу. С этого момента люди смогут найти ваш сайт в результатах поиска.

Добавить сайт в поисковые системы

Вот ссылки на адурилки популярных поисковиков:

Яндекс: http://webmaster.yandex.ru/

Google: >http://www.google.com/addurl/

Rambler: >http://www.rambler.ru/doc/add_site_form.shtml

MSN: >http://search.msn.com/docs/submit.aspx

Nigma: http://www.nigma.ru/../add_site

Добавить сайт в каталоги сайтов:

Каталоги сайтов — это справочники сайтов, разбитых по категориям. Раньше, когда поисковые системы были откровенно слабыми, то с помощью каталогов было удобно искать сайты нужной категории. Теперь же, когда поиск в 90% случаев достаточно точно отвечает на нужный вопрос, каталоги сайтов не пользуются популярностью.

99% каталогов в интернете — это помойки, куда добавляются все сайты подряд. Кроме того, что вы потратите на этом много времени, вы можете сделать только хуже. Например, Google не любит, когда на сайт стоит много некачественных ссылок. Поэтому, будьте внимательны, смотрите хотя бы на посещаемость. Меньше 100 чел/день — скорей всего помойка, где видимость посещаемости создается за счет того, что владельцы сайтов заходят чтобы добавить сайт или проверить наличие своего сайта.

Но есть и хорошие каталоги. Обычно это тематические каталоги, привязанные к какому-то хорошо посещаемому порталу той-же тематики. Например, какой-нибудь промышленный портал скорей всего содержит базу поставщиков. Или портал о красоте содержит адреса салонов красоты. Вот в такие каталоги и стоит добавляться. У нас есть услуга добавление сайта в качественные каталоги

Как их найти? Ищите их на первых местах в поисковых системах по запросам: «портал о [ваша тема]» и т.п. И обязательно добавляйте свой сайт, только если тема совпадает.

Добавить сайт в социальные закладки

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

добавить сайт в сервис закладок

Вот несколько популярных сервисов:

Мое Место http://moemesto.ru/

Мемори http://memori.qip.ru/

Добавить сайт в рейтинги

Еще один способ привлечь посетителей — это добавить сайт в рейтинги. Обычно рейтинги одновременно предоставляют счетчик для сайта, с помощью которого отслеживается статистика посещаемости. Вы сами видите статистику и рейтинг ее видит. На сайте рейтинга имеется каталог сайтов, в котором в каждой тематике сайты располагаются по убыванию показателя посещаемости. Особенно от такой системы выигрывают лидеры рейтингов. Они большая посещаемость и благодаря этому они получают еще больше посетителей.

рейтинг сайтов

Популярные рейтинги:

Рейтинг Liveinternet >http://www.liveinternet.ru/rating/ru/

Рейтинг Mail.ru >http://top.mail.ru/

Рейтинг Rambler >http://top100.rambler.ru/

Добавить сайт на карты

Если у вашего сайта имеется физическое представительство (например, магазин), то обязательно добавьте свою организацию в различные геолокационные сервисы. Это позволит вам привлечь посетителей, которые географически находятся рядом с вами. Самые известные сервисы это:

добавить сайт на карту

Яндекс.Справочник: >sprav.yandex.ru

Google Local: >http://www.google.com/local/business/

Справочник 2 GIS: >http://2gis.ru

Социальные сети

Хорошо бы завести представительство в популярных социальных сетях и указать из них ссылки на свой сайт. В социальных сетях можно делать анонсы публикаций или просто делиться полезной для клиентов информацией.

Подведем итог

Чтобы на ваш сайт заходили посетители, они должны где-то узнать о вашем сайте. Добавляя куда-то ссылку на свой сайт, нужно руководствоваться тем, будут ли переходить по этой ссылке люди. Если нет, то во первых вы теряете время, во вторых можете сделать хуже. Например, Google понижает в результатах поиска сайты, имеющие ссылки с некачественных ресурсов или ссылки, по которым никто не переходит.

ilyapronin.ru

Как вставить код или фрагмент кода на сайт

Performance Marketing основывается на четко и однозначно измеряемых параметрах Мы находим оптимальные решения в любой отрасли! Работаем над правильными KPI

Мы выпустили новую книгу «Контент-маркетинг в социальных сетях: Как засесть в голову подписчиков и влюбить их в свой бренд».

Подпишись на рассылку и получи книгу в подарок!

Есть множество инструментов, которые готовы помочь вам улучшить сайт, повысить эффективность онлайн бизнеса и наладить взаимодействие с клиентами. Среди таких инструментов много бесплатных. Но что если вы не веб-разработчик и не знаете, как установить их на свой сайт? Это большое препятствие.

Как бы иронично это не звучало, но у бизнеса, который разрабатывает полезные инструменты для вашего сайта, тоже есть препятствие на пути к собственному процветанию – необходимость навязывать установку своего кода пользователям.

Попробуем решить две проблемы сразу, рассказав о наиболее распространенных способах вставки кода / сниппетов (фрагментов) JavaScript для сайтов:

  • На WordPress.
  • Самописных админках (с помощью олдскульного FTP).
  • На Squarespace.
  • На Shopify.

В конце статьи затронем Wix. В большинстве случаев эта платформа не разрешает устанавливать коды или фрагменты JavaScript, но зато она предлагает альтернативу в виде интеграций для различных сервисов.

Где взять код для установки

Посмотрим, где искать код для инсталляции на примере сервиса Crazy Egg.

Процесс стандартный: вводим регистрационные данные, после загрузки попадаем в дашборд. Там ищем раздел с кодом.

Кликнув по ссылке, переходим на страницу с кодом Crazy Egg.

Как вставить код на сайт WordPress

Можно воспользоваться специальным плагином – Tracking Code Manager.

Чтобы вставить Tracking Code Manager, входим в админку сайта и в панели управления ищем раздел плагины.

Выбираем функцию «Add New» (добавить новый).

Справа появится строка поиска. Вводим «Tracking Code Manager», потом жмем «Install Now».

После окончания инсталляции нужно убедиться в том, что плагин активирован. Переходим в настройки.

Жмем «Add new Tracking Code».

…Потом вставляем код, не забыв сохранить изменения.

Можно обойтись и без плагина Tracking Code Manager. В таком случае наш вариант – вставить код в файл header.php темы WordPress (об этом дальше).

Как установить код на сайт WordPress.com

Сайт на базе WordPress и сайт WordPress.com – две разные вещи.

Сайт на базе WordPress – это сайт, который управляется с помощью CMS, установленной на собственном сервере. Это значит, что вы заплатили за доменное имя (myname.com) и за хостинг.

Сайт WordPress.com бесплатный. Вы можете зарегистрировать на нем сайт без оплаты хостинга. При этом URL сайта будет: myname.wordpress.com. Чтобы изменить доменное имя, придется выполнить несколько дополнительных шагов.

Управляя сайтом на WordPress.com, вы ограничены в выборе кодов и фрагментов JavaScript, которые можете установить. Причина в протоколе безопасности – разработчики не позволяют пользователям вставлять коды на платформу. К примеру, разработчики MySpace позволяли. Очевидно поэтому сайт за шесть лет опустился с 5 места в мире на 1967.

Вместе с тем WordPress.com предлагает пользователям различные бонусы для ведения бизнеса. Например, интеграцию с Google Analytics или возможность добавить кнопки соцсетей. Но в некоторых случаях этого может быть недостаточно.

Как установить коды и сниппеты JavaScript на самописную админку

С помощью FTP. Придется вернуться к основам основ.

Сейчас многие сайты самописные. Самописный сайт создан с нуля, для управления контентом не использует CMS.

Представим, что у нас именно такой сайт. Поставить на него код будет чуть сложнее, чем на WordPress, потому что придется вспомнить про FTP.

FTP – File Transfer Protocol. В переводе – протокол передачи данных. Его используют для передачи файлов с компьютера на открытый сервер хостинга. Можно скачать бесплатный FTP-клиент FileZilla.

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

В протоколе передачи данных нет ничего сложного: уже через 20 минут можно почувствовать себя профи. Для большинства людей самая сложная часть – просто связаться с сервером.

Если у вас возникли любые проблемы с сервером, свяжитесь с хостингом. Это может занять час, зато по истечении 60 минут вы будете знать всё, что нужно. Я обычно рекомендую записывать такие разговоры через ScreenRecorder. Или по меньшей мере делать пометки вручную.

После того, как вы зашли на FTP-сервер, обязательно сделайте резервную копию сайта. Если совершите ошибку, важные файлы никуда не денутся. Сделать резервную копию можно с помощью простого перетаскивания всех файлов с сервера на компьютер.

Обычно программный интерфейс FTP-менеджера состоит из двух колонок. Например, на изображении ниже в левой колонке вы видите файлы, которые хранятся на компьютере. В правой – файлы с сервера.

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

Как вставить код с помощью header.php

Допустим, у нас есть сайт, для управления которым мы используем WordPress. Чтобы вставить код, нам нужно найти файл header.php или другой файл с названием header или head.Header нужен для активации кода или фрагмента JavaScript на всех страницах сайта. Чтобы открыть файл, можно использовать бесплатную программу вроде Sublime Text. С ее помощью нужно открыть файл, который хранится на компьютере, а не похожий файл на сервере.

Открыв файл в Sublime Text, мы увидим радугу из цветного кода. Не бойтесь, там все просто.

Все страницы делятся на две секции – The head (заголовки) и the body (тело). Заголовки обозначаются кодом HTML <head> и </head>. Тело – <body> и </body>.

Большая часть штук, которые заставляют сайт работать и отображать текст, находятся между этими двумя секциями. Чтобы найти эти теги HTML, можно воспользоваться поиском по странице.В большинстве случаев вставить код можно прямо перед закрывающим тегом .

После того, как вы вставили код или сниппет, сохраните файл и загрузите его на сервер. Готово.

Теперь про самописные админки. Если ваш сайт создавался вручную и вы не можете найти файл head или header, скорее всего, вам придется вставлять код вручную на каждую страницу. Чаще всего это не вызывает больших затруднений.

На изображении выше – гипотетический HTML сайт, который состоит из четырех файлов HTML. Если бы мы захотели вставить на него какой-нибудь код, нам бы пришлось по очереди открыть все эти файлы и вставить код или сниппет в теги каждого из них. После этого процесс стандартный: сохраняем файлы и загружаем их на сервер вместо старых.

Как вставить код на сайт Squarespace

Squarespace упростил задачу своим пользователям. Чтобы вставить код или сниппет JavaScript, можно использовать «code injection». В меню переходим по вкладкам Settings > Advanced > Code Injection. Можно добавить код в <head> или футер сайта.

Находим настройки.

Листаем ниже и кликаем по «Advanced».

Выбираем «Code Injection».

Вставляем код и сохраняем изменения.

 

Как вставить код на Shopify

В панели управления найдите раздел с интернет-магазинами Online Store и выберите темы Themes.

Чтобы получить доступ к нужной вкладке, кликните по «Actions» и выберите «Edit HTML/CSS».

Нам нужны фрагменты.

Клик по опции откроет диалоговое окно с возможностью добавить новый фрагмент.

Дайте название сниппету и нажмите на кнопку Create snippet.

Введите код для сниппета в зону для «tracking snippet.liquid». Нажмите «сохранить».

Как вставить код, если сайт на Wix

Wix быстро стал популярным конструктором сайтов. Как и WordPress.com, он накладывает на своих пользователей ограничения в возможности вставки кодов.

Но Wix предлагает решение в виде Wix App Market. Там можно найти разнообразные виджеты для маркетинга, социальных медиа и аналитики. Кстати, там же можно проголосовать за наиболее необходимый виджет.

Ирина Винниченко

Контент-маркетолог SEMANTICA

Если нужного виджета нет в Wix App Market, его все равно можно поставить на сайт. Для этого конструктор предлагает приложение HTML. Через приложение можно добавить на сайт виджеты соцсетей, включая ленту Twitter, чаты со сторонних платформ, опросы, тесты и другие полезные штуки. Wix предупреждает о том, что не несет ответственность за внешние приложения, поэтому будьте осторожны: если возникнут проблемы, не факт, что поддержка Wix сможет вам помочь.

О пользе

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

Оригинал статьи.

semantica.in