Comparte tu estado (Tuto)

Holiii, aquí esta el tutorial de compartir tu estado!!! Este tutorial es un poquito largo y complejo así que prestad atención!!! 

Espero que todo lo entendáis perfecto y cualquier duda dejar un comentario!!!!

Este tutorial es un poco distinto ya que en el mismo código están las instrucciones de lo que tenéis que modificar, NO TENEIS QUE BORRAR NADA DEL CÓDIGO!!! Mi consejo es pegarlo en documentos para editarlo mejor y cuando lo tengáis a vuestro gusto tenéis que pegarlo completo en diseño, añadir gadget HTML/JavaScript y pegarlo en el contenido para guardarlo y que se muestre en vuestro blog!!!

Por cierto!!!! En este código te pedirá el URL DE TU GOOGLE APPS SCRIPT y el tutorial para conseguirlo esta abajo del código!!!

<style>

/* =========================================================

   GADGET ESTADOS BLOGGER

   ========================================================= */

/* AQUÍ PON EL ANCHO DEL GADGET */

#afStatusBox {

  width:250px;

/* AQUÍ PON EL ALTO DEL GADGET */

  height:200px;

  position:relative;

  overflow:hidden;

  box-sizing:border-box;

  background:

    linear-gradient(

      /* */

      rgba(0,0,0,0.68),

      rgba(0,0,0,0.68)

    ),

    /* AQUÍ ABAJO PON LA URL DE TU IMAGEN DE FONDO */

    url("AQUÍ PON LA URL DE TU IMAGEN DE FONDO");

  background-size:cover;

  background-position:center;

  border:0;

  border-radius:10px;

  color:#ffffff;

  font-family:Arial,sans-serif;

  margin:0 auto;

}

#afStatusBox * {

  box-sizing:border-box;

}

/* =========================================================

   TÍTULO DE TEXTO

   ========================================================= */

#afStatusHeaderImage {

  width:100%;

  height:46px;

  display:flex;

  flex-direction:column;

  align-items:center;

  justify-content:center;

  padding:4px 10px 0 10px;

  text-align:center;

}

#afStatusHeaderTitle {

  color:#ffffff;

  font-family:Georgia,serif;

  font-size:15px;

  font-weight:bold;

  line-height:17px;

}

#afStatusHeaderSubtitle {

  color:#ffffff;

  font-family:Georgia,serif;

  font-size:10px;

  font-weight:normal;

  line-height:13px;

  margin-top:1px;

}

/* =========================================================

   FORMULARIO

   ========================================================= */

#afStatusForm {

  width:100%;

  padding:7px 10px 0 10px;

  display:flex;

  flex-direction:column;

  align-items:center;

}

/* =========================================================

   NOMBRE DE USUARIO

   ========================================================= */

#afStatusName {

  width:190px;

  height:29px;

  display:block;

  margin:0 auto 5px auto;

  border:1px solid rgba(255,255,255,0.40);

  border-radius:5px;

  background:rgba(10,10,10,0.88);

  color:#ffffff;

  outline:none;

  padding:0 9px;

  font-family:Arial,sans-serif;

  font-size:11px;

}

#afStatusName::placeholder {

  color:#aaaaaa;

}

#afStatusName:focus {

  border-color:#ffffff;

}

/* =========================================================

   SELECTOR DE ESTADO

   ========================================================= */

#afStatusSelect {

  width:190px;

  height:29px;

  display:block;

  margin:0 auto 5px auto;

  padding:0 8px;

  border:1px solid rgba(255,255,255,0.40);

  border-radius:5px;

  background:rgba(10,10,10,0.90);

  color:#ffffff;

  outline:none;

  font-family:Arial,sans-serif;

  font-size:11px;

  cursor:pointer;

}

#afStatusSelect:focus {

  border-color:#ffffff;

}

/* =========================================================

   PUBLICAR ESTADO

   ========================================================= */

#afStatusPublish {

  width:190px;

  height:29px;

  display:block;

  margin:0 auto;

  padding:0;

  border:0;

  border-radius:5px;

  /* AQUÍ PON EL COLOR DEL BOTÓN PUBLICAR ESTADO */

  background:#ff22a9;

  color:#ffffff;

  font-family:Arial,sans-serif;

  font-size:11px;

  font-weight:bold;

  cursor:pointer;

  box-shadow:

    0 1px 4px rgba(0,0,0,0.45);

}

#afStatusPublish:hover {

  background:#ff22a9;

}

/* =========================================================

   VER ESTADOS

   ========================================================= */

#afStatusView {

  width:190px;

  height:21px;

  display:block;

  margin:3px auto 0 auto;

  padding:0;

  border:0;

  background:transparent;

  color:#ffffff;

  font-family:Georgia,serif;

  font-size:11px;

  font-weight:bold;

  cursor:pointer;

  text-shadow:

    0 1px 3px #000000;

}

#afStatusView:hover {

  color:#eeeeee;

  text-decoration:underline;

}

/* =========================================================

   VENTANA DE ESTADOS

   ========================================================= */

#afStatusWindow {

  width:100%;

  height:100%;

  position:absolute;

  top:0;

  left:0;

  z-index:1000;

  display:none;

  background:

    linear-gradient(

      rgba(5,5,5,0.94),

      rgba(5,5,5,0.94)

    ),

    url("AQUÍ PON LA URL DE TU IMAGEN DE FONDO LA MISMA QUE HAS PUESTO ARRIBA");

  background-size:cover;

  background-position:center;

  padding:10px;

}

#afStatusWindow.open {

  display:block;

}

/* =========================================================

   CABECERA DE ESTADOS

   ========================================================= */

#afStatusWindowHeader {

  width:100%;

  height:25px;

  display:flex;

  align-items:center;

  justify-content:space-between;

  border-bottom:1px solid rgba(255,255,255,0.20);

}

#afStatusWindowTitle {

  color:#ffffff;

  font-family:Georgia,serif;

  font-size:12px;

  font-weight:bold;

}

#afStatusClose {

  width:22px;

  height:22px;

  border:0;

  padding:0;

  background:transparent;

  color:#ffffff;

  font-size:18px;

  cursor:pointer;

}

#afStatusClose:hover {

  color:#ff22a9;

}

/* =========================================================

   LISTA

   ========================================================= */

#afStatusList {

  width:100%;

  height:145px;

  overflow-y:auto;

  padding-right:3px;

}

#afStatusList::-webkit-scrollbar {

  width:3px;

}

#afStatusList::-webkit-scrollbar-track {

  background:#111111;

}

#afStatusList::-webkit-scrollbar-thumb {

  background:#ff22a9;

}

/* =========================================================

   ESTADOS

   ========================================================= */

.afStatusItem {

  width:100%;

  display:block;

  padding:7px 3px;

  border-bottom:1px dotted rgba(255,255,255,0.20);

}

.afStatusInfo {

  width:100%;

  min-width:0;

}

.afStatusUser {

  color:#ffffff;

  font-family:Arial,sans-serif;

  font-size:11px;

  font-weight:bold;

  line-height:14px;

}

.afStatusText {

  color:#dddddd;

  font-family:Arial,sans-serif;

  font-size:10px;

  line-height:14px;

  word-break:break-word;

}

.afStatusEmpty {

  width:100%;

  text-align:center;

  color:#aaaaaa;

  font-size:11px;

  padding-top:40px;

}

/* =========================================================

   PANTALLAS PEQUEÑAS

   ========================================================= */

@media screen and (max-width:250px) {

  #afStatusBox {

    width:100%;

  }

}

</style>

<div id="afStatusBox">

  <!-- TÍTULO -->

  <div id="afStatusHeaderImage">

    <div id="afStatusHeaderTitle">

      ¿Cuál es tu estado de hoy?

    </div>

    <div id="afStatusHeaderSubtitle">

      comparte cómo estás hoy…

    </div>

  </div>

  <!-- FORMULARIO -->

  <div id="afStatusForm">

    <input

      id="afStatusName"

      type="text"

      maxlength="20"

      /*  */

      placeholder="nombre de usuario..."

      autocomplete="off"

    />

    <select id="afStatusSelect">

      <!-- -->

      <option value="">¿cuál es tu estado?</option>

      <option value="😊 de buen humor">😊 de buen humor</option>

      <option value="😄 feliz">😄 feliz</option>

      <option value="🥳 celebrando">🥳 celebrando</option>

      <option value="💗 enamorada/o">💗 enamorada/o</option>

      <option value="🥰 cariñosa/o">🥰 cariñosa/o</option>

      <option value="🌸 tranquila/o">🌸 tranquila/o</option>

      <option value="🌧️ pensativa/o">🌧️ pensativa/o</option>

      <option value="🤔 reflexionando">🤔 reflexionando</option>

      <option value="😴 con sueño">😴 con sueño</option>

      <option value="🥱 cansada/o">🥱 cansada/o</option>

      <option value="☕ despertando">☕ despertando</option>

      <option value="🎧 escuchando música">🎧 escuchando música</option>

      <option value="🎮 jugando">🎮 jugando</option>

      <option value="📖 estudiando">📖 estudiando</option>

      <option value="💼 trabajando">💼 trabajando</option>

      <option value="🎨 siendo creativa/o">🎨 siendo creativa/o</option>

      <option value="📷 sacando fotos">📷 sacando fotos</option>

      <option value="🍿 viendo una película">🍿 viendo una película</option>

      <option value="📺 viendo una serie">📺 viendo una serie</option>

      <option value="🎵 obsesionada/o con una canción">🎵 obsesionada/o con una canción</option>

      <option value="🌙 desvelada/o">🌙 desvelada/o</option>

      <option value="🌞 disfrutando el día">🌞 disfrutando el día</option>

      <option value="🌧️ viendo la lluvia">🌧️ viendo la lluvia</option>

      <option value="❄️ con frío">❄️ con frío</option>

      <option value="🔥 con calor">🔥 con calor</option>

      <option value="🍕 comiendo">🍕 comiendo</option>

      <option value="🍰 con antojo">🍰 con antojo</option>

      <option value="💭 soñando despierta/o">💭 soñando despierta/o</option>

      <option value="✨ inspirada/o">✨ inspirada/o</option>

      <option value="🫶 agradecida/o">🫶 agradecida/o</option>

      <option value="😌 relajada/o">😌 relajada/o</option>

      <option value="😶 sin palabras">😶 sin palabras</option>

      <option value="😕 confundida/o">😕 confundida/o</option>

      <option value="😔 triste">😔 triste</option>

      <option value="😭 llorando">😭 llorando</option>

      <option value="😤 frustrada/o">😤 frustrada/o</option>

      <option value="😠 enojada/o">😠 enojada/o</option>

      <option value="🤒 enferma/o">🤒 enferma/o</option>

      <option value="💀 sobreviviendo">💀 sobreviviendo</option>

      <option value="🤍 solo quiero descansar">🤍 solo quiero descansar</option>

      <option value="📖 leyendo el blog">📖 leyendo el blog</option>

    </select>

    <button

      id="afStatusPublish"

      type="button"

      onclick="afPublishStatus()"

    >

      PUBLICAR ESTADO

    </button>

    <button

      id="afStatusView"

      type="button"

      onclick="afOpenStatuses()"

    >

      ver estados (<span id="afStatusCount">0</span>)

    </button>

  </div>

  <!-- VENTANA ESTADOS -->

  <div id="afStatusWindow">

    <div id="afStatusWindowHeader">

      <span id="afStatusWindowTitle">

        ESTADOS

      </span>

      <button

        id="afStatusClose"

        type="button"

        onclick="afCloseStatuses()"

      >

        ×

      </button>

    </div>

    <div id="afStatusList"></div>

  </div>

</div>

<script>

(function() {

  /* =======================================================

     URL DE GOOGLE APPS SCRIPT

     AQUÍ ABAJO PON LA URL DE TU GOOGLE APPS SCRIPT

     CONECTADO A TU GOOGLE SHEETS.

     ======================================================= */

  var afGoogleURL =

    "AQUÍ PON LA URL DE TU GOOGLE APPS SCRIPT";

  /* =======================================================

     OBTENER ESTADOS DESDE GOOGLE SHEETS

     ======================================================= */

  window.afGetOnlineStatuses = function(callback) {

    fetch(

      afGoogleURL + "?action=get&t=" + Date.now(),

      {

        method:"GET",

        cache:"no-store"

      }

    )

    .then(function(response) {

      return response.json();

    })

    .then(function(data) {

      if (

        data &&

        data.success &&

        Array.isArray(data.statuses)

      ) {

        callback(data.statuses);

      } else {

        callback([]);

      }

    })

    .catch(function() {

      callback([]);

    });

  };

  /* =======================================================

     ACTUALIZAR CONTADOR

     ======================================================= */

  window.afUpdateCount = function() {

    var count =

      document.getElementById(

        "afStatusCount"

      );

    if (!count) {

      return;

    }

    afGetOnlineStatuses(

      function(statuses) {

        count.textContent =

          statuses.length;

      }

    );

  };

  /* =======================================================

     PUBLICAR ESTADO

     ======================================================= */

  window.afPublishStatus = function() {

    var nameInput =

      document.getElementById(

        "afStatusName"

      );

    var select =

      document.getElementById(

        "afStatusSelect"

      );

    var publishButton =

      document.getElementById(

        "afStatusPublish"

      );

    if (!nameInput || !select) {

      return;

    }

    var name =

      nameInput.value.trim();

    var state =

      select.value;

    if (!name) {

      alert(

        "Escribe tu usuario primero."

      );

      nameInput.focus();

      return;

    }

    if (!state) {

      alert(

        "Elige tu estado."

      );

      select.focus();

      return;

    }

    if (publishButton) {

      publishButton.disabled =

        true;

      publishButton.textContent =

        "PUBLICANDO...";

    }

    var data = {

      action:"add",

      name:name,

      state:state

    };

    fetch(

      afGoogleURL,

      {

        method:"POST",

        mode:"no-cors",

        headers:{

          "Content-Type":

            "text/plain;charset=utf-8"

        },

        body:

          JSON.stringify(data)

      }

    )

    .then(function() {

      nameInput.value =

        "";

      select.value =

        "";

      if (publishButton) {

        publishButton.disabled =

          false;

        publishButton.textContent =

          "PUBLICAR ESTADO";

      }

      setTimeout(

        function() {

          afUpdateCount();

          afRenderStatuses();

          afOpenStatuses();

        },

        800

      );

    })

    .catch(function() {

      if (publishButton) {

        publishButton.disabled =

          false;

        publishButton.textContent =

          "PUBLICAR ESTADO";

      }

      alert(

        "No se ha podido publicar el estado. Inténtalo de nuevo."

      );

    });

  };

  /* =======================================================

     ABRIR ESTADOS

     ======================================================= */

  window.afOpenStatuses = function() {

    var windowBox =

      document.getElementById(

        "afStatusWindow"

      );

    if (!windowBox) {

      return;

    }

    afRenderStatuses();

    windowBox.className =

      "open";

  };

  /* =======================================================

     CERRAR ESTADOS

     ======================================================= */

  window.afCloseStatuses = function() {

    var windowBox =

      document.getElementById(

        "afStatusWindow"

      );

    if (!windowBox) {

      return;

    }

    windowBox.className =

      "";

  };

  /* =======================================================

     MOSTRAR ESTADOS

     ======================================================= */

  window.afRenderStatuses = function() {

    var list =

      document.getElementById(

        "afStatusList"

      );

    if (!list) {

      return;

    }

    list.innerHTML =

      '<div class="afStatusEmpty">' +

      'cargando estados...' +

      '</div>';

    afGetOnlineStatuses(

      function(statuses) {

        list.innerHTML =

          "";

        if (

          statuses.length === 0

        ) {

          list.innerHTML =

            '<div class="afStatusEmpty">' +

            'todavía no hay estados...<br><br>' +

            '¡sé la primera persona!' +

            '</div>';

          return;

        }

        /*

         * Los más recientes aparecen primero.

         */

        statuses.sort(

          function(a,b) {

            return (

              Number(b.time || 0) -

              Number(a.time || 0)

            );

          }

        );

        for (

          var i = 0;

          i < statuses.length;

          i++

        ) {

          var item =

            statuses[i];

          var row =

            document.createElement(

              "div"

            );

          row.className =

            "afStatusItem";

          var info =

            document.createElement(

              "div"

            );

          info.className =

            "afStatusInfo";

          var user =

            document.createElement(

              "div"

            );

          user.className =

            "afStatusUser";

          user.textContent =

            item.name || "";

          var state =

            document.createElement(

              "div"

            );

          state.className =

            "afStatusText";

          state.textContent =

            item.state || "";

          info.appendChild(

            user

          );

          info.appendChild(

            state

          );

          row.appendChild(

            info

          );

          list.appendChild(

            row

          );

        }

        var count =

          document.getElementById(

            "afStatusCount"

          );

        if (count) {

          count.textContent =

            statuses.length;

        }

      }

    );

  };

  /* =======================================================

     INICIAR

     ======================================================= */

  afUpdateCount();

})();

</script>

Aquí están los pasos a seguir para conseguir el URL DE TU GOOGLE APPS SCRIPT!!!

Primero tenemos que ir a Hojas de cálculo de google y abrir una hoja nueva y poner de titulo, estados blog, o lo que queráis. Segundo en la barra de arriba encontrareis Extensiones, donde tendréis q darle y luego entrar en Apps Script.

Al darle se abrirá una ventana donde aparecerá un pequeño código que tenéis que borrar y pegar este otro que os dejo aquí:

function doGet(e) {

  var action = e.parameter.action;

  if (action === "get") {

    return getStatuses();

  }

  return ContentService

    .createTextOutput(

      JSON.stringify({

        success: true

      })

    )

    .setMimeType(

      ContentService.MimeType.JSON

    );

}

function doPost(e) {

  try {

    var data =

      JSON.parse(e.postData.contents);

    if (data.action === "add") {

      addStatus(

        data.name,

        data.state

      );

    }

    return ContentService

      .createTextOutput(

        JSON.stringify({

          success: true

        })

      )

      .setMimeType(

        ContentService.MimeType.JSON

      );

  } catch (error) {

    return ContentService

      .createTextOutput(

        JSON.stringify({

          success: false,

          error: error.toString()

        })

      )

      .setMimeType(

        ContentService.MimeType.JSON

      );

  }

}

function addStatus(name, state) {

  var spreadsheet =

    SpreadsheetApp.getActiveSpreadsheet();

  var sheet =

    spreadsheet.getSheetByName("Estados");

  if (!sheet) {

    sheet =

      spreadsheet.insertSheet("Estados");

    sheet.appendRow([

      "Usuario",

      "Estado",

      "Fecha"

    ]);

  }

  sheet.appendRow([

    name,

    state,

    new Date()

  ]);

}

function getStatuses() {

  var spreadsheet =

    SpreadsheetApp.getActiveSpreadsheet();

  var sheet =

    spreadsheet.getSheetByName("Estados");

  if (!sheet) {

    return ContentService

      .createTextOutput(

        JSON.stringify({

          success: true,

          statuses: []

        })

      )

      .setMimeType(

        ContentService.MimeType.JSON

      );

  }

  var lastRow =

    sheet.getLastRow();

  if (lastRow < 2) {

    return ContentService

      .createTextOutput(

        JSON.stringify({

          success: true,

          statuses: []

        })

      )

      .setMimeType(

        ContentService.MimeType.JSON

      );

  }

  var values =

    sheet

      .getRange(

        2,

        1,

        lastRow - 1,

        3

      )

      .getValues();

  var statuses = [];

  for (

    var i = 0;

    i < values.length;

    i++

  ) {

    statuses.push({

      name:

        values[i][0],

      state:

        values[i][1],

      time:

        values[i][2]

          instanceof Date

          ? values[i][2].getTime()

          : 0

    });

  }

  return ContentService

    .createTextOutput(

      JSON.stringify({

        success: true,

        statuses: statuses

      })

    )

    .setMimeType(

      ContentService.MimeType.JSON

    );

}

Después de pegar el código tenéis que guardarlo!!!

Una vez guardado en la barra de arriba hay un cuadrado azul que dice Implementar, donde tenéis que darle y luego elegir la opción de Nueva implementación. Se os tiene que abrir una pequeña ventana donde salga un símbolo de ajustes y allí le tienes que dar para que te salgan las opciones, elige Aplicación web.

Cuando le das tendrás que elegir arriba en la parte de Yo, tu correo electrónico (el de tu cuenta de blogger) y abajo en la parte Quien tiene acceso poner Cualquier usuario.Y por último tenéis que darle al botón de abajo que esta en azul y dice Implementar, y luego tenéis que darle a Autorizar acceso.

A partir de aquí a algunas personas les puede salir bien y ya les tendía que salir el URL de Apps Script para copiar, pero también te puede salir un mensaje donde ponga que google no verifica esta app, para saber que hacer y continuar ahora os dejo los pasos ;)

Este es el mensaje que le puede salir a algunos, si os pasa tranquilos que es super fácil de solucionar!!!

Vas a bajo donde pone Advanced (avances) y le das. Luego te saldrá Go to (seguir con tu proyecto) y le das. Y ya porfin os saldrá el URL de Apps Script!!!!!!

Espero que os haya gustado mi tutorial y todo se haya entendido biennnn, muchas gracias por usar mis tutoriales <3