Настроить Tumblr в *Новый * как кнопка iFrame {LikeButton}

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

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

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

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

7
cross-site css iframe svg tumblr

3 ответов

укладка Tumblr как кнопка

к сожалению, как заявил OP, кнопки Tumblr like имеют минимальные визуальные параметры и трудно ориентироваться на CSS / javascript. Так что время для новой идеи...

Идея

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

наши собственные как кнопка, должна визуально, быть тем, что мы желаем. Текст, изображение, webfont и т. д.

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

если мы можем визуально скрыть Tumblr как кнопка, а затем поместите его над нашим собственные как кнопка, у нас есть стиль, работает как кнопка!

Тема Разметки

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

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

Вынесено Разметки

пример кода rendered / live. Оператор Темы {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 как кнопка над нашим собственные Как Кнопка. 

.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;
}

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

18

вот лучшее возможное решение на данный момент, с кредитом на пост @mikedidthis!

поместите кнопку like в родителя,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;
}

цитата здесь.

4

Я сделал простой выбор цвета, как кнопка reblog

exmpl: 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;
   }

вот и все :)

1