# 带有嵌入式 Twitter 动态的社区

**URL:** https://meta.discourse.org/t/communities-with-embedded-twitter-feeds/133962
**Category:** Support
**Created:** [2019 年11 月 20 日 21:10 UTC](https://meta.discourse.org/t/communities-with-embedded-twitter-feeds/133962 "2019-11-20T21:10:04Z")
**Posts on this page:** 20
**Page:** 1

<div class="post-metadata">

### Author: ![Chris27](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/chris27/32/141170_2.png) [@Chris27](https://meta.discourse.org/u/Chris27)
#### Post date: [2019 年11 月 20 日 21:10 UTC](https://meta.discourse.org/t/communities-with-embedded-twitter-feeds/133962/1 "2019-11-20T21:10:04Z")

</div>

你好，

我想请问是否有人知道有哪些 Discourse 社区嵌入了 Twitter 动态？我读过一些关于这个话题的帖子，但想知道是否有可以查看的示例。

提前感谢！

---

<div class="post-metadata">

### Author: ![smrtey](https://avatars.discourse-cdn.com/v4/letter/s/db5fbb/32.png) [@smrtey](https://meta.discourse.org/u/smrtey)
#### Post date: [2019 年11 月 20 日 23:08 UTC](https://meta.discourse.org/t/communities-with-embedded-twitter-feeds/133962/2 "2019-11-20T23:08:26Z")

</div>

您需要注册才能查看，因为我不得不将其从默认主题中移除，因为它会导致未登录用户访问页面时出错。[创建账户](https://unstuckpolitics.com/)，然后从汉堡菜单中选择深色或浅色主题即可实时查看；如果您不想登录，这里也有一张截图。

 ![image](https://global.discourse-cdn.com/meta/original/3X/4/4/440153d585a916b601b82098a5141c4166f81342.png)

---

<div class="post-metadata">

### Author: ![Chris27](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/chris27/32/141170_2.png) [@Chris27](https://meta.discourse.org/u/Chris27)
#### Post date: [2019 年11 月 20 日 23:19 UTC](https://meta.discourse.org/t/communities-with-embedded-twitter-feeds/133962/3 "2019-11-20T23:19:07Z")

</div>

谢谢 @smrtey，我会注册以便更仔细地查看，但截图看起来很棒！

---

<div class="post-metadata">

### Author: ![Anatolia](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/anatolia/32/133777_2.png) [@Anatolia](https://meta.discourse.org/u/Anatolia)
#### Post date: [2019 年11 月 20 日 23:45 UTC](https://meta.discourse.org/t/communities-with-embedded-twitter-feeds/133962/4 "2019-11-20T23:45:09Z")

</div>

这看起来很棒。如果不介意的话，我想知道你是怎么做的。

---

<div class="post-metadata">

### Author: ![smrtey](https://avatars.discourse-cdn.com/v4/letter/s/db5fbb/32.png) [@smrtey](https://meta.discourse.org/u/smrtey)
#### Post date: [2019 年11 月 21 日 00:53 UTC](https://meta.discourse.org/t/communities-with-embedded-twitter-feeds/133962/5 "2019-11-21T00:53:31Z")

</div>

我的同事为侧边栏编写了一个脚本并覆盖了模板，我只添加了 Twitter 动态和一些 Cookie。他说我可以把脚本发到这里，所以我就把添加了 Twitter 内容和 CSS 的版本发出来了。

编辑：好的，下面就是他，所以我会让他来处理。

---

<div class="post-metadata">

### Author: ![torsi](https://avatars.discourse-cdn.com/v4/letter/t/b38774/32.png) [@torsi](https://meta.discourse.org/u/torsi)
#### Post date: [2019 年11 月 21 日 01:05 UTC](https://meta.discourse.org/t/communities-with-embedded-twitter-feeds/133962/6 "2019-11-21T01:05:15Z")

</div>

在任何人使用该代码之前请稍等。这比我预期的要多得多，而且其中大部分对于嵌入式推特内容来说完全没必要。我很快就会发布一个更精简的版本。

---

<div class="post-metadata">

### Author: ![torsi](https://avatars.discourse-cdn.com/v4/letter/t/b38774/32.png) [@torsi](https://meta.discourse.org/u/torsi)
#### Post date: [2019 年11 月 21 日 02:05 UTC](https://meta.discourse.org/t/communities-with-embedded-twitter-feeds/133962/7 "2019-11-21T02:05:58Z")

</div>

好的，这应该能在所有列表页面上嵌入一个 Twitter 动态，作为左侧边栏。您需要编辑第 60 行，填入适合您要嵌入的时间线的 HTML 代码。

1. 访问 [此 Twitter 页面](https://publish.twitter.com/#)，输入您要嵌入的内容（例如 `https://twitter.com/TwitterDev`），然后点击“嵌入时间线”（Embedded Timeline）

2. 您将获得类似以下的代码：  
`<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. 删除 `<script>` 部分，只保留：  
`<a class="twitter-timeline" href="https://twitter.com/SampleTwitterUser?ref_src=twsrc%5Etfw">Tweets by SampleTwitterUser</a>`

4. 将其粘贴到下方第 60 行，替换 XXXXXXXXXX

将此代码添加到 `Desktop - </head>` 中：

```plaintext
<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}}

    <!-- ***********************************************************************
        这是此模板中唯一需要修改的部分。
        您需要将下方的 XXXXXXXXXX 替换为 Twitter 在此页面提供的链接，但请省略 <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>

```

然后将以下内容添加到 `Desktop - CSS` 中：

```plaintext
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;
    }    
}

```

这_应该_能正常工作，但我们的网站上可能还有一些其他 CSS 代码是您没有的，因此我无法保证它对每个人来说都完美无缺。

---

<div class="post-metadata">

### Author: ![torsi](https://avatars.discourse-cdn.com/v4/letter/t/b38774/32.png) [@torsi](https://meta.discourse.org/u/torsi)
#### Post date: [2019 年11 月 21 日 02:10 UTC](https://meta.discourse.org/t/communities-with-embedded-twitter-feeds/133962/8 "2019-11-21T02:10:50Z")

</div>

上述情况需要刷新页面，未登录用户才能看到时间线。这是一个已知问题，我们尚未着手解决。

---

<div class="post-metadata">

### Author: ![smrtey](https://avatars.discourse-cdn.com/v4/letter/s/db5fbb/32.png) [@smrtey](https://meta.discourse.org/u/smrtey)
#### Post date: [2019 年11 月 21 日 02:33 UTC](https://meta.discourse.org/t/communities-with-embedded-twitter-feeds/133962/10 "2019-11-21T02:33:32Z")

</div>

在 iPad 上也无法正常工作，因此我添加了以下代码以在 iPad 上禁用该功能：

```
<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}`

---

<div class="post-metadata">

### Author: ![torsi](https://avatars.discourse-cdn.com/v4/letter/t/b38774/32.png) [@torsi](https://meta.discourse.org/u/torsi)
#### Post date: [2019 年11 月 21 日 02:38 UTC](https://meta.discourse.org/t/communities-with-embedded-twitter-feeds/133962/11 "2019-11-21T02:38:24Z")

</div>

今晚是我第一次仔细查看 Twitter 相关的内容。我觉得我知道如何修复其中已知的 bug，但眼下没时间去做。

---

<div class="post-metadata">

### Author: ![smrtey](https://avatars.discourse-cdn.com/v4/letter/s/db5fbb/32.png) [@smrtey](https://meta.discourse.org/u/smrtey)
#### Post date: [2019 年11 月 21 日 04:55 UTC](https://meta.discourse.org/t/communities-with-embedded-twitter-feeds/133962/12 "2019-11-21T04:55:53Z")

</div>

如果有人想使用这个，我会在接下来的一两天内将其整合为一个主题组件。

---

<div class="post-metadata">

### Author: ![smrtey](https://avatars.discourse-cdn.com/v4/letter/s/db5fbb/32.png) [@smrtey](https://meta.discourse.org/u/smrtey)
#### Post date: [2019 年11 月 21 日 19:47 UTC](https://meta.discourse.org/t/communities-with-embedded-twitter-feeds/133962/13 "2019-11-21T19:47:47Z")

</div>

这是一个看起来相当稳定的组件：

> **[GitHub - oerog/twitter-sidebar](https://github.com/oerog/twitter-sidebar)**
>
> Contribute to oerog/twitter-sidebar development by creating an account on GitHub.

它为 Discourse 的 discovery/topics.hbs 添加了 Twitter 侧边栏，因此该侧边栏会显示在所有“最新”、“未读”、“新主题”、“书签”等页面上。如果用户未登录，它将不会加载，因为我们发现只有在登录状态下才能正常工作。此外，它在 iOS 上也无法运行，我认为在 iPad 上它会被禁用，但我无法对此进行测试。

若要加载您的 Twitter 动态流而不是 Discourse 的，请按照 Desktop head\_tag.html 第 30 行中的说明操作，并在第 39 行添加正确的代码。

我认为，如果增加包含侧边栏的页面中 wrap 元素的宽度，整体效果会好很多。

---

<div class="post-metadata">

### Author: ![aliyosefzai](https://avatars.discourse-cdn.com/v4/letter/a/dc4da7/32.png) [@aliyosefzai](https://meta.discourse.org/u/aliyosefzai)
#### Post date: [2019 年12 月 10 日 18:09 UTC](https://meta.discourse.org/t/communities-with-embedded-twitter-feeds/133962/14 "2019-12-10T18:09:13Z")

</div>

> [@torsi](#):
>
> 将此添加到 `Desktop - </head>` 中。

该文件的位置在哪里？

---

<div class="post-metadata">

### Author: ![aliyosefzai](https://avatars.discourse-cdn.com/v4/letter/a/dc4da7/32.png) [@aliyosefzai](https://meta.discourse.org/u/aliyosefzai)
#### Post date: [2019 年12 月 11 日 14:26 UTC](https://meta.discourse.org/t/communities-with-embedded-twitter-feeds/133962/15 "2019-12-11T14:26:17Z")

</div>

谢谢，我找到了

---

<div class="post-metadata">

### Author: ![aliyosefzai](https://avatars.discourse-cdn.com/v4/letter/a/dc4da7/32.png) [@aliyosefzai](https://meta.discourse.org/u/aliyosefzai)
#### Post date: [2019 年12 月 11 日 14:47 UTC](https://meta.discourse.org/t/communities-with-embedded-twitter-feeds/133962/16 "2019-12-11T14:47:33Z")

</div>

> [@torsi](#):
>
> 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; } }

对我来说不起作用。我只看到了一个“测试时间线”的链接。我已经在 和桌面版 CSS 中添加了这两个脚本。

 ![image](https://global.discourse-cdn.com/meta/original/3X/0/f/0fdddf6f5f70acb6521892e4236b426be087aa27.png)

---

<div class="post-metadata">

### Author: ![torsi](https://avatars.discourse-cdn.com/v4/letter/t/b38774/32.png) [@torsi](https://meta.discourse.org/u/torsi)
#### Post date: [2019 年12 月 11 日 17:58 UTC](https://meta.discourse.org/t/communities-with-embedded-twitter-feeds/133962/17 "2019-12-11T17:58:36Z")

</div>

不妨试试 smartey 主题组件，它已经链接了几个帖子。

---

<div class="post-metadata">

### Author: ![aliyosefzai](https://avatars.discourse-cdn.com/v4/letter/a/dc4da7/32.png) [@aliyosefzai](https://meta.discourse.org/u/aliyosefzai)
#### Post date: [2019 年12 月 12 日 12:59 UTC](https://meta.discourse.org/t/communities-with-embedded-twitter-feeds/133962/19 "2019-12-12T12:59:33Z")

</div>

我安装了主题组件，但不知为何，侧边栏仅显示时间线的链接，而没有显示推文。

 ![image](https://global.discourse-cdn.com/meta/original/3X/5/7/57a4164de5e35cb7340eda72258ae68d19ae5e3e.png)

 ![image](https://global.discourse-cdn.com/meta/original/3X/4/7/47c8274d915821595eea2c8e5b1a1f0b46405e6a.png)

---

<div class="post-metadata">

### Author: ![smrtey](https://avatars.discourse-cdn.com/v4/letter/s/db5fbb/32.png) [@smrtey](https://meta.discourse.org/u/smrtey)
#### Post date: [2019 年12 月 13 日 21:50 UTC](https://meta.discourse.org/t/communities-with-embedded-twitter-feeds/133962/20 "2019-12-13T21:50:02Z")

</div>

我不知道该告诉你什么。我在加载源时遇到了一些问题，直到我添加了：

```html
<script type="text/discourse-plugin" version="0.8">
    api.onPageChange(() => {
        twttr.widgets.load(document.getElementById("sidebar"));
    });
</script>

```

但这部分代码在组件中，所以如果对你不起作用，我能想到的唯一办法是检查你的安全设置中的“内容安全策略”（content security policy）选项。如果你勾选了：  
 ![image](https://global.discourse-cdn.com/meta/original/3X/a/9/a9444f469027bdb82555a9476cb9b0fb56fdf0ec.png)  
那么 Twitter 脚本可能无法正常工作。

---

<div class="post-metadata">

### Author: ![tobiaseigen](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tobiaseigen/32/539204_2.png) [@tobiaseigen](https://meta.discourse.org/u/tobiaseigen)
#### Post date: [2019 年12 月 14 日 01:14 UTC](https://meta.discourse.org/t/communities-with-embedded-twitter-feeds/133962/21 "2019-12-14T01:14:00Z")

</div>

这相当不错。我试用了一下，效果很好。干得漂亮！

刚看到这个主题时，我以为内容会有所不同。在我的社区里，许多成员也在使用 Twitter。要鼓励他们就在推文中提到的话题在论坛上展开更深入、更长线的讨论，确实是个挑战。如果能有一个界面来查看推文流并直接围绕某条推文发起话题，那将会很有趣！也许这个信息流可以基于某个标签？或者，用户可以在自己的个人资料页面上查看自己的 Twitter 动态，并从中发起话题。

---

<div class="post-metadata">

### Author: ![aliyosefzai](https://avatars.discourse-cdn.com/v4/letter/a/dc4da7/32.png) [@aliyosefzai](https://meta.discourse.org/u/aliyosefzai)
#### Post date: [2019 年12 月 15 日 16:13 UTC](https://meta.discourse.org/t/communities-with-embedded-twitter-feeds/133962/22 "2019-12-15T16:13:52Z")

</div>

谢谢 Smertey，我取消了内容安全策略的勾选，现在看起来已经正常工作了。取消勾选这个选项会有什么安全风险吗？

[Next page](https://meta.discourse.org/t/communities-with-embedded-twitter-feeds/133962.md?page=2)