How to integrate Social Media on your Website
Jan 5, 2021
--
Social Media Integration 656x400

How to integrate Social Media on your Website

With 321 million new users last year, 3.8 billion people are now using social media. That is half the world’s population. This reach is the reason why almost every company on the planet tries to participate in this trend.

Companies benefit from social media in different ways: By posting helpful content on social channels a brand attracts social media users to its website generating more traffic. By easily enabling website visitors to share content from the company’s website on social media a brand expands its reach without paying for advertising. And by promoting social media channels on its website, a brand can encourage visitors to follow its social channels building a long-lasting relationship with the band.

In this blog, we will look at ways to easily manage social media ‘follow us’ icons and ‘share’ buttons on your website. We will also show how to embed social media posts.

Invite your visitors to follow you

Icons to follow a company on social media are the easiest way to make website visitors aware of a company’s social channels. A ‘follow’ button invites visitors to follow you on your social media channels and stay up to date. The number of followers on each channel is a good indicator of which channels are popular with your audience.

With Magnolia’s configurable templates you can choose freely where to place these buttons. Many companies choose to position them in the footer. In the following, we show you two ways to implement ‘follow’ buttons in Magnolia.

Social media icons from our travel demo

In our travel demo, we use two components to implement the ‘follow’ icons for social media, linkList and link. The linkList component processes any number of link components. We created one for each channel by providing the URL and an image.

1-Link-Dialog

The link URL can be a download URL, an external link, or a link to a Magnolia page. We choose ‘external link’ for our social media icons.

This is what the final result looks like:

2-Follow-Buttons-Link

You can find our code examples on Git:

Social media icons with Font Awesome

Another way to create social media icons is to use an icon set like Font Awesome. The advantage of this approach is that you don’t have to create and upload an image. All the icons you need are already included in the set.

This solution uses one component called socials to link to all social networks. You only have to define the URLs of your social channels, all of which are optional.

3-Social-Medias-Dialog

This is what the final result looks like:

4-Social-Buttons-Font-Awesome

You can find our code examples on Git:

Deploying your CMS to Azure Cloud

Our free blueprints guide you through deploying your CMS to Azure Cloud, using Magnolia CMS as an example.

Make sharing content easy

Similar to the social media icons mentioned above, ‘share’ buttons are another way to connect your website to social media.

A ‘share’ button makes it easy for visitors to share your content via their social media accounts. It is useful on pages that are worth sharing, for example your blog articles, company news, or product pages.

Twitter button

The Twitter API makes it easy for you to embed buttons, tweets, or an entire timeline on your website. The twitter-share component adds a Twitter ‘share’ button to a Magnolia template. A component dialog is not necessary because the component does not require any parameters.

5-Twitter-Tweet-Button

You can find our code examples on Git:

Facebook button

Similarly, the facebook-share component uses the Facebook API to add a ‘share’ button.

6-Facebook-Share-Button_on_white

Facebook allows you to create the button in two sizes. If you want to be able to choose the size, you need a component dialog.

7-Facebook-Share-Dialog

You can find our code examples on Git:

Embedding social media posts

Embedding social media posts can be useful in several places on your website. In blogs or news articles, they can underline a statement or attitude.

Embedding a Facebook post

By using the Facebook API you can add a Facebook post to a Magnolia component.

9and9-Facebook-Embedded-Post

You only need to enter the post’s URL in the component dialog. If desired, the content author can be given the option to specify the width of the post.

10-Facebook-Embedded-Dialog

You can find our code examples on Git:

Why use components

Content authors often ask why we recommend using components to add simple buttons. From their point of view, it would be much more flexible to use a generic HTML component that they can edit themselves.

This is possible in Magnolia, but there are some good reasons to work with components instead:

  1. If Facebook, Twitter or any other social network changes how to implement a button  you only have to change it in one place. Otherwise, the content author would have to find and update every occurrence in the system.

  2. Components give administrators more control over the scripts included on your website. Allowing content authors to include any scripts that might raise security concerns.

  3. It is generally a good practice to separate content and HTML.

Conclusion

Social media can provide a lot of value to your business. This is why marketing and development teams should consider which social channels to link to from their website and how to implement icons, buttons and embedded posts.

About the author

Tobias Kerschbaum

Solution Architect, Magnolia

As a solution architect, Tobias works closely with customers and partners, sharing his knowledge and expertise. He helps organizations evaluate and understand how Magnolia can meet project requirements. He contributes to the project plan and ensures the right modules and technologies are chosen. Besides delivering tailored workshops, Tobias also gets involved when customers and partners need to implement new functionality or custom requirements.