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 3 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

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.

Instagram Gallery Widget

The Instagram Gallery Widget allows you to share recent photos from a specified Instagram account with visitors to your site.

To add your Instagram gallery to your website:

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

   Allowable areas the Instagram Gallery Widget can be inserted into include:

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

   The Instagram Gallery Settings popup will be displayed with the Account tab selected.

   
4. Configure the settings for the Instagram Gallery Widget.
   • Instagram Account: lets you specify the username of the Instagram account you want the photos to come from. Click Connect once you have entered the username to connect to the account.
   • Number of Items: lets you specify the number photos from the specified Instagram account that you want to be displayed in the gallery.
5. Configure the Design settings for the Instagram Gallery Widget. Click here for instructions.
6. Click OK to apply the changes.
7. Click on the Save button and then click on the Publish button at the right of the Page Settings Bar.

To configure the Design settings for the Instagram Gallery Widget:

1. Mouse over the widget.

   The widget's controls will be displayed.

2. Click on the down arrow beside the Instagram Gallery Widget icon.
3. Choose the Instagram Gallery Settings item from the drop-down menu.
   

   The Instagram Gallery Settings popup will be displayed.

4. Click on the Design tab.
   
5. Select from one of the pre-configured Instagram Gallery Layout options.
6. Configure the rest of the design options for the Instagram Gallery Widget.

   The settings will vary depending on the layout selected.

   • Panel Title: lets you specify the title that will appear in the header area for the Instagram gallery panel.

     Click on the brush icon to configure the font settings for the panel title using the Font popup. Click here for instructions on how to configure settings in the Font popup.

   • Thumbnail size: lets you set the dimensions of the image thumbnails. You can choose a preset size or choose Custom Size to specify a custom size.

     The following fields will be displayed when you select Custom Size:

     • Thumbnail Width: lets you specify the width of the image thumbnail in pixels.
     • Thumbnail Height: lets you specify the width of the image thumbnail in pixels.
   • Crop Thumbnail: crops the product image thumbnail to square when "Yes" is selected. Leaves the image in its original shape when "No" is selected.
   • Image Effects: lets you apply filter and transform effects to the thumbnail images.
   • Hover Image Effects: lets you apply filter effects, transform effects and hover animation to the thumbnail images for the hover state.

     Click here for instructions on how to add image effects.

   • Thumbnail Link: lets you choose whether the image thumbnail will be linked to the Instagram post.
     • None: no link will be applied to the image thumbnails.
     • Open in New Tab: image thumbnails will be linked to the Instagram post and the post will open in a new tab when the thumbnail is clicked.
   • Thumbnail Title: lets you choose an option for the display and placement of the thumbnail image's title.
     • Don't Show: no title is displayed.
     • Show on Image: displays the title on the image.
     • Show on Image on Rollover: displays the title on the image when the mouse pointer hovers over the image.
     • Show Above: displays the title above the image.
     • Show Above on Rollover: displays the title above the image when the mouse pointer hovers over the image.
     • Show Below: displays the title below the image.
     • Show Below on Rollover: displays the title below the image when the mouse pointer hovers over the image.
7. Click OK, once you have finished configuring the settings.
8. 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.