Hola,
Me preguntaba si alguien conoce comunidades de Discourse que tengan un feed de Twitter incrustado. He leído algunos temas sobre el asunto, pero me preguntaba si había algún ejemplo que pudiera consultar.
¡Gracias de antemano!
Necesitas registrarte para verlo, ya que tuve que quitarlo del Tema Predeterminado porque rompía la página para los usuarios que no han iniciado sesión. Crea una cuenta y selecciona el tema Oscuro o Claro desde el menú hamburguesa para verlo en vivo, o aquí tienes una captura de pantalla si no quieres molestarte en iniciar sesión.
¡Gracias @smrtey! Me registraré para echar un vistazo más de cerca, pero la captura de pantalla se ve genial.
Esto se ve genial. Me gustaría saber cómo lo hiciste, si no te importa.
Mi colega creó un script y una sobrescritura de plantilla para la barra lateral, y yo solo agregué el feed de Twitter y algunas cookies. Él dijo que podía publicar el script aquí, así que aquí está con lo de Twitter añadido y el CSS.
edición: Está bien, es él abajo, así que le dejaré que se encargue.
Espera antes de que alguien use ese código. Es mucho más de lo que esperaba que se publicara y la mayor parte es completamente innecesaria para una integración de Twitter. En breve subiré una versión mucho más pequeña.
OK, esto debería proporcionar un feed incrustado de Twitter como una barra lateral izquierda en todas las páginas de listas. Necesitarás editar la línea 60 con algún HTML adecuado para la línea de tiempo que quieras incrustar.
-
Ve a esta página de Twitter e ingresa lo que deseas incrustar, algo como
https://twitter.com/TwitterDev, y haz clic en “Embedded Timeline” (Línea de tiempo incrustada). -
Obtendrás un código similar a este:
<a class="twitter-timeline" href="https://twitter.com/TwitterDev?ref_src=twsrc%5Etfw">Tweets by TwitterDev</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> -
Elimina la parte
<script>para que solo te quede:
<a class="twitter-timeline" href="https://twitter.com/SampleTwitterUser?ref_src=twsrc%5Etfw">Tweets by SampleTwitterUser</a> -
Pega eso en la línea 60 de abajo, reemplazando los XXXXXXXXXX.
Agrega esto a Desktop - </head>.
<script>
window.twttr = (function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0],
t = window.twttr || {};
if (d.getElementById(id)) return t;
js = d.createElement(s);
js.id = id;
js.src = "https://platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js, fjs);
t._e = [];
t.ready = function(f) {
t._e.push(f);
};
return t;
}
(document, "script", "twitter-wjs"));
</script>
<script type="text/discourse-plugin" version="0.8">
api.onPageChange(() => {
twttr.widgets.load( document.getElementById("twitter-sidebar") );
});
</script>
<script type="text/x-handlebars" data-template-name="discovery/topics">
{{#if redirectedReason}}
<div class="alert alert-info">{{redirectedReason}}</div>
{{/if}}
{{#if showDismissAtTop}}
<div class="row">
{{#if showDismissRead}}
<button title="{{i18n 'topics.bulk.dismiss_tooltip'}}" id='dismiss-topics-top' class='btn btn-default dismiss-read' {{action "dismissReadPosts"}}>{{i18n 'topics.bulk.dismiss_button'}}</button>
{{/if}}
{{#if showResetNew}}
<button id='dismiss-new-top' class='btn btn-default dismiss-read' {{action "resetNew"}}>{{d-icon "check"}} {{i18n 'topics.bulk.dismiss_new'}}</button>
{{/if}}
</div>
{{/if}}
{{#if model.sharedDrafts}}
{{topic-list
class="shared-drafts"
listTitle="shared_drafts.title"
top=top
hideCategory="true"
category=category
topics=model.sharedDrafts
discoveryList=true}}
{{/if}}
{{bulk-select-button selected=selected action=(action "refresh") category=category}}
<!-- ***********************************************************************
Esta es la única parte de esta plantilla que cambia.
Necesitas reemplazar XXXXXXXXXX de abajo con el enlace proporcionado por Twitter en esta página, pero omite la parte <script>:
https://help.twitter.com/en/using-twitter/embed-twitter-feed
************************************************************************* -->
<div id="sidebar">
XXXXXXXXXX
<div id="twitter-sidebar"></div>
</div>
{{#discovery-topics-list model=model refresh=(action "refresh") incomingCount=topicTrackingState.incomingCount}}
{{#if top}}
<div class='top-lists'>
{{period-chooser period=period action=(action "changePeriod")}}
</div>
{{else}}
{{#if topicTrackingState.hasIncoming}}
<div class="show-more {{if hasTopics 'has-topics'}}">
<div class='alert alert-info clickable' {{action "showInserted"}}>
<a tabindex="0" href="" {{action "showInserted"}}>
{{count-i18n key="topic_count_" suffix=topicTrackingState.filter count=topicTrackingState.incomingCount}}
</a>
</div>
</div>
{{/if}}
{{/if}}
{{#if hasTopics}}
{{topic-list
highlightLastVisited=true
top=top
showTopicPostBadges=showTopicPostBadges
showPosters=true
canBulkSelect=canBulkSelect
changeSort=(action "changeSort")
toggleBulkSelect=(action "toggleBulkSelect")
hideCategory=model.hideCategory
order=order
ascending=ascending
bulkSelectEnabled=bulkSelectEnabled
selected=selected
expandGloballyPinned=expandGloballyPinned
expandAllPinned=expandAllPinned
category=category
topics=model.topics
discoveryList=true}}
{{/if}}
{{/discovery-topics-list}}
<footer class='topic-list-bottom'>
{{conditional-loading-spinner condition=model.loadingMore}}
{{#if allLoaded}}
{{#if showDismissRead}}
<button title="{{i18n 'topics.bulk.dismiss_tooltip'}}" id='dismiss-topics' class='btn btn-default dismiss-read' {{action "dismissReadPosts"}}>{{i18n 'topics.bulk.dismiss_button'}}</button>
{{/if}}
{{#if showResetNew}}
<button id='dismiss-new' class='btn btn-default dismiss-read' {{action "resetNew"}}>
{{d-icon "check"}} {{i18n 'topics.bulk.dismiss_new'}}</button>
{{/if}}
{{#footer-message education=footerEducation message=footerMessage}}
{{#if latest}}
{{#if canCreateTopicOnCategory}}<a href {{action "createTopic"}}>{{i18n 'topic.suggest_create_topic'}}</a>{{/if}}
{{else if top}}
{{#link-to "discovery.categories"}}{{i18n 'topic.browse_all_categories'}}{{/link-to}}, {{#link-to 'discovery.latest'}}{{i18n 'topic.view_latest_topics'}}{{/link-to}} {{i18n 'or'}} {{i18n 'filters.top.other_periods'}}
{{top-period-buttons period=period action=(action "changePeriod")}}
{{else}}
{{#link-to "discovery.categories"}} {{i18n 'topic.browse_all_categories'}}{{/link-to}} {{i18n 'or'}} {{#link-to 'discovery.latest'}}{{i18n 'topic.view_latest_topics'}}{{/link-to}}
{{/if}}
{{/footer-message}}
{{/if}}
</footer>
</script>
Luego agrega esto a Desktop - CSS:
topic-list {
width: auto;
}
#sidebar {
width: 28%;
float: left;
margin-right: 20px;
position: relative;
z-index: 1;
}
@media (max-width: 900px) {
#sidebar {
display: none !important;
}
}
Eso debería funcionar, pero puede que tengamos algo de CSS adicional flotando en nuestro sitio que tú no tienes, así que no puedo garantizar que será perfecto para todos.
Lo anterior requiere una actualización de la página para que la línea de tiempo se muestre a los usuarios que no han iniciado sesión. Es un error conocido que aún no hemos podido solucionar.
Tampoco funcionaba en iPads, así que añadí esto para desactivarlo en ellos:
<script type="text/discourse-plugin" version="0.8">
api.onPageChange(() => {
var is_iPad = navigator.userAgent.match(/iPad/i) != null;
if(is_iPad) {
document.getElementById("sidebar").classList.add("hide-it");
}
});
</script>
CSS
#sidebar.hide-it {display:none !important}
Esta noche es realmente la primera vez que he mirado de cerca cualquier cosa de Twitter. Creo que veo dónde solucionar los errores conocidos, pero no tengo tiempo para hacerlo ahora mismo.
Si alguien quiere usarlo, lo reuniré todo en un componente de tema en el próximo día o dos.
Aquí está como un componente que parece ser estable
Añade una barra lateral de Twitter a discovery/topics.hbs de Discourse, por lo que la barra lateral se mostrará en todas las páginas como Últimas, Sin leer, Nuevas, Marcadores, etc. No se cargará si el usuario no ha iniciado sesión, ya que no logramos que funcionara a menos que hayas iniciado sesión. Tampoco funciona en iOS, así que creo que está desactivada en iPads, pero no puedo probarlo.
Para cargar tu feed de Twitter en lugar del de Discourse, debes seguir las instrucciones en la línea 30 de Desktop/head_tag.html y agregar el código correcto en la línea 39.
Creo que se ve mucho mejor si aumentas el ancho del contenedor en las páginas que incluyen la barra lateral.
¿Cuál es la ubicación de este archivo?
Gracias, encontré <\head>
Prueba el componente de tema smartey, que ha enlazado algunas publicaciones más arriba.
No sé qué decirte. Tuve algunos problemas para cargar el feed hasta que añadí
<script type="text/discourse-plugin" version="0.8">
api.onPageChange(() => {
twttr.widgets.load( document.getElementById("sidebar") );
});
</script>
Pero eso está en el componente, así que si no te funciona, lo único que se me ocurre es revisar tu configuración de Seguridad para ver la opción política de seguridad de contenido y si tienes esto marcado
No creo que los scripts de Twitter funcionen.
¡Esto es bastante genial! Lo probé y funciona bien. ¡Buen trabajo!
Cuando vi por primera vez este tema, pensé que sería un poco diferente. En mi comunidad, muchos miembros también tienen Twitter. Es un desafío animarlos a tener conversaciones más profundas y a largo plazo en el foro sobre lo que twittean. ¡Una interfaz para ver un feed y comenzar un tema sobre un tweet sería interesante! ¿Quizás el feed podría ser un hashtag? O podrían ver su propio feed de Twitter en su perfil y comenzar temas desde allí.
Gracias, Smertey. Desmarqué la directiva de seguridad de contenido y parece que ahora funciona. ¿Desmarcar esta opción conlleva algún riesgo de seguridad?