Comunità con feed Twitter incorporati

Supporto
7

OK, this should provide an embedded twitter feed as a left sidebar on all list pages. You will need to edit line 60 with some html appropriate to the timeline you want to embed.

  1. Go to this twitter page and enter what you you want to embed, something like https://twitter.com/TwitterDev, and click on Embedded Timeline

  2. You’ll get some code like this:
    <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>

  3. Delete the <script> portion so you just have
    <a class="twitter-timeline" href="https://twitter.com/SampleTwitterUser?ref_src=twsrc%5Etfw">Tweets by SampleTwitterUser</a>

  4. Paste that into line 60 below, replacing the XXXXXXXXXX

Add this to 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}}


    <!-- ***********************************************************************
        This is the only part of this template that changes.
        You need to replace XXXXXXXXXX below with the link provided by Twitter on this page. but omit the <script> portion:
        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>

Then add this to 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;
    }    
}

That should work, but we may have some other CSS floating around on our site that you don’t, so I can’t guarantee it will be perfect for everybody.

9 Mi Piace