Incrustar podcasts de BuzzSprout

Soporte
1

Estoy intentando incrustar código de un reproductor de podcasts popular, pero ningún cambio que haga hace que el reproductor se muestre. El código es muy sencillo. Los iframes fueron fáciles. Este no logro resolverlo.

2

¿Puedes publicar el código relevante (sin incluir datos privados)?

3

Captura de FireShot 157 - Buzzsprout - www.buzzsprout.com
Captura de FireShot 157 - Buzzsprout - www.buzzsprout.com378×208 11.8 KB

4

OK, en lo que respecta a CSP, simplemente debes agregar https://www.buzzsprout.com a tu CSP, así:

image
image1354×304 34.7 KB

Pero asegúrate de que este código de inserción también esté colocado en el lugar correcto de tu tema.

5

OK, agregué la URL, pero aún no se muestra. No estoy seguro de cómo ajustar el tema. Simplemente pegué el código al principio de las publicaciones relacionadas con los podcasts en la comunidad.

6

¡Ah, no puedes publicar una etiqueta <script> en una publicación normal; si lo permitiéramos, los usuarios podrían causar fácilmente un desorden en tu sitio. ¿Has intentado publicar solo la URL del podcast en una línea propia? Tenemos una función llamada oneboxing que podría funcionar en tu caso, sin necesidad de incrustaciones complicadas.

7

OK, lo buscaré.

8

Hola Penar,

Acabo de probarlo y no genera la caja de reproducción automática:

https://www.buzzsprout.com/1306987/5209720-000-presentacion-empezamos-la-semana-que-viene.mp3

Dado que no es posible usar su etiqueta de script, ¿tengo alguna otra opción?

9

¿Es un script que se puede incrustar una vez en el tema del sitio, o debe estar adyacente al iframe?

edición: respondí mi propia pregunta, es específico del iframe; eso realmente no es muy útil por su parte.

10

Ese es un archivo mp3 directo; en ese caso, puedes usar la etiqueta de audio de HTML:

<audio controls><source src='https://www.buzzsprout.com/1306987/5209720-000-presentacion-empezamos-la-semana-que-viene.mp3'></audio>
11

@pmusaraj Eso es súper útil. ¡Gracias!

Hola @Stephen,

¿Qué quieres decir con específico de iframe? Esto es lo que proporcionan:

<div id='buzzsprout-small-player-1306987'></div>
<script type='text/javascript' charset='utf-8' src='https://www.buzzsprout.com/1306987.js?container_id=buzzsprout-small-player-1306987&player=small'></script>

En realidad, @Aaron_Norris, acabo de darme cuenta de que puedo seguir ese script JS y simplemente hacer la decodificación yo mismo:

unescape(decodeURI("%0A%0A%3Ciframe%20src=%22https://www.buzzsprout.com/1306987/5209720-000-presentacion-empezamos-la-semana-que-viene?client_source=small_player%26amp;iframe=true%26amp;referrer=https%253A%252F%252Fwww.buzzsprout.com%252F1306987.js%253Fcontainer_id%253Dbuzzsprout-small-player-1306987%2526player%253Dsmall%22%20width=%22100%25%22%20height=%22200%22%20frameborder=%220%22%20scrolling=%22no%22%3E%3C/iframe%3E%0A%0A%0A")); 
// devuelve este iframe
<iframe src="https://www.buzzsprout.com/1306987/5209720-000-presentacion-empezamos-la-semana-que-viene?client_source=small_player&iframe=true&referrer=https://www.buzzsprout.com/1306987.js?container_id=buzzsprout-small-player-1306987&player=small" width="100%" height="200" frameborder="0" scrolling="no"></iframe>

Puedo añadir buzzsprout a la lista blanca en allowed iframes y funciona perfectamente:

image
image1063×332 44.3 KB

12

¿Puedes explicarlo de una manera que gente como yo, que no somos expertos, pueda entender? Quiero poder reproducirlo dentro de nuestro foro (ten en cuenta que no es un archivo .mp3 como el anterior):

https://www.buzzsprout.com/1717287/8537076

13

Hola Nathan,

Aquí están los pasos:

  1. Ve a la consola de administración y busca “allowed iframes”.

  2. Añade https://www.buzzsprout.com y haz clic en la marca de verificación para guardar el cambio.

  3. Añade esto a tu publicación:

    <div data-theme-iframe="no-scroll">
<iframe src="https://www.buzzsprout.com/1717287/8537076?client_source=small_player&amp;iframe=true&amp;referrer=https://lacomunidad.deliberatespanish.com?player=small" width="100%" height="200" frameborder="0" scrolling="no"></iframe>
</div>

El <div> envolvente es opcional, pero lo uso porque no quiero barras de desplazamiento en mis iframes. Si deseas habilitarlas, debes seguir dos pasos más:

  1. Ve a tu tema activo, haz clic en “Editar CSS/HTML” y selecciona la pestaña </head>.
  2. Pega lo siguiente y guarda:
    <script type="text/discourse-plugin" version="0.8.42">
  api.decorateCookedElement(post =>
    post.querySelectorAll('div[data-theme-iframe="no-scroll"] iframe').forEach(iframe => {
      iframe.setAttribute('scrolling', 'no');
    }),
    { 
      id: 'iframe-decorator',
      onlyStream: true,
    }
  );
</script>
14

¡Genial! Realmente mejora al eliminar el desplazamiento.

¡Gracias por la guía clara, es super útil!