Social media

Social stream for Facebook and Twitter and share buttons

  1. Home
  2. Components
  3. Social media

Facebook feeds

Examples

Installation

<link rel="stylesheet" href='../../HTWF/scripts/social.stream.css'>
<script src='../../HTWF/scripts/social.stream.min.js'></script>

Usage

<div class="social-feed-fb no-comments" data-social-id="156149777783739" data-options="limit:3"></div>

<div class="scroll-content well" data-height="400">
    <div class="social-feed-fb" data-social-id="156149777783739" data-options="limit:8"></div>
</div>                           

<div class="social-feed-fb flexslider no-comments outer-navs" data-social-id="156149777783739"></div>                           

<div id="fb-carousel-demo" class="social-feed-fb flexslider carousel outer-navs" data-social-id="156149777783739" data-options="minWidth:250,limit:8"></div>

Main settings

Name Type Description
HTML initialization Mixed 1 ) Add class social-feed-fb and attribute data-social-id="id-facebook-page" to target element.
You can found the Facebook ID with this web service : findmyfbid.com.
2 ) Set the Facebook access token, see below documentation for more details.
Use class no-comment to hide post comments.
Javascript initialization Javascript 
$(document).ready(function () {
    $('#target').facebook_wall({
        id: 'id-facebook-page',
        access_token: 'access-token',
        limit: 3,
        locale: "it_IT",
        show_guest_entries: false
    });
});
Access token Mixed To start the Facebook stream you must set the Facebook access token:
1 ) Go to developers.facebook.com, login with your account and register as developer. Otherwise you can not add your application and get tokens.
2 ) Choose on the navigation bar Apps > Add a New App and select website.
3 ) Type in any name of your App and click Create New Facebook App ID, select a category, and click Create App ID.
4 ) You will be redirected to the next page. Fill in URL of your site and click Next, then click Skip to Developer Dashboard.
5 ) Go to developers.facebook.com/tools/accesstoken/, find you newly created app and click You need to grant permissions to get an Access token, the Facebook access tokens are both two but best is App Token.

Now you must insert access token to your stream, you can do in three ways:

1 ) With attribute data-token="access-token". Example: <div class="social-feed-fb" data-token="8SBmJBp2bUv4dXTjM"></div>.
2 ) With attribute data-options="access_token:access-token".
3 ) By setting Javascript variable facebook_token="access-token", you can found it on script ../../HTWF/scripts/social.stream.min.js, or you can set it in any script you want.
Scroll box Mixed To insert the stream into a crollable box you must use the scroll box component and insert the Facebook stream code into <div class="scroll-content"> ... </div>.
Plugin dependency

This feature require Slim Scroll Plugin (../../HTWF/scripts/jquery.slimscroll.min.js)

Slim Scroll documentation here
Slider and carousel Mixed To show a slider or carousel you must use the sliders component and the code of examples above.
Plugin dependency

This feature require Flex Slider Plugin (../../HTWF/scripts/flexslider/jquery.flexslider-min.js' and ../../HTWF/scripts/flexslider/flexslider.css)

Slider documentation here
Translations Javascript You can translate the main texts of the stream by passing an array on initialization, use this code: 

$(document).ready(function () {
    $('#target').facebook_wall({
        id: '156149777783739',
        access_token: 'access_token',
        locale: "en_EN",
        text_labels: {
            shares: { singular: "Shared % time", plural: "Shared % times" },
            likes: { singular: "% Like", plural: "% Likes" },
            comments: { singular: "% comment", plural: "% comments" },
            like: "Like", comment: "Write comment", share: "Share", days: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
            months: ["january", "february", "march", "april", "may", "june", "july", "august", "september", "october", "november", "december"]
        }
   });
});

Currently you can use translations only with Javascript initialization.

Complete documentation and external resources

Documentation Plugin website Github page

Twitter feeds

Examples

Installation

<link rel="stylesheet" href='../../HTWF/scripts/social.stream.css'>
<script src='../../HTWF/scripts/social.stream.min.js'></script>

Usage

<div class="social-feed-tw" data-social-id="envato" data-options="limit:3"></div>

<div class="scroll-content well" data-height="250">
    <div class="social-feed-tw" data-social-id="breakingbad_amc" data-options="limit:8"></div>
</div>                          

<div class="social-feed-tw flexslider outer-navs" data-social-id="breakingbad_amc" data-options="show_media:false"></div>                       

<div class="social-feed-tw flexslider carousel outer-navs" data-social-id="breakingbad_amc" data-options="minWidth:250,show_media:false,limit: 10"></div>

Main settings

Name Type Description
HTML initialization Mixed Add class social-feed-tw and attribute data-social-id="twitter-username" to target element.
You can found the Twitter username by URL of the twitter page. For example the username of page with URL https://twitter.com/BreakingBad_AMC is breakingbad_amc.
Javascript initialization Javascript 
$(document).ready(function () {
    $('#target').tweecool({
        username: 'twitter-username'
    });
});
Scroll box Mixed To insert the stream into a crollable box you must use the scroll box component and insert the Facebook stream code into <div class="scroll-content"> ... </div>.
Plugin dependency

This feature require Slim Scroll Plugin (../../HTWF/scripts/jquery.slimscroll.min.js)

Slim Scroll documentation here
Slider and carousel Mixed To show a slider or carousel you must use the sliders component and the code of examples above.
Plugin dependency

This feature require Flex Slider Plugin (../../HTWF/scripts/flexslider/jquery.flexslider-min.js' and ../../HTWF/scripts/flexslider/flexslider.css)

Slider documentation here

Complete documentation and external resources

Documentation Github page

Social share buttons

Classic

Share

Classic big

Circle Toolstip

Simple icons

Social button

Usage

<span><b>SHARE</b></span>
<span class="space"></span>
<div class="btn-group btn-group-icons" role="group">
    <a data-social="share-facebook" class="btn btn-sm">
        <i class="fa fa-facebook"></i>
    </a>
    <a data-social="share-twitter" class="btn btn-sm">
        <i class="fa fa-twitter"></i>
    </a>
    <a data-social="share-google" class="btn btn-sm">
        <i class="fa fa-google-plus"></i>
    </a>
    <a data-social="share-linkedin" class="btn btn-sm">
        <i class="fa fa-linkedin"></i>
    </a>
</div>

<div class="btn-group social-group btn-group-icons">
    <a target="_blank" href="#" data-social="share-facebook" data-toggle="tooltip" data-placement="top" title="Facebook">
        <i class="fa fa-facebook text-s circle"></i>
    </a>
    <a target="_blank" href="#" data-social="share-twitter" data-toggle="tooltip" data-placement="top" title="Twitter">
        <i class="fa fa-twitter text-s circle"></i>
    </a>
    <a target="_blank" href="#" data-social="share-google" data-toggle="tooltip" data-placement="top" title="Google+">
        <i class="fa fa-google-plus text-s circle"></i>
    </a>
    <a target="_blank" href="#" data-social="share-linkedin" data-toggle="tooltip" data-placement="top" title="LinkedIn">
        <i class="fa fa-linkedin text-s circle"></i>
    </a>
</div>

<div class="btn-group social-group btn-group-icons">
    <a target="_blank" href="#" data-social="share-facebook"><i class="fa fa-facebook-square"></i></a>
    <a target="_blank" href="#" data-social="share-twitter"><i class="fa fa-twitter-square"></i></a>
    <a target="_blank" href="#" data-social="share-google"><i class="fa fa-instagram"></i></a>
    <a target="_blank" href="#" data-social="share-linkedin"><i class="fa fa-youtube-square"></i></a>
</div>

<div class="social-group-button">
    <div class="social-button" data-anima="pulse-vertical" data-trigger="hover">
        <i class="fa fa-share-alt circle text-s"></i>
    </div>
    <div class="btn-group social-group btn-group-icons">
        <a target="_blank" href="#"><i data-social="share-facebook" class="fa fa-facebook circle"></i></a>
        <a target="_blank" href="#"><i data-social="share-twitter" class="fa fa-twitter circle"></i></a>
        <a target="_blank" href="#"><i data-social="share-google" class="fa fa-google circle"></i></a>
        <a target="_blank" href="#"><i data-social="share-linkedin" class="fa fa-linkedin circle"></i></a>
    </div>
</div>

Main settings

social-colors
Name Type Description
HTML initialization Data attribute Add attribute data-social="share-socialnetwork-name" to target object. Currently supported social networks are four:
Social network Data attribute
Facebook data-social="share-facebook"
Twitter data-social="share-twitter"
Google+ data-social="share-google-plus"
LinkedIn data-social="share-linkedin"
The content of posts is fetched by page tags title and description.
Social URL Data attribute Default URL is current page, to set different URL add attribute data-social-url="socialnetwork-link" to target object.
Add new socials Javascript You can add new social networks by edit function $("*[data-social]").each(function () { ... }); of script ../../HTWF/scripts/script.js
Circle toolstip Information Circle toolstip require popovers and toolstip component ../../HTWF/scripts/bootstrap/js/bootstrap.popover.min.js.
Social button Information Social buttons animations require animation component ../../HTWF/css/animations.css.
To show icons on bottom add class bottom-iconsto social button object. Example <div class="social-group-button bottom-icons"> ... </div>.
To set vertical line design add class social-lineto social button object. Example <div class="social-group-button social-line"> ... </div>.
Social channel colors CSS To show the colors of the social channels add the class social-colors to btn-group container.