« Back

Social Share Buttons

Technical Blogs July 19, 2013 By Ryan Schuhler Staff

Recently I found myself searching through the internet for how to best add social share buttons to a website. The documentation that exists is helpful, however I decided it might still be useful to share some of my findings.

I discovered, as many of you probably know, that there are mainly two ways to create a social button. The first way is by using a script that the respective social network service provides. I used Facebook, Twitter, LinkedIn and Google Plus, all of which had great documentation. The second way to acheive a share button is by creating a url which contains the information, and then you can put that url wherever you please. Here are the two different methods:

Script versions of social bookmarks
Things to note in this first section, Facebook requires an app id to use this method. So in order to use it you would need to create an app and in the app settings approve the page you are trying to share from. However, doing it this way allows you to write the script once and then call it onclick and pass in the variables you want as many times as you want. The other three services are similar in that they have a script and then use "data-x" attributes to pass in the values you want.

Anchor versions of social bookmarks
The anchor versions are also an option, while they don't have the nice default icons that the scripts provide, they are beneficial for different reasons. The url that you form is very convenient because it very simple and can be used anywhere. You could use it in emails as well as on your website or anywhere else you can paste a link. It should be noted that because it is a url, it is necessary that it is written like one. This means in all of the fields where spaces are required (ie. titles or descriptions) the spaces must written as "%20" so when you want to write the title "Here is the title" it will be written like this "&title=Here%20is%20the%20title".

Hope all of this is useful. There are more things you can do with social buttons, but for my use case this worked great, and it is nice to have all four social buttons in one place. You can see a demo of the code here. The nice thing about Liferay is that you can take this and throw it into a template so that even those who don't know how to code can create and/or populate social buttons for your site. Copy and Paste away!


Some Helpful Resources:

 

No comments yet. Be the first.