Hallo,
ich habe mich gefragt, ob jemand Discourse-Communities kennt, die einen eingebetteten Twitter-Feed haben? Ich habe bereits einige Beiträge zu diesem Thema gelesen, aber ich würde gerne Beispiele sehen, die ich mir ansehen kann.
Vielen Dank im Voraus!
Du musst dich registrieren, um es sehen zu können, da ich es vom Standardthema entfernen musste, weil es die Seite für nicht eingeloggte Benutzer beschädigt hat. Erstelle ein Konto und wähle im Hamburger-Menü das dunkle oder helle Thema aus, um es live zu sehen. Oder hier ist ein Screenshot, falls du dich nicht mit dem Anmelden beschäftigen möchtest.
Danke, @smrtey! Ich melde mich an, um mir das genauer anzusehen, aber der Screenshot sieht großartig aus!
Das sieht großartig aus. Wenn es dir nichts ausmacht, würde ich gerne wissen, wie du das gemacht hast.
Mein Kollege hat ein Skript und eine Template-Überschreibung für die Seitenleiste erstellt, und ich habe lediglich den Twitter-Feed und einige Cookies hinzugefügt. Er meinte, ich könne das Skript hier veröffentlichen, also hier ist es mit den Twitter-Elementen und dem CSS.
Edit: Okay, das ist er unten, also überlasse ich es ihm, sich darum zu kümmern.
Warte kurz, bevor jemand diesen Code verwendet. Es ist viel mehr als erwartet gepostet worden, und der Großteil davon ist für einen eingebetteten Twitter-Feed völlig unnötig. Ich werde in Kürze eine deutlich kleinere Version bereitstellen.
OK, das sollte einen eingebetteten Twitter-Feed als linke Seitenleiste auf allen Listen-Seiten bereitstellen. Sie müssen Zeile 60 mit dem entsprechenden HTML für die Timeline bearbeiten, die Sie einbetten möchten.
Gehen Sie zu dieser Twitter-Seite, geben Sie den Link ein, den Sie einbetten möchten (z. B. https://twitter.com/TwitterDev), und klicken Sie auf „Eingebettete Timeline".
Sie erhalten einen Code wie diesen:
<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>
Löschen Sie den <script>-Teil, sodass nur Folgendes übrig bleibt:
<a class="twitter-timeline" href="https://twitter.com/SampleTwitterUser?ref_src=twsrc%5Etfw">Tweets by SampleTwitterUser</a>
Fügen Sie dies in Zeile 60 unten ein und ersetzen Sie die XXXXXXXXXX.
Fügen Sie dies zu Desktop - </head> hinzu.
<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}}
<!-- ***********************************************************************
Dies ist der einzige Teil dieser Vorlage, der sich ändert.
Sie müssen XXXXXXXXXX unten durch den von Twitter auf dieser Seite bereitgestellten Link ersetzen, jedoch ohne den <script>-Teil:
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>
Fügen Sie dies dann zu Desktop - CSS hinzu:
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;
}
}
Das sollte funktionieren, aber es könnte sein, dass wir auf unserer Website noch etwas anderes CSS haben, das Sie nicht haben. Daher kann ich nicht garantieren, dass es für jeden perfekt funktioniert.
Das oben Genannte erfordert eine Seitenaktualisierung, damit die Zeitleiste für nicht angemeldete Benutzer angezeigt wird. Das ist ein bekannter Fehler, den wir noch nicht behoben haben.
Es funktionierte auch auf iPads nicht, also habe ich dies hinzugefügt, um es für sie zu deaktivieren:
<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}
Heute Abend schaue ich mir zum ersten Mal genauer die Twitter-Sachen an. Ich glaube, ich habe verstanden, wo die bekannten Fehler behoben werden müssen, aber ich habe im Moment keine Zeit, das zu tun.
Wenn jemand dies verwenden möchte, werde ich es in den nächsten ein oder zwei Tagen zu einer Theme-Komponente zusammenfügen.
Hier ist es als Komponente, die stabil zu sein scheint:
Es fügt eine Twitter-Sidebar zur Discourse-Seite discovery/topics.hbs hinzu, sodass die Sidebar auf allen Seiten wie „Neueste“, „Ungelesen“, „Neu“, „Lesezeichen“ usw. angezeigt wird. Sie wird nicht geladen, wenn der Benutzer nicht eingeloggt ist, da wir es nicht geschafft haben, es ohne Anmeldung zum Laufen zu bringen. Außerdem funktioniert es nicht auf iOS, daher vermute ich, dass es auf iPads deaktiviert ist, aber ich kann das nicht testen.
Um deinen Twitter-Feed statt des Discourse-Feed zu laden, musst du die Anweisungen in Zeile 30 der Datei Desktop head_tag.html befolgen und den korrekten Code in Zeile 39 einfügen.
Ich finde, es sieht viel besser aus, wenn du die Breite des Containers auf den Seiten, die die Sidebar enthalten, erhöhst.
Wo befindet sich diese Datei?
Danke, ich habe <\head> gefunden
Versuchen Sie stattdessen, die Theme-Komponente smartey mit ein paar Beiträgen zu verlinken.
Ich weiß nicht, was ich dir sagen soll. Ich hatte einige Probleme damit, dass der Feed geladen wurde, bis ich folgenden Code hinzugefügt habe:
<script type="text/discourse-plugin" version="0.8">
api.onPageChange(() => {
twttr.widgets.load( document.getElementById("sidebar") );
});
</script>
Da sich dies jedoch in der Komponente befindet, fällt mir bei dir nur noch ein, dass du in deinen Sicherheitseinstellungen nach der Einstellung „Inhaltssicherheitsrichtlinie
Das ist wirklich cool. Ich habe es ausprobiert und es funktioniert gut. Gut gemacht!
Als ich das Thema zum ersten Mal gesehen habe, dachte ich, es würde etwas anders sein. In meiner Community haben viele Mitglieder auch Twitter. Es ist eine Herausforderung, sie dazu zu bringen, auf dem Forum tiefergehende, langfristige Gespräche über Dinge zu führen, über die sie tweeten. Eine Schnittstelle, um einen Feed zu sehen und ein Thema zu einem Tweet zu starten, wäre interessant! Vielleicht könnte der Feed ein Hashtag sein? Oder sie könnten ihren eigenen Twitter-Feed auf ihrem Profil sehen und von dort aus Themen starten.
Danke, Smertey, ich habe die Content Security Policy deaktiviert, und es scheint jetzt zu funktionieren. Hat das Deaktivieren dieser Option irgendwelche Sicherheitsrisiken?