csergent08

Adding Social Networking Widgets to a Floating Sidebar

Blog Post created by csergent08 Champion on Jan 28, 2015

Today we will add our widget to the floating sidebar we created in my last post. It's just going to be a short copy and paste. So let's begin. The first widget we will add will be a twitter feed for the City of Decatur. You can copy and paste this right below the decaturTwitter div in the original app:

<a class="twitter-timeline" href="https://twitter.com/AccessDecatur"
                           data-widget-id="557285604892110849" 
                           width="360" 
                           height="350">Tweets by @AccessDecatur</a>
                        <script>
                            !function (d, s, id) {
                                var js, fjs = d.getElementsByTagName(s)[0], p = /^http:/.test(d.location) ? 'http' : 'https';
                                if (!d.getElementById(id)) {
                                    js = d.createElement(s); js.id = id;
                                    js.src = p + "://platform.twitter.com/widgets.js";
                                    fjs.parentNode.insertBefore(js, fjs);
                                }
                            } (document, "script", "twitter-wjs");
                        </script>

Just a side note; I noticed some of these feeds require you to refresh your browser from time to time to display. The twitter feed will display like so:

sidebarTwitter.png

The next widget we will add will be the City of Decatur's Facebook feed. The first thing we need is the Facebook SDK. So you want to copy and paste this code before the body of your web page or in your external JavaScript file:

(function (d, s, id) {
                var js, fjs = d.getElementsByTagName(s)[0];
                if (d.getElementById(id)) return;
                js = d.createElement(s); js.id = id;
                js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.0";
                fjs.parentNode.insertBefore(js, fjs);
            } (document, 'script', 'facebook-jssdk'));

 

Now that you have the Facebook SDK, you can add the Facebook page  widget right after the decaturFacebook div as follows:

<div id="decaturFacebook">
                        <div class="fb-like-box"
                             data-href="https://www.facebook.com/pages/City-of-Decatur/319956320318"
                             data-width="335" 
                             data-height="350" 
                             data-colorscheme="light" 
                             data-show-faces="true"
                             data-header="true" 
                             data-stream="true" 
                             data-show-border="false">
                             </div>
                        <div id="fb-root">
                        
                        </div>

 

The embedded Facebook widget will look like this:

sidebarFacebook.png

Now we add the LinkedIn widget. There is no control on sizing this widget, which can be frustrating if you want it smaller or larger. Copy and paste this code after the companyProfile id div.

<div id="companyProfile">
                        <script src="//platform.linkedin.com/in.js"
                                type="text/javascript">
                        </script>
                        <script type="IN/CompanyProfile"
                                data-id="5311"
                                data-format="inline"
                                data-width="250">
                        </script>
                    </div>

 

The embedded widget will like like this:

sidebarLinkedIn.png

And finally we can add the YouTube widget. Just copy and paste the following code after the div youTubeChannel:

<div id="static_video">
                        
                        </div>
                        <script type="text/javascript">
                            function showLatestVid(response) {
                                if (response.data && response.data.items) {
                                    var items = response.data.items;
                                    if (items.length > 0) {
                                        var item = items[0];
                                        var videoid = "http://www.youtube.com/embed/" + item.id;
                                        console.log("Latest ID: '" + videoid + "'");
                                        var video = "<iframe width='300' height='225' src='" + videoid + "' frameborder='0' allowfullscreen></iframe>";
                                        jQuery('#static_video').html(video);
                                    }
                                }
                            }
                        </script>
                        <script type="text/javascript" 
                                src="https://gdata.youtube.com/feeds/api/users/DecaturCrimes/uploads?max-results=1&orderby=published&v=2&alt=jsonc&callback=showLatestVid">
                        </script>

This displays the most recent video from a YouTube channel. This channel is crimes around Decatur taken from freelance video.

sidebarYouTube.png

If you would like to save some screen space, you can completely collapse the widget like this:

sidebarCollapsed.png

Or you could add a hide button. With this, you can add all of these widgets in a sidebar or anywhere in your application that you like. If you want to see the complete app, download the code here.

Outcomes