Software Tutorials

Cate

How to: Add Social Widgets to Your Website

1 CommentFriday, 11 April 2014  | 

Skill Level: Beginner

The majority of social sites have their own widgets that can be placed on your website. A widget is a small application created by the social site and added to your website to display something related to your social profile.  All social widgets can be added to your website either as a block or within page content but the code must be placed within the Source otherwise it won't work. 

To add a widget to your site using a block follow these steps:

  1. In the admin console of your website go to Blocks > Block Manager and click on Create New
  2. Give your block a name and click on the Source button at the top left of the WYSIWYG, then paste in your code
  3. Assign the block to your layouts as normal

To add a widget to your site within a page follow these steps:

  1. In the admin console go to Content > Page Manager and either click on Create New or click into the page you want to add it to
  2. In the Properties tab click on the WYSIWYG icon
  3. Click on the Source button at the top left of the WYSIWYG and paste in your code

Facebook

Facebook offers two widgets, the Page Posts, which shows the five latest posts to your page, and the Friend's Faces, which displays the profile pictures of the people who already like your Facebook page or you can have a combination of the two. Below we have shown the widget with both the Page Posts and Friend's Faces displaying.

Activity Feed

Facebook Widget
(Image used for display only)

To add the Facebook widget to your site just follow these steps:

  1. Go to https://developers.facebook.com/docs/plugins/page-plugin
  2. Type in your Facebook Page URL in the first field
  3. Don't worry about setting a width but make sure you put the height you want the widget to be in the Height field
  4. Tick the Adapt to plugin container width option
  5. Choose what you want to display on the widget by selecting any of the Use Small Header, Hide Cover Photo, Show Friend's Faces and Show Page Posts options
  6. Once you are happy click on the Get Code button
  7. Highlight and copy the JavaScript code and paste this into the Opening body (developers) field in the Site tab of your template
  8. Add the second piece of code to your website as instructed above

Twitter

There are a few widgets available from Twitter but the main one is the User Timeline.  This displays all of your latest tweets and, optionally, your replies to others.

Twitter timeline
(Image used for display only)

To add the Twitter User Timeline to your site follow these steps:

  1. Go to https://twitter.com/settings/widgets/new
  2. Make sure your Twitter username is correct in the Username field
  3. Choose whether you want to include your replies and whether you want the widget to auto expand photos
  4. Choose a light or dark theme and set a colour for the link text
  5. Click on Create Widget
  6. Highlight and copy the code
  7. Add the code to your website as instructed above

Pinterest

Pinterest offers several useful widgets for your website, the Pin Widget, which displays just one of your pins, the Profile Widget, which displays a selection of all of your pins and the Board Widget, which shows a selection of pins from one of your boards.

For all Pinterest widgets go to http://business.pinterest.com/widget-builder

Pin Widget

Pin widget
(Image used for display only)

To add the Pin Widget to your website follow these steps:

  1. Select the Pin Widget on the widget page and add in the full URL of the pin you want to use
  2. Click on the Build It! button and highlight and copy the code
  3. Add the code to your website as instructed above

Profile Widget

Pin profile widget
(Image used for display only)

To add the Profile Widget to your website follow these steps:

  1. Select the Profile Widget on the widget page and add in the full URL of your Pinterest profile
  2. Choose whether you want a Square widget, a Sidebar widget which is portrait in layout, a Header widget which is landscape in layout or a Roll Your Own widget which allows you to set your own sizes
  3. Click on the Build It! button and highlight and copy the code
  4. Add the code to your website as instructed above

Board Widget

Pin Board widget
(Image used for display only)

To add the Board Widget to your website follow these steps:

  1. Select the Board Widget on the widget page and add in the full URL of the board you want to use
  2. Choose whether you want a Square widget, a Sidebar widget which is portrait in layout, a Header widget which is landscape in layout or a Roll Your Own widget which allows you to set your own sizes
  3. Click on the Build It! button and highlight and copy the code
  4. Add the code to your website as instructed above

Google+

Google+ offers a very limited number of widgets for your website. The main two that can be used to promote your Google+ page are the Badge widget, which displays your Google+ profile information and the +1 button so they can follow you, and the Embedded Posts widget, which allows you to display a single post from any profile on Google+.

Badge

Google Plus badge
(Image used for display only)

To add the Google+ Badge to your website follow these steps:

  1. Go to https://developers.google.com/+/web/badge/
  2. Choose the correct profile or page from the Google+ User drop-down
  3. Select whether you want to use the Google+ Icon or Badge
  4. Choose the layout and set a width
  5. Choose whether you want a dark or light theme
  6. Set whether you want it to display your cover photo and tagline or not
  7. Set the language
  8. Highlight and copy the code
  9. Add the code to your website as instructed above

Embedded Post

Google Plus embedded post
(Image used for display only)

To add the Embedded Post to your website follow these steps:

  1. Go to the page where the post you want to embed is displayed
  2. Click on the down arrow at the top right of the post
  3. Select Embed Post
  4. In the pop-up box copy the code under <!-- Place this tag in your head or just before your close body tag. -->
  5. Go to Site > Template > Template Manager > default template > Site tab in your website's admin console
  6. Click on the Edit icon next to the Head Section (developers) field and paste in the code
  7. Highlight and copy the code under <!-- Place this tag where you want the widget to render. -->
  8. Add the code to your website as instructed above

LinkedIn

There are a lot of widgets available on LinkedIn but the main two that you may want to use, depending on what type of profile you have, are the Member Profile widget for an individual's profile or the Company Profile widget for a company's profile.

Member Profile

LinkedIn Memebr Profile
(Image used for display only)

To add the Member Profile to your website follow these steps:

  1. Go to https://developer.linkedin.com/plugins/member-profile-plugin-generator
  2. Enter the web address to your public profile (not available if your profile is hidden) in the Public Profile URL field
  3. Choose Inline in the Display Mode options
  4. Decide whether you want your LinkedIn connections to show underneath
  5. Click on Get Code and highlight and copy the code
  6. Add the code to your website as instructed above

Company Profile

LinkedIn Company Profile
(Image used for display only)

To add the Company Profile to your website follow these steps:

  1. Go to http://developer.linkedin.com/plugins/company-profile-plugin
  2. Enter the name of your company as it appears in LinkedIn in the Company Name field
  3. Choose Inline in the Display Mode options
  4. Decide whether you want your LinkedIn connections to show underneath
  5. Click on Get Code and highlight and copy the code
  6. Add the code to your website as instructed above

Now your customers have no excuse but to follow you on Facebook or tweet you on Twitter and if you missed our previous posts on How to: Add Social Share Buttons to Your Website and How to: Link Your Website to Your Social Profiles just visit our blog.


Mike Julien
Sunday, 31 May 2015  |  10:40

I couldn't work out how to get Twitter on my site, wasted a lot of time until I found this and sorted in 5 mins, thanks