LiveWhale CMS

Welcome, Guest Login

Support Center

Social Media

Last Updated: Nov 25, 2015 10:42AM PST
The following tutorial is based on work contributed by Lewis & Clark.
 

Example


Enabling the Social Media Widgets

The following preparations step you through setting up the necessary api keys to enable the widgets needed for this tutorial:


Creating the Widgets

A set of widgets are created to gather all your social media content and presented as shown in the example section.
 
  • A Stream Widget is used to pull the following widgets together:
    • Twitter
    • Flickr
    • YouTube
    • Instagram (available upon request)
    • Facebook

In the following instructions we will show you how to create the widgets above

​Twitter Widget

The following instructions will provide the details used to create a twitter feed for your social media page.
  1. Create a new twitter type widget 
  2. Add the following criteria through the widget editor
    • Group - "me"
    • Display feed for username(s) - add your twitter username name here
    • Apply custom class - add the "js-isotope" class 
    • Format your results - In this example the formatting was provided by Lewis & Clark, but you can customize the results to suit your branding.
      The widget syntax will resemble the following:
      <widget type="twitter">
       <arg id="group">me</arg>
       <arg id="username">your-twitter-username</arg>
       <arg id="class">js-isotope</arg>
       <arg id="format">
       <div class="lc-social-media-box lc-twitter">
        <span class="hidden">Twitter</span>
        <div class="lc-social-media-content cf">
         <span class="icon icon-twitter-brand"></span>
         <div class="lw_twitter_tweet">{tweet}</div>
         {<div class="lc-social-media-picture">|picture|</div>}
         <div class="lc-twitter-actions">
           <span class="lc-twitter-reply">
            <span class="icon icon-reply"></span>
            {reply}
           </span>
           <span class="lc-twitter-retweet">
            <span class="icon icon-reply"></span>
             {retweet}
            </span>
            <span class="lc-twitter-favorite">
             <span class="icon icon-reply"></span>
             {favorite}
            </span>
           </div>
         </div>
         <div class="lc-social-media-footer cf">
          <div class="lc-social-media-date">{date}</div>
         </div>
        </div>
      </arg>
      </widget>
  3. From the Widget Library take note of the "Get Code" link. You will need to retrieve the widget code to insert into your social media pages. 
 

YouTube Widget

Next, we will use a feed widget to gather our YouTube content
  1. Create a new feed type widget 
  2. Add the following criteria through the widget editor
    • feed URL(s) - Add your youtube rss feed here
    • Format results with -  In this example the formatting was provided by Lewis & Clark, but you can customize the results to your suit your branding.
    • Apply custom class: js-isotope

    The widget syntax will resemble the following:
    <widget type="feeds">
    <arg id="url">http://www.youtube.com/rss/user/your-username/videos.rss</arg>
    <arg id="format">
     <div class="lc-social-media-box lc-youtube">
      <span class="hidden">YouTube</span>
      <div  class="lw_feeds_description">{description}</div>
      <div  class="lw_feeds_date">{date}</div>
       <span class="icon icon-youtube-brand"></span>
     </div>
    </arg>
    <arg id="class">js-isotope</arg>
    </widget>
  3. From the Widget Library, take note of the "Get Code" link. You will need to retrieve the widget code to insert into your social media web pages. 

Instagram Widget

The following instructions will provide the details used to create a Instagram feed for your social media page.
  1. Create a new Instagram type widget
  2. Add the following criteria through the widget editor
    • Display feed for username(s) - Add your instagram username here
    • Format results with -  In this example the formatting was provided by Lewis & Clark, but you can customize the results to your suit your branding.
    • Apply custom class: js-isotope
  3. The widget syntax will resemble the following:
    <widget type="instagram">
    <arg id="username">your username</arg>
    <arg id="format">
    <div class="lc-instagram lc-social-media-box">
       <span class="hidden">Instagram</span>
       <div class="lc-social-media-header">
         <span class="icon-instagram-brand"></span>
         <span class="lw_instagram_username">{username}</span>
        </div>
      <div class="lc-social-media-content">
       <div class="lc-social-media-picture lw_instagram_image">
         <a href="{link}"><img src="{image_lg_src}"/></a>
        </div>
      </div>
     <div class="lc-social-media-footer cf">
      <div class="lc-social-media-caption lw_instagram_caption">{caption}</div>
      <div class="lw_instagram_date">{date}</div>
     </div>
     </div>
    </arg>
    <arg id="class">js-isotope</arg> 
    </widget>
  4. From the Widget Library, take note of the "Get Code" link. You will need to retrieve the widget code to insert into your social media web pages. 
 

Facebook Widget

  1. Create a new feed type widget 
  2. Add the following criteria through the widget editor
    • feed URL(s) - Add your facebook rss feed here: https://www.facebook.com/feeds/page.php?format=rss20&id=<insert page id here>
    • Format results with -  The following demonstrates an example formatting option, but you can customize the results to your suit your branding.
    • Apply custom class: js-isotope

      The widget syntax will resemble the following:
      <widget type="feeds">
         <arg id="url">
         http://www.facebook.com/feeds/page.php?format=rss20&id=<insert your id here>
        </arg>
        <arg id="max">15</arg>
        <arg id="format">
          <div class="lc-social-media-box lc-facebook">
            <span class="hidden">Facebook</span>
           <div class="lc-social-media-header">
             <span class="icon icon-facebook-brand"></span>
           </div>
          <div class="lc-social-media-content">{message}
            {<div class="lc-social-media-picture">|image|</div>}
           </div>
           <div class="lc-social-media-footer">
            <div class="lc-social-media-username">{from}</div>
           <div class="lc-social-media-date">{date}</div>
            </div>
          </div>
      ​   </arg>
         <arg id="minutes">5</arg>
      </widget>
  3. From the Widget Library, take note of the "Get Code" link. You will need to retrieve the widget code to insert into your social media web pages. 
 

Flickr Widget

  1. Create a new feed type widget 
  2. Add the following criteria through the widget editor
    • feed URL(s) - Add your flickr feed here (https://api.flickr.com/services/feeds/photos_public.gne?id=....)
    • Format results with -  The following demonstrates an example formatting option, but you can customize the results to your suit your branding.
    • Apply custom class: js-isotope

      The widget syntax will resemble the following:
      <widget type="feeds">
      ​<arg id="url">https://api.flickr.com/services/feeds/photos_public.gne?id=...</arg>
      <arg id="max">5</arg>
      <arg id="format">
      <div class="lc-flickr lc-social-media-box">
        <span class="hidden">Flickr</span>
        <div class="lc-social-media-header">
          <span class="icon icon-flickr-brand"></span>
        </div>
         <div class="lc-social-media-content">
          <div class="lc-social-media-picture">{description}</div>
         </div>
       <div class="lc-social-media-footer">
        <span class="lc-social-media-date">{date}</span>
       </div>
      </div>
      </arg>
      </widget>
  3. From the Widget Library take note of the "Get Code" link. You will need to retrieve the widget code to insert into your social media pages. 
 

Stream Widget

The Stream Widget is used to produce a mixture of all the social media feeds by streaming all of your widgets created above.
  1. Create a new stream type widget 
  2. Add the following criteria through the widget editor
    • Use Widgets - Add your facebook, flickr, twitter, and youtube widgets
    • Apply custom class: js-isotope

    The widget syntax will resemble the following:
    <widget type="stream">
    <arg id="use_widget">18</arg>
    <arg id="use_widget">17</arg>
    <arg id="use_widget">16</arg>
    <arg id="use_widget">15</arg>
    <arg id="use_widget">14</arg>
    <arg id="class">js-isotope</arg>
    ​</widget>
  3. From the Widget Library take note of the "Get Code" link. You will need to retrieve the widget code to insert into your social media index.php page. 

 

​Putting it All Together

Once all of the widgets have been created, the content can be pulled together using the following resources to render a three column format of streaming social media feeds.

The following contribution demonstrates how your results can be displayed, however you may customize the resources to fit your branding.
 

Navigation Filter Buttons

  1. Isotope can hide and show item elements via the filter option. Items that match that filter will be shown. Items that do not match will be hidden.
  2. The isotope script is a requirement (see resources below)
  3. Add the following code to your web page to display the navigation buttons 
<div id="filters" class="button-group">
 <button id="show-all" data-filter="*" class="button is-checked">Show All</button>
 <button id="twitter" data-filter="twitter" class="button"><span>Twitter</span></button>
 <button id="facebook" data-filter="facebook" class="button"><span>Facebook</span></button>
 <button id="instagram" data-filter="instagram" class="button"><span>Instagram</span></button>
 <button id="flickr" data-filter="flickr" class="button"><span>Flickr</span></button>
 <button id="youtube" data-filter="youtube" class="button"><span>YouTube</span></button>
</div>

PHP File

NOTE: Edit the php file below by replacing the widget code placeholder with the stream widget created above. This file is for testing purposes and does not have any branding. You may use your own page template in place of these files by simply copy/pasting the widget segment into your branded page.
  1. index.php 

Scripts

  1. isotope.pkgd.min.js
  2. social.js

Styles

  1. social.css
 


 
Download the source code below
Attachments
eb8f96c071020d8b0923da726d6cab65@livewhale.desk-mail.com
https://cdn.desk.com/
false
desk
Loading
seconds ago
a minute ago
minutes ago
an hour ago
hours ago
a day ago
days ago
about
false
Invalid characters found
/customer/en/portal/articles/autocomplete?b_id=4256