Inserta un perfil de Twitter, no una línea de tiempo

4 minutos de lectura

He estado buscando una solución para incrustar perfiles de usuario de Twitter, pero hasta ahora no he encontrado nada. Lo que estoy buscando es algo similar a cómo Twitter muestra una buena descripción general del perfil cuando haces clic en un nombre de usuario en twitter.com. Tomé una captura de pantalla de mi perfil para que puedas ver debajo de lo que estoy hablando.

ingrese la descripción de la imagen aquí

No necesito la línea de tiempo del usuario ni nada por el estilo, solo la información del usuario, el fondo de la foto de portada sería bueno, así como un enlace para seguir a la persona. Eché un vistazo a través del generador de código de incrustación de Twitter, pero no parecía haber nada que realmente se ajustara a la factura. Estoy usando WordPress, por lo que una solución de complemento podría ser viable, pero si es solo un código incrustado, también está bien.

  • ¿Esto es para un solo perfil? Todo en el perfil es estático excepto Tweets, Siguiendo y Seguidores.

    – De arriba hacia abajo

    20 de enero de 2014 a las 22:15

  • @topdown sí, esto sería para un solo perfil de usuario. Tenía la esperanza de crear múltiples incrustaciones de esto en una página, que mostraría a diferentes usuarios.

    – jbwharris

    23 de enero de 2014 a las 18:38

  • ¿Alguna noticia sobre esto? buscando lo mismo, espero una solución integrable

    – ducu

    9 de marzo de 2015 a las 6:23

  • @ducu No pude encontrar nada que funcionara para este problema en particular. Sé que es algo que probablemente podrías construir usando la API, pero eso está un poco fuera de mi alcance.

    – jbwharris

    9 de marzo de 2015 a las 13:46


  • Hola, acabo de encontrar esto, vale la pena investigarlo. dev.twitter.com/web/intents#user-intent

    – ducu

    9 de marzo de 2015 a las 14:16


Actualmente, que yo sepa, no existe una funcionalidad de inserción para el resumen del perfil, sin embargo, puede llamar a la API para obtener información del perfil de Twitter de dos maneras:

  1. Para un uso a la vez: /usuarios/mostraro
  2. Para hasta 100 usuarios a la vez: /usuarios/búsqueda

Luego puede tomar el json devuelto y diseñarlo para que coincida con el formato de Twitter o cualquier otro estilo que desee.

Realmente no está integrado, pero esto también podría funcionar para usted https://dev.twitter.com/web/intents#user-intent

avatar de usuario
intika

Aquí hay una implementación para el botón, esto requiere algo de trabajo para agregar la imagen de perfil y la imagen de fondo

Código SVG del icono:

  <symbol id="twitter" viewBox="0 0 512 512"><path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z" /></symbol>

SASS/CSS:

.twitter a  
  font-family: "Roboto", "Noto Sans", "Open Sans", "sans-serif"
  display: inline-flex
  color: #fff
  border-radius: 5px
  background: #1b95e0
  padding: .4em .8em
  text-decoration: none
  font-weight: bold
  text-align: left

HTML:

<div class="twitter" style="height: 35px; width: 240px;"><a target="_blank" rel="noopener noreferrer" href="https://twitter.com/LinuxHacksOrg">
<svg height="20px" width="20px" style="margin-right: 5px; fill: #fff;">
<use xlink:href="/assets/imgs/res/icons-full.svg#twitter"></use></svg>
Follow us @LinuxHacksOrg</a></div>
<style>
.twitter a {
  font-family: "Roboto", "Noto Sans", "Open Sans", "sans-serif";
  display: inline-flex;
  color: #fff;
  border-radius: 5px;
  background: #1b95e0;
  padding: .4em .8em;
  text-decoration: none;
  font-weight: bold;
  text-align: left;
}
</style>

<div class="twitter" style="height: 35px; width: 300px;"><a target="_blank" rel="noopener noreferrer" href="https://twitter.com/LinuxHacksOrg">
<svg height="20px" width="20px" style="margin-right: 5px; fill: #fff;" viewBox="0 0 512 512" preserveAspectRatio="none">
<path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z" />
</svg>
Follow us @LinuxHacksOrg</a></div>

  • @jbwharris Actualicé el código con un fragmento;) … la principal ventaja aquí es evitar cargar js de Twitter inflados

    – intika

    6 de agosto de 2020 a las 21:17


¿Ha sido útil esta solución?