Social Widgets

The social media widgets allow you to display links to your social media accounts and embed feeds from your social media accounts into the content of your website.

There are 2 social media widgets available in the DecoNetwork Website Editor:

• Twitter Feed: displays a feed of the latest tweets from a specified public account.
• Instagram Gallery: displays a gallery of photos from a specified public Instagram account.
• Social Network Links: displays icon links to specified social media accounts, including:
  • Facebook
  • Pinterest
  • Twitter
  • Instagram
  • YouTube
  • LinkedIn

In this article...

• Twitter Feed Widget
• To add your Twitter feed to your website
• Social Network Links Widget
• To add your social network links to your website
• To edit the Design settings for the Social Network Links Widget:

Twitter Feed Widget

The Twitter Feed Widget allows you to share recent tweets from a specified Twitter account with visitors to your site. Your website visitors can like and share the tweets on the Twitter Feed.

To add your Twitter feed to your website:

1. Click on the WIDGETS button in the Website Editor Toolbar.
2. Browse the Widgets tab to locate the Twitter Feed Widget in the SOCIAL section.
   
3. Click and drag the Twitter Feed Widget onto your website page.

   Allowable areas the Twitter Feed Widget can be inserted into include:

   • Within rows
   • Within columns
   • Above or below existing widgets

   The Twitter Feed Settings popup will be displayed with the Twitter Feed Properties tab selected.

   
4. Configure the settings for the Twitter Feed Widget.
   • Twitter Username: lets you specify the username for the Twitter account you want the feed to come from. (Omit the "@" symbol).
   • Type: lets you choose an option for displaying the Twitter feed:
     • Profile: displays the latest Tweets from the specified (public) Twitter account.
     • Profile & Replies: displays the latest Tweets and replies to those Tweets from the specified (public) Twitter account.
     • Likes: displays the latest Tweets liked by the specified account.
   • Show Header Footer: when this checkbox is ticked, the header and footer of the Twitter feed will be displayed.

     The header displays the title, "Tweets by" and the Twitter account username.

     The Footer displays:

     • An Embed link, which takes your website visitors to page that generates code for embedding your Twitter timeline on their website or for embedding Follow or Mention buttons linked to your specified Twitter account.
     • A link to your specified Twitter account timeline on the Twitter website.
   • Number of Tweets: lets you choose the number of tweets to display from the options available (1-10).
5. Click OK to apply the changes.
6. Click on the Save button and then click on the Publish button at the right of the Page Settings Bar.

Social Network Links Widget

The Social Network Links Widget allows you add icons to your website that link to your social media profiles.

To add your social network links to your website:

1. Click on the WIDGETS button in the Website Editor Toolbar.
2. Browse the Widgets tab to locate the Social Network Links Widget in the SOCIAL section.
   
3. Click and drag the Social Network Links Widget onto your website page.

   Allowable areas the Social Network Links Widget can be inserted into include:

   • Within rows
   • Within columns
   • Above or below existing widgets

   The Social Network Links Settings popup will be displayed with the Properties tab selected.

   
4. Enter a Panel title. This is the title that will appear in the header area for the social network links panel.
5. Configure the links to your social media accounts.

   By default, the Use Global Links checkbox is ticked. The links that you specify in the Design tab > Social Site Links settings will be displayed in the URL fields for each social network if they have been defined. You can override these to specify different accounts if you wish.

6. Optionally, untick the Use Global Links checkbox and enter your account username in the URL field for each of your social networking accounts.

   E.g.

   
7. Configure the Design settings for the Social Network Links Widget. Click here for instructions.
8. Click OK to apply the changes.
9. Click on the Save button and then click on the Publish button at the right of the Page Settings Bar.

   The widget displays social media icon links for each of the social media services you have specified the URL for, allowing your website visitors to quickly access your social media profiles.

   

To edit the Design settings for the Social Network Links Widget:

1. Mouse over the widget.

   The widget's controls will be displayed.

2. Click on the down arrow beside the Social Network Links Widget icon.
3. Choose the Social Network Links Settings item from the drop-down menu.

   The Social Network Links Settings popup will be displayed.

4. Click on the Design tab.
   
5. Configure the design options for the Social Network Links Widget.
   • Orientation: lets you choose how the icons are placed:
     • Horizontal: displays the icons horizontally.
     • Vertical: displays the icons vertically.
   • Icon Color: lets you set the color of the social network icons. Click on the color spot to select a color using the Color popup. Click here for instructions.
   • Icon Size: lets you specify the size of the icons.
   • Icon Spacing: lets you specify the horizontal spacing between the icon container, in pixels. Use the slider or specify a value between 1 and 50.
   • Background Color: lets you set the fill color of the icon background. Click on the color spot to edit the background color using the Color popup. Click here for instructions.
   • Background Hover Color: lets you set the fill color of the icon background when you move the mouse over it. Click here for instructions on how to configure the hover color.
   • Border Radius: this lets you specify a radius value in pixels to determine how round the icon background's border corners are. Enter a value between 0 and 50.
6. Click OK, once you have finished configuring the settings.
7. Click on the Save button and then click on the Publish button at the right of the Page Settings Bar.