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.

• HTML
• Custom Images
• Font Awesome

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.