Add social links to a site#
In this tutorial, you run this repository's development site, add a GitHub link to the site's profiles, and move it to the front. Then you limit the home page's Follow Us block to two networks.
By the end, you will have changed what every page of the site shows, from one form.
Before you start#
Install the site#
Clone the repository, and install it.
git clone https://github.com/plonegovbr/social-media.git
cd social-media
make install
The installation takes several minutes. It installs both packages, and creates a site with example content.
Start the site#
Start the backend.
make backend-start
Leave it running. In a second terminal, from the same directory, start the frontend.
make frontend-start
When the frontend is ready, open http://localhost:3000 in your browser.
Look at the links#
Under its title, the home page shows a Follow Us block with four icons: X, BlueSky, Facebook, and Instagram. Scroll to the footer: it shows the same four icons, in the same order.
Rest the pointer on an icon. Notice that it moves up a little.
Log in#
Open http://localhost:3000/login, and log in with the username admin and the password admin.
Open the site's settings#
On the home page, select Edit in the toolbar.
In the sidebar, open the Social Media section.
The Profiles field is a table with four rows: X, BlueSky, Facebook, and Instagram. It is the list both rows of icons came from.
Add a link#
Select Add Link, beside the Profiles label. A dialog opens.
In Network, choose GitHub.
Leave Title empty.
In Target, type
https://github.com/plonegovbr, and press Enter.Select Save in the dialog.
The table now has five rows, and GitHub is the last.
Its row shows the GitHub icon, and the title GitHub: a link saved without a title takes its network's name.
Look at the Follow Us block on the page: it already shows a fifth icon, although you have not saved the page.
Put it first#
Drag the GitHub row by its handle to the top of the table.
The GitHub icon moves to the front of the Follow Us block.
Limit the block to two networks#
Select the Follow Us block on the page. The sidebar now shows the block's settings.
Under Filter Networks, select Add Network.
In Network, choose GitHub, and select Save in the dialog.
Select Add Network again, choose BlueSky, and select Save.
The block shows two icons now: GitHub, then BlueSky. Notice that Network offered only the networks the site links to.
Save#
Select Save in the toolbar.
The home page shows the block with GitHub and BlueSky. Scroll to the footer: it shows all five icons, with GitHub first.
What you did#
You changed the site's links once, on the site root, and every place that shows them followed: the footer, and the Follow Us block. You gave the block a list of networks, and it kept the site's links for those networks, in its own order.
Next steps#
Settings that live on content explains why the links live on the site root.
How to give a section its own links gives a part of the site links of its own.
How to add or change a network adds a network that is not in the list.