Implementing Social Share on your Website

  Social


Including social share on your website is crucial to making it easy for users and site visitors to share your content with their respective social media networks. Every social network has a different method of enabling you to do this and in a piecemeal approach but with Solodev, we've created a single shortcode to enable your content to be shared across all of the social networks you specify.

Implementing Social Share on your Website

Including social share on your website is crucial to making it easy for users and site visitors to share your content with their respective social media networks. However, every social network has a different method of enabling you to do this. You essentially have to go to every social network and adopt their sharing method.

At Solodev, we’ve made social share extremely easy through basic HTML and CSS.  Within Solodev CMS, shortcodes allow you to add social share buttons using either custom images or Font Awesome icons. We’ve included the necessary code below for either image scenario. Use our plain HTML example to add social share functionality to any website and simplify your code base.

Step 1

Copy the HTML below and paste it into its own file. If you're using Solodev CMS, copy one of the shortcodes and paste it where you'd like your social share widget to populate.

For Solodev shortcode users, specify which social media channels you’d like to enable by specifying “true.” Alternately, set the social media network equal to “false” if you’d like to disable social share to that particular network. Click “Publish” and the social share buttons will populate on the specified page.

Step 2

Replace the URLs with those of the web page the social share widget has been added to. If you aren't using Font Awesome for the social media icons, replace the src="/image" paths with the paths to your respective social media images.

Step 3

Add the CSS below to your website’s stylesheet to add professional styling your social share widget.

If you are using the shortcode for Font Awesome, the social share icons will populate as shown below.

Author

Matthieu McClintock
Contributions Editor here at Solodev. Want to be featured on the Solodev Blog? Get in touch.
Follow me on Twitter

Get started today

Join people and businesses across the globe that trust Solodev.

We never share your information with anyone. Learn more

We use cookies to provide and improve our services. By using our site, you consent to cookies.