Bonjour,
Je me demandais si quelqu’un connaissait des communautés Discourse qui intègrent un flux Twitter. J’ai lu quelques sujets sur le sujet, mais je me demandais s’il y avait des exemples que je pourrais consulter.
Merci d’avance !
Vous devez vous inscrire pour le voir, car j’ai dû le retirer du thème par défaut, car il cassait la page pour les utilisateurs non connectés. Créez un compte et sélectionnez le thème sombre ou clair dans le menu hamburger pour le voir en direct, ou voici une capture d’écran si vous ne voulez pas prendre la peine de vous connecter.
Merci @smrtey, je vais m’inscrire pour jeter un coup d’œil de plus près, mais la capture d’écran a l’air géniale !
Cela a l’air super. Si cela ne vous dérange pas, j’aimerais savoir comment vous l’avez fait.
Mon collègue a créé un script et une surcharge de modèle pour la barre latérale, et j’ai simplement ajouté le flux Twitter et quelques cookies. Il a dit que je pouvais publier le script ici, alors le voici avec le contenu Twitter ajouté et le CSS.
edit : D’accord, c’est lui ci-dessous, donc je vais le laisser s’en occuper.
Attendez avant que quiconque n’utilise ce code. C’est beaucoup plus que ce à quoi je m’attendais et la plupart est complètement inutile pour un fil d’actualité Twitter intégré. Je publierai une version beaucoup plus réduite sous peu.
OK, cela devrait fournir un flux Twitter intégré dans une barre latérale gauche sur toutes les pages de liste. Vous devrez modifier la ligne 60 avec du HTML approprié à la chronologie que vous souhaitez intégrer.
-
Rendez-vous sur cette page Twitter et saisissez ce que vous voulez intégrer, par exemple
https://twitter.com/TwitterDev, puis cliquez sur Chronologie intégrée. -
Vous obtiendrez un code comme celui-ci :
<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>
- Supprimez la partie
<script>pour ne garder que :
<a class="twitter-timeline" href="https://twitter.com/SampleTwitterUser?ref_src=twsrc%5Etfw">Tweets by SampleTwitterUser</a>
- Collez-le à la ligne 60 ci-dessous, en remplaçant les XXXXXXXXXX.
Ajoutez ceci à 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}}
<!-- ***********************************************************************
C'est la seule partie de ce modèle qui change.
Vous devez remplacer les XXXXXXXXXX ci-dessous par le lien fourni par Twitter sur cette page, mais sans la partie <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>
Ensuite, ajoutez ceci à 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;
}
}
Cela devrait fonctionner, mais il est possible que nous ayons d’autres règles CSS flottantes sur notre site que vous n’avez pas, donc je ne peux pas garantir que cela sera parfait pour tout le monde.
Ce qui précède nécessite un rafraîchissement de la page pour que la chronologie s’affiche pour les utilisateurs non connectés. C’est un bug connu que nous n’avons pas encore eu le temps de résoudre.
Cela ne fonctionnait pas non plus sur les iPads, alors j’ai ajouté ceci pour le désactiver pour eux
<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}
C’est la première fois ce soir que je regarde de près tout ce qui concerne Twitter. Je pense savoir où corriger les bugs connus, mais je n’ai pas le temps de le faire pour le moment.
Si quelqu’un souhaite l’utiliser, je rassemblerai tout cela dans un composant de thème dans les jours à venir.
Voici le composant qui semble stable
Il ajoute une barre latérale Twitter à la page discovery/topics.hbs de Discourse, de sorte que la barre latérale s’affiche sur toutes les pages telles que Derniers, Non lus, Nouveaux, Favoris, etc. Elle ne se chargera pas si l’utilisateur n’est pas connecté, car nous n’avons pas réussi à la faire fonctionner sans connexion. Elle ne fonctionne pas non plus sur iOS, donc je pense qu’elle est désactivée sur les iPad, mais je ne peux pas le tester.
Pour charger votre flux Twitter à la place de celui de Discourse, suivez les instructions à la ligne 30 du fichier Desktop/head_tag.html et ajoutez le code correct à la ligne 39.
Je pense que l’aspect est beaucoup meilleur si vous augmentez la largeur de l’enveloppe sur les pages qui incluent la barre latérale.
Où se trouve ce fichier ?
Merci, j’ai trouvé <\head>
Essayez le composant de thème smartey, lié à quelques publications plus haut.
Je ne sais pas quoi vous dire. J’ai eu des problèmes pour charger le flux jusqu’à ce que j’ajoute
<script type="text/discourse-plugin" version="0.8">
api.onPageChange(() => {
twttr.widgets.load( document.getElementById("sidebar") );
});
</script>
Mais cela se trouve dans le composant, donc si cela ne fonctionne pas pour vous, la seule chose à laquelle je peux penser est de vérifier dans vos paramètres de sécurité le paramètre content security policy et si cette option est cochée
Je ne pense pas que les scripts Twitter fonctionneront.
C’est vraiment sympa. Je l’ai testé et ça fonctionne bien. Bon travail !
Quand j’ai vu ce sujet pour la première fois, je pensais qu’il serait un peu différent. Dans ma communauté, beaucoup de membres ont aussi Twitter. C’est un défi de les encourager à avoir des conversations plus profondes et à long terme sur le forum à propos des sujets qu’ils tweetent. Une interface pour voir un flux et lancer un sujet à partir d’un tweet serait intéressante ! Peut-être que le flux pourrait être basé sur un hashtag ? Ou ils pourraient voir leur propre flux Twitter sur leur profil et lancer des sujets à partir de là.
Merci Smertey, j’ai décoché la politique de sécurité du contenu, cela semble fonctionner maintenant. Désactiver cette option présente-t-elle des risques de sécurité ?