Beginner needs guidance with 'Share buttons'

support
1

Hello all,

Am pretty new to static sites and generators. A few years ago in high school I did some html+css but not much web stuff besides that…

I have a web-page and I’d like to include sharing buttons so people can share the website via their twitter, ig, fb etc accounts. I don’t have fb pages I want the website visitors to be redirected to, just the ability to share the site via the above said platforms…

I was looking at this: http://hugocodex.org/add-ons/share-buttons/ article about share buttons, however I could’t get it to work…

I had to manually create the partials folder within my layouts dir at the root level of the site. I downloaded the file and set it’s permissions to 644 but when I put:
{{ partial "share-buttons.html" . }}
in my markdown it just is seen as text…

I’m pretty sure this is a pretty simple fix for somebody who knows what he’s doing but I am really lost with all the terminology around hugo…

My directory structure is below:

/home/opasen/test04
.
├── config.toml
├── content
│   ├── bg_history
│   │   ├── images
│   │   │   └── history.jpeg
│   │   └── _index.md
│   ├── images
│   │   ├── r1.jpg
│   │   └── rr1.jpg
│   └── _index.md
├── data
├── layouts
│   └── partials
│       └── share-buttons.html
├── resources
│   └── _gen
│       ├── assets
│       └── images
├── static
│   └── images
└── themes
    └── ananke
        ├── archetypes
        │   └── default.md
        ├── CHANGELOG.md
        ├── data
        │   └── webpack_assets.json
        ├── exampleSite
        │   ├── config.toml
        │   ├── content
        │   │   ├── about
        │   │   │   └── _index.md
        │   │   ├── contact.md
        │   │   ├── _index.md
        │   │   └── post
        │   │       ├── chapter-1.md
        │   │       ├── chapter-2.md
        │   │       ├── chapter-3.md
        │   │       ├── chapter-4.md
        │   │       ├── chapter-5.md
        │   │       ├── chapter-6.md
        │   │       └── _index.md
        │   └── static
        │       └── images
        │           ├── esmeralda.jpg
        │           ├── notebook.jpg
        │           ├── Pope-Edouard-de-Beaumont-1844.jpg
        │           └── Victor_Hugo-Hunchback.jpg
        ├── i18n
        │   ├── bg.toml
        │   ├── de.toml
        │   ├── en.toml
        │   ├── es.toml
        │   ├── fr.toml
        │   ├── it.toml
        │   ├── nl.toml
        │   ├── no.toml
        │   ├── pt.toml
        │   ├── ru.toml
        │   ├── sv.toml
        │   ├── uk.toml
        │   └── zh.toml
        ├── images
        │   ├── screenshot.png
        │   └── tn.png
        ├── layouts
        │   ├── 404.html
        │   ├── _default
        │   │   ├── baseof.html
        │   │   ├── list.html
        │   │   ├── single.html
        │   │   ├── taxonomy.html
        │   │   └── terms.html
        │   ├── index.html
        │   ├── page
        │   │   └── single.html
        │   ├── partials
        │   │   ├── commento.html
        │   │   ├── func
        │   │   │   └── GetFeaturedImage.html
        │   │   ├── head-additions.html
        │   │   ├── i18nlist.html
        │   │   ├── menu-contextual.html
        │   │   ├── new-window-icon.html
        │   │   ├── page-header.html
        │   │   ├── site-favicon.html
        │   │   ├── site-footer.html
        │   │   ├── site-header.html
        │   │   ├── site-navigation.html
        │   │   ├── site-scripts.html
        │   │   ├── social-follow.html
        │   │   ├── social-share.html
        │   │   ├── summary.html
        │   │   ├── summary-with-image.html
        │   │   ├── svg
        │   │   │   ├── facebook.svg
        │   │   │   ├── github.svg
        │   │   │   ├── gitlab.svg
        │   │   │   ├── instagram.svg
        │   │   │   ├── keybase.svg
        │   │   │   ├── linkedin.svg
        │   │   │   ├── mastodon.svg
        │   │   │   ├── medium.svg
        │   │   │   ├── new-window.svg
        │   │   │   ├── rss.svg
        │   │   │   ├── slack.svg
        │   │   │   ├── stackoverflow.svg
        │   │   │   ├── twitter.svg
        │   │   │   └── youtube.svg
        │   │   └── tags.html
        │   ├── post
        │   │   ├── list.html
        │   │   ├── summary.html
        │   │   └── summary-with-image.html
        │   ├── robots.txt
        │   └── shortcodes
        │       └── form-contact.html
        ├── LICENSE.md
        ├── package.json
        ├── package-lock.json
        ├── README.md
        ├── src
        │   ├── css
        │   │   ├── _code.css
        │   │   ├── _hugo-internal-templates.css
        │   │   ├── main.css
        │   │   ├── postcss.config.js
        │   │   ├── _social-icons.css
        │   │   ├── _styles.css
        │   │   └── _tachyons.css
        │   ├── js
        │   │   └── main.js
        │   ├── package.json
        │   ├── package-lock.json
        │   ├── readme.md
        │   └── webpack.config.js
        ├── stackbit.yaml
        ├── static
        │   ├── dist
        │   │   ├── css
        │   │   │   ├── app.1cb140d8ba31d5b2f1114537dd04802a.css
        │   │   │   ├── app.4fc0b62e4b82c997bb0041217cd6b979.css
        │   │   │   ├── app.7e7787cc1402d7de28bc90f7e65adf96.css
        │   │   │   └── app.e6e75cdafe2e909dacfabeb26857f994.css
        │   │   └── js
        │   │       └── app.3fc0f988d21662902933.js
        │   └── images
        │       └── gohugo-default-sample-hero-image.jpg
        └── theme.toml

41 directories, 108 files
2

AFAIK if it’s a partial, it shouldn’t be in your markdown file, but a template file like layouts/_default/single.html.

3

Thanks sephore,

I created the directory and html file and added the line suggested from the hugo_article.
It looks like this now:

┌─[opasen@anna] - [~/test04] - [Tue Sep 01, 13:14]
└─[$] <git:(master*)> tree layouts 
layouts
├── _default
│   └── single.html
└── partials
    └── share-buttons.html

2 directories, 2 files
┌─[opasen@anna] - [~/test04] - [Tue Sep 01, 13:14]
└─[$] <git:(master*)> cat layouts/_default/single.html 
{{ partial "share-buttons.html" . }}
┌─[opasen@anna] - [~/test04] - [Tue Sep 01, 13:15]
└─[$] <git:(master*)>

But the site is still not showing the share buttons; do I have to take any additional steps, add something to the markdown, config.toml?

Sorry for the noob questions but I really have some content I’d like to share online and I believe getting the buttons working will greatly help in this regard.

Thanks.

4

I’m not familiarized with this theme and maybe you should look at the default templates to understand how it works, like this file in particular:

Maybe wouldn’t be easier simply to replace that line?

Also, take some time to read the documentation. Mainly Introduction and Define the Base Template.