5 ОШИБОК-УБИЙЦ ЭЛЕКТРОННЫХ КНИГ

мини-курс в подарок
для новых читателей

Ваш email:
Ваше имя

email рассылки Конфиденциально

email рассылки
Актуально:

Как разместить на сайте кнопку фейсбук

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

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

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

Как поставить виджет вместе с кнопкой фейсбук?

Этап 1. Создание страницы вашего проекта на фейсбук.

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

После этого вам нужно выйти на общую страницу, там где вы видите статусы друзей, и прокрутить страницу до конца вниз. Там вы увидите ссылку «Создать страницу». Выберите пиктограмму, которая подходит вашему проекту: бизнес, брэнд или проект и т.п. Заполните предлагаемые поля, согласитесь с условиями и создайте страницу.

Этап 2. Теперь, когда страница у вас есть, вы можете публиковать новые статусы на ее стене и общаться с читателями.

Этап 3. Создаем виджет и кнопку фейсбук для вашего сайта.

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

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

1. Пропишите в поле 1 адрес вашего сайта.

2. Задайте ширину в поле 2 (указано в пикселях). 292 пикселя – это слишком миного для виджета в вордпресс, к примеру, поэтому часто нужно уменьшать.

3. Задайте высоту виджета в поле 3 или оставьте пустым, тогда выведется поле по умолчанию.

4. В поле 4 вы можете задать цвет виджета: светлый или темный.

5. В поле 5 вы можете отжать галочку напротив «show faces» (показывать лица) и убрать показ аватаров в виджете, либо оставить аватары.

6. В поле 6 вы можете задать цвет границы, если нужно, или оставьте поле пустым, если ничего менять не будете. Используйте html кодировку для указания цвета или пишите цвета вручную (red, blue, green и т.д.).

7. В поле 7 (show stream) вы можете оставить или отключить показ ленты новостей страницы.

8. В поле 8 вы можете отключить или оставить синий цвет в шапке фейсбука для виджета.

После того, как настройки готовы, нажмите на GET CODE (9).

После чего откроется кодировка в HTML5, но рядом будут вкладки для конвертации кода в другие форматы. Если вы не знаете разницы между форматами, оставьте HTML5 Система предлагает сплит-размещение кода. Первую часть, размещенную в тегах script, предлагает разместить на вашем сайте сразу же после открывающего тега body, а вторую часть кода, заключенную в теги div предлагает разместить в том месте, где у вас будет находиться само окно (бокс, виджет) фейсбук.

Однозначно нужно сделать, как сказано, если у вас самописный сайт. Мой же сайт сделан на вордпресс, поэтому я просто разместила в боковом виджете оба кода, один под другим (сначала script под ним div) и у меня все работает. Вы можете попробовать сделать так же, если не сработает, сделайте как просит фейбук.

Этап 4. Если у вас есть аккаунт в Твиттере, вы можете синхронизировать вашу страницу на фейсбуке и ваш Твиттер. Таким образом новость, опубликованная на фейбуке, автоматически опубликуется в Твиттере. Вам не нужно будет проделывать это в Твиттере повторно. Для автоматической публикации в Твиттер вам нужно зайти на вашу страницу и далее выбрать справа «Войти на фейсбук как (имя вашего проекта)», а не под вашим личным профилем, как показано на картинке.

Для того, чтобы настроить синхронизацию, зайдите в графу «Начало работы» под вашим аватаром и найдите синхронизацию в предлагаемых опциях.

Если вы просто хотите разместить кнопку фейсбук LIKE после какой-то статьи и не хотите создавать бокс, то зайдите на эту страницу:

developers.facebook.com/docs/guides/web/#plugins

скопируйте предлагаемый код (кнопка Мне нравится) и вставьте его на вашу страницу. Для сайтов вордпресс это должно делаться на странице редактирования статьи, после открытия вкладки HTML (по умолчанию стоит «Визуально»). Фразу «Great Web Page» в теге title замените на Привет! Я нашел замечательный сайт». Или что-то вроде того. Но не стирайте ничего кроме этой английской фразы, иначе ваша кнопка фейсбук не будет работать. В html важна буквально каждая закорючка.

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

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

На главную В каталог статей


7 комментариев на “Как разместить на сайте кнопку фейсбук”

  • Марина:

    Спасибо, Елена, Вы мне очень помогли: никак не могла сообразить, куда поставить первую часть кода:-). Сразу как прочитала Ваш пост, рванула на Фэйс , получила код и поставила на блог! Красота!!! Кстати, это не первый раз, когда Ваш пост мне помогает: форму обратной связи на свой блог я установила после того, как прочитала Вашу статью на эту тему. Ещё раз спасибо!

  • EM:

    Здравствуйте, Марина! Спасибо, мне очень приятно, что мои статьи Вам понравились. Заходите еще:) Желаю Вам творческих успехов и чтобы количество посетителей на блоге постоянно увеличивалось.

  • Наталья:

    спасибо за статью, очень хотела сделать, но не нашла куда поставить первую часть кода. все проверила нет тега .

  • EM:

    Здравствуйте, Наталья! На каком движке работает Ваш сайт? Если на вордпресс, что такое окно фейсбука удобнее поставить в виджет (например, справа, как у меня). Для того, чтобы установить код, нужно в админке вордпресс зайти во вкладку «Виджеты», перетащить виджет «Текст» в то место, где это будет установлено (например, боковая колонка 1 или боковая колонка 2) и далее, когда окно виджета откроется, вносите в него код. Первую часть кода полностью копируете из фейсбука (заключен в теги script) и вставляете в виджет. Вторую часть кода (div) полностью копируете из фейбука и вставляете под первой.

    Если это не работает, пробуете следующее: открываете на своем компьютере шаблон вашего сайта, находите файл файл header.php (предварительно сделайте резервную копию этого файла на случай, если что-то неправильно сделаете) в редакторе Notepad++. Когда файл откроется найдите в нем открывающий тег . После чего первую часть фейсбучного кода вставьте прямо под тегом . Ничего из файла не стирайте, иначе ваш сайт не будет работать. Просто под добавьте пустую строчку клавишей enter и вставьте код. Потом сохраните файл и залейте его на сайт, в папку с вашим шаблоном.

    Вторую часть фейсбучного кода вставляете в боковой виджет сайта через меню «Виджеты» в админке.

  • Виолетта Медведева:

    Спасибо за статью! Считаю, такие кнопки хорошо использовать, чтобы быстрее раскрутить различные промо-мероприятия итп

  • Зоя Белова:

    А на женском журнале кнопки устанавливать можно?

Оставить комментарий

Сколько будет: *