tumblelog wiki

El plugin de Tumblr Notes muestra la cantidad de veces que una entrada fue marcada con "like", o la cantidad de "reblogs" tiene, Es un plugin que deja visible a los no usuarios de tumblr las notas que vemos en nuestro panel de control.

Además muestra el link a los tumblrs que marcaron con "like" o hicieron un "reblog" y puede incluir la imágen de usuario de ellos.

Si fue un "reblog" además muestra un pequeño resumen de la opinión que agregó esa persona.

Es muy útil incluir este tipo de plugins para que quede visible "la conversación" que se genera a partir de una entrada en particular. Es una manera de "rastrear" la repercusión que tienen.

Para incluirlo en el diseño de nuestra plantilla yo seguí estas instrucciones en inglés.

Primero debemos estar logeados en nuestro tumblr. En nuestro panel de control, debemos activar la vista de nuestras entradas. Una vez que veamos solamente nuestras entradas, tenemos que mirar el código fuente, y buscar algo como esto:

<div class="post_controls">
<a href="#" id="show_notes_link_73320986" class="reblog_count" onclick="display_post_notes(73320986, 'FKffarEa9');

Lo que ven ahí son mis datos, en cada uno de ustedes variará... lo que nos interesa aquí es 'FKffarEa9' esa es nuestra "ID Key".

Una vez que encontramos nuestra ID Key, nos dirigimos a "Customize". Antes de < /head> incluimos los scripts que tan generosamente hizo nuestro amigo Matthew. :

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript" src="http://theme.matthewbuchanan.name/tumblr/tools/proxy/notes/notes.js"></script>

Si tenemos un host propio, es recomendable bajar los scripts y volverlos a subir al host propio, porque quizá Matthew tenga problemas con su hosting y podría borrar el script de allí...

Luego de incluir los scripts tenemos que incluir otros pedacitos de código. Busquen cada tipo de entrada, y en el lugar donde suelen tener los {permalink} de los tags, la fecha de publicación, o el link de comentarios (es una sugerencia) agreguen:

        <a href="http://theme.matthewbuchanan.name/tumblr/tools/proxy/notes/?url=http://www.tumblr.com/dashboard/notes/{postID}/[user-key]" rel="{postID}" class="notes-button">Notes</a>

Allí donde ven [user-key] copien el código que encontramos al principio sin los 'apóstrofes'

Ahora debemos incluir el siguiente código en donde queremos que se vean las notas (por lo general debajo de las entradas es lo mejor):

<div class="notes-container" id="notes-{postID}"></div>

¡Listo! ya tenemos instalado el plugin. Para asegurarnos de que todo se muestre como debe, hay que agregar las siguientes clases en nuestro CSS:

.notes-button { aquí se define las caracteristicas del link de las notas } .notes-container { obligatorio incluir display: none; para que sólo se muestre cuando se hace click en el link } .notes-container ol { para personalizar la forma en la que se muestran las notas también debe incluir display: none; } .fave { aquí se puede incluir por ejemplo un ícono o un cambio de color en el link, porque el creador del script incluyó que si la entrada tiene más de 15 notas se marque como un "favorito" }

Les dejo un ejemplo del CSS (es el que estoy usando yo)

    /* Notes */

    .notes-button {
        display: none;
        padding: 0.25em 0 0.25em 20px;
        margin-left: 10px;
    }

    .notes-container {
        display: none;
    }

    .notes-container ol {
                    padding: 0px;
                    margin: 25px 0px;
                    list-style-type:none;
                    color: #777;
                    border-bottom: solid 1px #ccc;
                    font-weight: bold;
                }

     ol.notes a {
     color: #777;
                    }

      ol.notes a:hover {
                            color: #555;
                        }

                    ol.notes li.note {
                        border-top: solid 1px #ccc;
                        padding: 9px 9px;
                    }

                    ol.notes img.avatar {
                        vertical-align: -6px;
                        margin-right: 8px;
                        border: solid 1px #aaa;
                        padding: 1px;
                        width: 16px;
                        height: 16px;
                    }

                    ol.notes blockquote {
                        border-color: #eee;
                        padding: 4px 10px;
                        margin: 7px 0px 0px 25px;
                        font-weight: normal;
                    }

                        ol.notes blockquote a {
                            text-decoration: none;
                        }

    .notes-hide {
        cursor: pointer;
        padding: 4px 0 4px 18px;
        background: url("http://theme.matthewbuchanan.name/img/hide-notes.png") no-repeat 0 50%;
    }

:::css

Espero que les sea de utilidad.