Hello,
I was wondering if anyone knew of any Discourse communities that have an embedded Twitter feed? I’ve read a few topics on the subject but was wondering if there were any examples I could check out.
Thanks in advance!
1 Like
You need to register to see it because I had to take it off the Default Theme because it broke the page for users who aren’t logged in. Create an account and select the Dark or Light theme from the Hamburger menu to see it live, or here’s a screen shot if you don’t want to bother signing in.
8 Likes
This is looking great. I would like to know how did you made it, if you don’t mind.
My colleague made a script and template override for the sidebar and I just added the twitter feed and some cookies. He said I could post the script here, so here it is with the twitter stuff added and the css.
edit: Okay, that’s him below, so I’ll let him handle it
4 Likes
Hang on before anybody uses that code. It’s a lot more than I was expecting to be posted and most of it is completely unneccessary for an embedded twitter feed. I’ll have a much smaller version up shortly.
6 Likes
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.
-
Go to this twitter page and enter what you you want to embed, something like
https://twitter.com/TwitterDev, and click on Embedded Timeline -
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> -
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> -
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 Likes
The above requires a page refresh for the timeline to show up for non-logged in users. That’s a known bug we haven’t gotten around to solving yet.
2 Likes
It also wasn’t working on iPads so I added this to turn it off for them
<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}
3 Likes
Tonight is actually the first time I’ve looked closely at any of the twitter stuff. I think I see where to fix the known bugs in it, but I don’t have time to do it right now.
1 Like
If anyone wants to use this I’ll put it all together into a theme component in the next day or two.
2 Likes
Here it is as a component that seems to be stable
https://github.com/oerog/twitter-sidebar
It adds a Twitter Sidebar to the Discourse discovery/topics.hbs, so the sidebar will display on all the Latest, Unread, New, Bookmarks etc pages. It will not load if the user is not logged in because we couldn’t get it to work unless you’re logged in. It also doesn’t work on iOS so I think it is disabled on iPads, but I can’t test that.
To get it to load your twitter feed instead of Discourse’s, you need to follow the instruction on line 30 in Desktop head_tag.html and add the correct code on line 39.
It think it looks a lot better if you increase the width of the wrap on pages that include the sidebar.
9 Likes
What is location of this file ?
Thanks I found <\head>
Not working for me. I only see a link test timeline. I did add both scripts to <\head> & css desktop.
Try the theme component smartey linked a few posts up instead.
I installed the theme component, but, for some reason it is still showing me only link for time line on the side bar not the tweets.
Don’t know what to tell you. I had some issues with it loading the feed until I added
<script type="text/discourse-plugin" version="0.8">
api.onPageChange(() => {
twttr.widgets.load( document.getElementById("sidebar") );
});
</script>
But that’s in the component so if it’s not working for you the only thing I can think of is look in your Security Settings for the content security policy setting and if you have this checked
I don’t think the twitter scripts will work.
This is pretty neat. I tried it out and it works well. Nice job!
When I first saw this topic I thought it was going to be a bit different. In my community, many members also have Twitter. It is a challenge to encourage them to have deeper, longer term conversations on the forum about things they tweet about. An interface to see a feed and start a topic about a tweet would be interesting! Maybe the feed could be a hashtag? Or they could see their own twitter feed on their profile and start topics from there.
2 Likes
Thanks Smertey, I unchecked content security policy it seems to be working now. Unchecking this option has any security risks ?
1 Like