Как разместить кнопки социальных сетей в блоге Tumblr

Любой, у кого есть Аккаунт в Tumblr может делиться контентом с другими пользователями, нажав Кнопка "Нравится" то, Кнопка реблога, или Кнопка отправки в конкретном сообщении блога на панели инструментов Tumblr.

Эти встроенные кнопки позволяют обмениваться контентом в виртуальных стенах сети Tumblr; однако они не дают вам гибкости в обмене контентом из веб-блога Tumblr на любых других крупных сайтах социальных сетей, таких как Facebook или Twitter.

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

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

Не волнуйтесь, это проще, чем вы думаете. Вот как это сделать.

instagram viewer

Зарегистрируйтесь или войдите в свою учетную запись Tumblr, чтобы создать или получить доступ к своему блогу

Если вы еще не создали блог Tumblr или даже не зарегистрировались для учетной записи, первое, что вам нужно сделать, это посетить Tumblr.com где вам будет предложено ввести свой адрес электронной почты, пароль и желаемый URL-адрес блога, чтобы начать работу.

Если у вас уже есть учетная запись и блог, просто войдите в систему.

Выберите кнопки социальных сетей

Поищите в Google кнопки публикации в социальных сетях, которые хотите разместить в своем блоге Tumblr. В большинстве (если не во всех) крупных социальных сетях есть специальные справочные страницы, на которых показано, как их настроить.

Для вашего удобства вот несколько официальных страниц кнопок общего доступа для некоторых из самых популярных социальных сетей:

  • Официальная кнопка "Нравится" на Facebook
  • Официальная кнопка Twitter Tweet
  • Официальная кнопка "Поделиться" в LinkedIn
  • Официальная кнопка сохранения на Pinterest

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

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

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

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

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

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

Доступ к вашему коду темы Tumblr

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

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

Нажмите Редактировать HTML в редакторе слева под меткой Пользовательская тема. Редактор расширится, чтобы показать вам весь код вашей темы.

Лица, не имеющие опыта работы с HTML, PHP, JavaScript и другой компьютерный код могут напугать этот раздел. Важно помнить, что вы вообще не будете писать новый код.

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

Поиск по коду вашей темы

Единственная строка кода, которую вам нужно найти, - это строка, которая гласит: {/ block: Posts}.

Этот обозначает конец сообщения в блоге и обычно находится в нижней части документов темы, в зависимости от того, какую тему Tumblr вы используете. Если вам трудно найти эту строку кода, просто просматривая ее, вы можете попробовать использовать Ctrl + F / Cmd + F сочетание клавиш или, как вариант, щелкните значок значок передач в верхнем левом углу экрана нажмите Найти и заменить а затем введите {/ block: Posts} в Искать поле.

Функция поиска автоматически найдет и выделит {/ block: Posts} в коде вашей темы.

Вставьте код кнопки в свой код темы

Скопируйте настроенный код кнопки, который вы создали, и вставьте его непосредственно перед строкой кода, которая гласит: {/ block: Posts}.

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

Нажмите Обновить предпросмотр а затем щелкните синяя кнопка Сохранить вверху редактора.

Протестируйте свой блог Tumblr, чтобы увидеть свои новые кнопки социальных сетей

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

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

  • Вставляйте код кнопки в документы темы каждый раз, когда вы меняете тему блога на новую тему. Изменение темы не приведет к переносу ранее вставленного кода в новые документы темы.
  • При размещении более одной кнопки социальных сетей в своем блоге убедитесь, что между двумя разными фрагментами кода кнопки нет пробелов или новых строк. Это гарантирует, что несколько кнопок будут отображаться горизонтально рядом друг с другом, а не вертикально на разных строках.
  • Поэкспериментируйте с размещением фрагментов кода для кнопок социальных сетей перед другими элементами {/ block: также. В зависимости от вашей темы вы можете заметить, что кнопки появляются в самом низу страницы блога, после всех заметок от других пользователей Tumblr.