Настройте Tumblr *new* Like Button iFrame {LikeButton}

Новый код от Tumblr {LikeButton} поставляется с очень несколькими вариантами: цвет и размер.

Он внедряет iFrame, который обрабатывает функциональность "Мне нравится" и предоставляет графику SVG.

Однако из-за политики iframe и межсайтового скриптинга больше невозможно изменить его с помощью css или отредактировать его содержимое.

Как я могу изменить или вставить новый код, чтобы использовать свои собственные спрайты кнопки "Мне нравится" или svgs?

3 ответа

Решение

Стилизация кнопки Tumblr Like

К сожалению, как утверждает OP, кнопки, подобные Tumblr, имеют минимальные визуальные параметры и на них сложно ориентироваться с помощью CSS / javascript. Итак, время для новой идеи...

Идея

Мы знаем две вещи:

Наша кнопка "Мне нравится", визуально, должна быть тем, что мы хотим. Текст, изображение, веб-шрифт и т. Д.

Кнопка "Нравится" Tumblr регистрирует щелчок, и Tumblr делает все возможное для сохранения данных.

Если мы можем визуально скрыть кнопку " Мне нравится" на Tumblr, а затем поместить ее поверх нашей кнопки "Мне нравится", у нас есть стилизованная рабочая кнопка "Мне нравится"!

Разметка темы

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

<div class="custom-like-button">
  {LikeButton}
  <span class="our_toggle">
    &hearts;
  </span>
</div>

Предоставленная разметка

Пример визуализированного / живого кода. Оператор Темы {LikeButton} сейчас <div> с классом .like_toggle,

<div class="custom-like-button">
  <div class="like_button">
     /* Iframe */
  </div>
  <span class="our_button">
    &hearts;
  </span>
</div>

CSS Magic

Ключ снова заключается в том, чтобы кнопка Tumblr Like была выше нашей кнопки Like.

.custom-like-button {
  position: relative;
  display: block;
  width: 40px;
  height: 40px;
  cursor: pointer;
}

/* class for the Tumblr Like Button iframe */
.like_button {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 10;
}
/* Force iframe to fill button */
.like_button iframe {
  width: 100% !important;
  height: 100% !important;
}
/* class for Our Like Button */
.our_button {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

Тада! Теперь у вас должна быть своя кнопка "Мне нравится", которая регистрирует пользователей как!

Вы можете также стилизовать это, когда парили:

/* Hover State */
.like_button:hover + .our_button {
  color: red;
}

И когда пользователь зарегистрировал подобное:

/* Liked State */
.like_button.liked + .our_button {
  background: red;
  color: white;
}

Надеюсь, это поможет! Если вы застряли, я оставил разметку здесь.

Вот лучшее из возможных решений на данный момент, с благодарностью за пост @mikedidthis!

Поместите кнопку "Нравится" в родительский элемент, div, li или как угодно и назовите это как .like, Над кнопкой поместите SVG, используемый Tumblr для иконки сердца:

<li class="like">
    <svg width="14" height="14" viewBox="0 0 19 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#000000">
        <path d="M14.0425097,0.000920262799 C16.1435097,-0.0400797372 18.8835097,1.28192026 18.9635097,5.36992026 C19.0525097,9.95492026 15.1985097,13.3079203 9.48350967,16.2089203 C3.76650967,13.3079203 -0.0874903349,9.95492026 0.00150966509,5.36992026 C0.0815096651,1.28192026 2.82150967,-0.0400797372 4.92250967,0.000920262799 C7.02450967,0.0419202628 8.87050967,2.26592026 9.46950967,2.92792026 C10.0945097,2.26592026 11.9405097,0.0419202628 14.0425097,0.000920262799 Z"></path>
    </svg>
    {LikeButton size="14"}
</li>

+ Изменить <svg width="..." height="..."... а также {LikeButton size="..."} до вашего желаемого размера.

Теперь просто используйте кучу простых CSS

.like { /* Make a parent element */
     position: relative;
}
.like svg path { /* Select your color of choice */
     fill: #563d7c; 
}
.like .like_button { /* Position like button above your custom one */
     position: absolute;
     top: 0;
     opacity: 0;
 }
 .like .like_button.liked { /* Keep the functionality active */
     opacity: 1;
 }

В то же время, как сделать то же самое для кнопки reblog - поскольку она не вызывается в iFrame, все немного проще. Поместите это в родителя div, li или как угодно и назовите это как .reblog

<li class="reblog">
    {ReblogButton size="14"}
</li>

И CSS

.reblog svg path { /* Select your color of choice */
    fill: #563d7c;
}

Первоначально опубликовано здесь.

я сделал легкий выбор цвета, как кнопка перезагрузки

Пример: http://dennsokagisanat.tumblr.com/

http://reduxsarmadeneme.tumblr.com/

1. добавьте метатеги к этому коду:

<!-- Like ve Reblog Buton Color -->

<meta name="color:ReblogButon" content="#0dd5f0"/>
<meta name="color:LikeButon" content="#0dd5f0"/>

<!-- Like ve Reblog Buton Color -->

2. и добавьте HTML-код:

<li class="like">
    <svg style="width:21px; height:21px; viewBox=0 0 19 16; " xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#000000">
        <path d="M14.0425097,0.000920262799 C16.1435097,-0.0400797372 18.8835097,1.28192026 18.9635097,5.36992026 C19.0525097,9.95492026 15.1985097,13.3079203 9.48350967,16.2089203 C3.76650967,13.3079203 -0.0874903349,9.95492026 0.00150966509,5.36992026 C0.0815096651,1.28192026 2.82150967,-0.0400797372 4.92250967,0.000920262799 C7.02450967,0.0419202628 8.87050967,2.26592026 9.46950967,2.92792026 C10.0945097,2.26592026 11.9405097,0.0419202628 14.0425097,0.000920262799 Z"></path>
    </svg>
    {LikeButton size="20"}
</li>

и 3. добавить коды стилей CSS

.like { /* Ana element */
    position: relative;
    top:0px;
}
.like svg path { /* Hangi renk istiyorsanyz o kodu buraya yapy?tyryn */
    fill: {color:LikeButon}; 
}
.like .like_button { /* Pozisyonu ayarladym ama bozulma olursa burayla oynayyn */
    position: absolute;
    top: 0;
    opacity: 0;
}
.like .like_button.liked { /* Bozulma olursa pozisyonda burayla oyna */
    opacity: 1;
    top:3.3px;




}                  
   .reblog_button svg path { fill: {color:ReblogButon}; }  /* Reblog butonunun rengini ayarlamak için renk kodunu istedi?inizle de?i?tirin */
   .reblog_button{
       position:relative;
       top:1.3px;
       left:1px;
   }

вот и все:)

Другие вопросы по тегам