Ciao,
Mi chiedevo se qualcuno conoscesse comunità Discourse che abbiano un feed Twitter incorporato. Ho letto alcuni argomenti sull’argomento, ma mi chiedevo se ci fossero esempi che potessi consultare.
Grazie in anticipo!
È necessario registrarsi per visualizzarlo, poiché l’ho rimosso dal Tema Predefinito perché rompeva la pagina per gli utenti non collegati. Crea un account e seleziona il Tema Scuro o Chiaro dal menu Hamburger per vederlo in azione, oppure ecco uno screenshot se non vuoi disturbarti a effettuare l’accesso.
Grazie @smrtey, mi iscriverò per dare un’occhiata più da vicino, ma lo screenshot sembra fantastico!
Questo sta venendo benissimo. Se non ti dispiace, mi piacerebbe sapere come l’hai realizzato.
Il mio collega ha creato uno script e un override del template per la barra laterale, e io ho semplicemente aggiunto il feed di Twitter e alcuni cookie. Ha detto che potevo pubblicare lo script qui, quindi eccolo con l’aggiunta del contenuto di Twitter e il CSS.
edit: Ok, è lui qui sotto, quindi lascio che se ne occupi lui.
Aspetta prima che qualcuno usi quel codice. È molto più di quanto mi aspettassi di vedere pubblicato e la maggior parte è completamente inutile per un feed Twitter incorporato. Avrò presto una versione molto più piccola.
OK, questo dovrebbe fornire un feed Twitter incorporato come barra laterale sinistra su tutte le pagine di elenco. Dovrai modificare la riga 60 con un HTML appropriato alla timeline che desideri incorporare.
-
Vai a questa pagina di Twitter e inserisci ciò che vuoi incorporare, ad esempio
https://twitter.com/TwitterDev, quindi clicca su “Embedded Timeline”. -
Otterrai un codice simile a questo:
<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>in modo da avere solo:
<a class="twitter-timeline" href="https://twitter.com/SampleTwitterUser?ref_src=twsrc%5Etfw">Tweets by SampleTwitterUser</a> -
Incolla questo nella riga 60 qui sotto, sostituendo le XXXXXXXXXX.
Aggiungi questo 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}}
<!-- ***********************************************************************
Questa è l'unica parte di questo template che cambia.
Devi sostituire le XXXXXXXXXX qui sotto con il link fornito da Twitter in questa pagina, ma omettendo 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>
Quindi aggiungi questo 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;
}
}
Questo dovrebbe funzionare, ma potrebbero esserci altri stili CSS sul nostro sito che tu non hai, quindi non posso garantire che sia perfetto per tutti.
Quanto sopra richiede un aggiornamento della pagina per far apparire la cronologia per gli utenti non registrati. Si tratta di un bug noto che non abbiamo ancora avuto modo di risolvere.
Non funzionava nemmeno su iPad, quindi ho aggiunto questo codice per disattivarli:
<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}
Stasera è la prima volta che guardo davvero da vicino tutto il materiale di Twitter. Penso di aver capito dove correggere i bug noti, ma al momento non ho tempo per farlo.
Se qualcuno vuole usarlo, lo metterò tutto insieme in un componente tema entro uno o due giorni.
Ecco un componente che sembra stabile:
Aggiunge una barra laterale di Twitter a Discourse discovery/topics.hbs, quindi la barra laterale verrà visualizzata su tutte le pagine come Ultime, Non lette, Nuove, Segnalibri, ecc. Non verrà caricata se l’utente non ha effettuato l’accesso, poiché non siamo riusciti a farlo funzionare senza un account. Inoltre, non funziona su iOS, quindi credo sia disabilitata sugli iPad, ma non posso verificarlo.
Per far caricare il tuo feed Twitter invece di quello di Discourse, devi seguire le istruzioni alla riga 30 in Desktop head_tag.html e aggiungere il codice corretto alla riga 39.
Credo che l’aspetto sia molto migliore se aumenti la larghezza del contenitore nelle pagine che includono la barra laterale.
Qual è la posizione di questo file?
Grazie, ho trovato <\head>
Prova a collegare il componente del tema smartey a un paio di post.
Non so cosa dirti. Ho avuto alcuni problemi con il caricamento del feed finché non ho aggiunto
<script type="text/discourse-plugin" version="0.8">
api.onPageChange(() => {
twttr.widgets.load( document.getElementById("sidebar") );
});
</script>
Ma questo è nel componente, quindi se non funziona per te, l’unica cosa che mi viene in mente è controllare nelle tue Impostazioni di Sicurezza la voce content security policy e se hai questa opzione selezionata
non credo che gli script di Twitter funzionino.
È davvero carino. L’ho provato e funziona bene. Ottimo lavoro!
Quando ho visto per la prima volta questo argomento, pensavo che sarebbe stato un po’ diverso. Nella mia community, molti membri hanno anche Twitter. È una sfida incoraggiarli ad avere conversazioni più profonde e a lungo termine sul forum riguardo a ciò che twittano. Un’interfaccia per vedere un feed e avviare un argomento su un tweet sarebbe interessante! Forse il feed potrebbe essere un hashtag? Oppure potrebbero vedere il proprio feed Twitter sul proprio profilo e avviare argomenti da lì.
Grazie, Smertey, ho deselezionato la Content Security Policy e sembra che ora funzioni. Deselezionare questa opzione comporta rischi per la sicurezza?