Adding Twitter feed to Hugo page?

support
1

Hi!

Is it possible to add a Twitter feed to a Hugo page? I use Hugo page with this theme https://github.com/LordMathis/hugo-theme-nix/

It would be cool if I could add a Twitter feed on the startpage to the right or on another page. Is this possible in some way? If so, any good tutorial for it? When I googled, I didn’t find any good resource.

Thanks in advance!

2

See the twitter docs on embedding a timeline.

3 Likes
3

Thanks! Now I got html code, since I use this theme: https://github.com/LordMathis/hugo-theme-nix/ - Where would I place the html code I got from your link if I want the Twitter feed to be to the right of the homepage there? It’s index.html in /themes/hugo-theme-nix/layouts but then I would need some css to place it to the right of the page right?

4

Correct.

5

Note you can override any file from your theme, by copying that file to the equivalent location in your project.

 /themes/sometheme/layouts/index.html

can be copied to:

 /layouts/index.html

… and you can tweak it there to preserve your changes.

Looking at the head partial, that theme uses bootstrap, so putting the twitter code in a div, and styling the div with something from bootstrap designed to push layout right, might work.

6

What is the advantage of copying that file to that location? Since if I edit where it is now, then I can test it directly on the site.

7

If you pull the theme down automatically your change is preserved

8

I got it to the right of the page, and set height on div, but the feed still goes way down below the footer of the page(only to the right of the page). So I think it is something with the html code of it, or is it something else?

9

Share your site code, or at least your HTML/CSS, and we’ll take a peek.

1 Like
10

HTML: https://ghostbin.com/paste/nymj2 (added lines 11-13)
CSS: https://ghostbin.com/paste/387gx (added lines 150-153)

11

Instead of using pixels for height

.twitter {
    float: right;
    height: 100px;
}

Try using percentage, and max height

.twitter {
    float: right;
    max-height: 100%;
}

Also, you may want to move <div class="twitter"> inside the container/wrapper

12

It still puts a large gap between the logo and the text below it: https://puu.sh/BYyVl/f230636008.png
Can’t see whole page there but then you scroll down with tweets to the right and at the bottom, the box shows up.

13

I see. Try the below instead.

In your CSS:

.twitter {
    float: right;
}

In your HTML, add the data-height attribute:

<a class="twitter-timeline" data-height="400" href="https://twitter.com/liuhackse?ref_src=twsrc%5Etfw">Tweets by liuhackse</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
1 Like
14

That changed the height of Twitter-feed which is good! But it starts further down on the page and not at the top right, so the space is still there. But if we can get it to start at right top now, we are done.

15

If your HTML is still the same as the ghostbin link above, then the twitter feed should be in the top right.

Check that that part of your HTML looks like this:

<body>
    {{ partial "header.html" . }}
    <div class="twitter">
            <a class="twitter-timeline" data-height="400" href="https://twitter.com/liuhackse?ref_src=twsrc%5Etfw">Tweets by liuhackse</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
        </div>
    <div class="container wrapper">
1 Like
16

Nice now it worked, not sure what I did wrong earlier. There is still more space now between the logo and the title than it was before in the theme(i use the GitHub - LordMathis/hugo-theme-nix: Nix is a simple, minimal theme for Hugo ) but yeah it’s probably fine. I can maybe make the twitter feed smaller. Thanks for the help!