Courses

B. Article Detail
Share Button
Share Button

Description

Lesson transcript

In the previous video we built a layout structure and we linked it to its corresponding content. Now we’re going to customise the share button to finish this page. The share buttons are here in our docmap and are these elements.


To place a share button on another page, all you have to do is come here to the UI objects panel, and then to the rich media area, and we can find this component here. All you have to do is place it in your layout.


To define these buttons all you have to do is select the button, go to the data panel, where you will find a series of fields to edit the text of this share function. We can select the platform that we want to share, so in this case it will be Facebook but we have other platforms we can select including Twitter, Google Plus, LinkedIn and Pinterest. 


We can place the URL share link, the title, the message subject, the body of the message and the message footer here. 


I wouldn’t recommend defining these fields in this area. I wouldn’t recommend this because, if we do this any article details such as the title or message subject will be the same for every article we share. And we want to make sure that these shared fields are specific to each separate article we want to share. 


So all you have to do is select the share button, come here to dynamic data and style, and we can link the fields that determine the shared text to the articles collection’s attributes. 


So we don’t need to define the URL, here in title we can select the attribute that contains the title of the article, this is it here. Here in the subject, we can add for example, the author’s name and in message we can link a description. We can also link the article's image.


So what we’re going to share in this case is the article’s image, a description of the article, the name of the artist and the article's title. This way, each detail page will show the corresponding article’s content. 


So as you can see it’s really quick and easy to customise share buttons. We have the Twitter share button here which can be updated in the exact same way.

Back

Share Button

Description