Surendra Sharma

Surendra Sharma

Search This Blog

Friday, January 18, 2019

4th Sitecore Marketplace Module – Sitecore Social Feeds Manager

Sitecore Social Feeds Manager
Sitecore Social Feeds Manager

I am very excited to share my 4th module “Sitecore Social Feeds Manager” on Sitecore marketplace. You can download it from here.

We all know the importance of social media for product branding. Almost all websites showing their organization or products related social messages to their website.

I created this helix-based module for getting social feeds from Facebook, Twitter, Youtube and Instagram.

Steps to use this module
1. Download and installed this Sitecore package
2. Fill your Social keys for Facebook, Twitter and Youtube in item "/sitecore/content/Habitat/Global/Social/Social Media Manager"
3. Publish Sitecore items.
4. Access JSON result from URL http://<your.sitecore.instance>/api/sitecore/social/GetSocialFeeds?channelName=youtube&token=accesstoken.

By default, it shows recent 8 feeds from each social channel but you can control the number of feeds from Sitecore.

I also included “All” feeds option where you can access recent 2 feeds from each channel and show mix of total 8 feeds on your front end. Again, you can control total numbers of feeds from Sitecore for “All” use case.

I have excluded HTML part on this module as every website have different HTML and look and feel. So directly consume this JSON output and integrate it in your HTML at desired location.

A sample HTML for calling and using this JSON data by AJAX is

<div id="SocialFeedsDiv">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <script>


        $(document).ready(function () {
            var b = null;
            $("#all").click(function () {
                loadfeeds("All")
            });

            $("#Facebook").click(function () {
                loadfeeds("Facebook")
            });

            $("#Twitter").click(function () {
                loadfeeds("Twitter")
            });

            $("#Youtube").click(function () {
                loadfeeds("Youtube")
            });

            $("#Instagram").click(function () {
                loadfeeds("Instagram")
            });


            function loadfeeds(channelName) {
                $.get("/api/sitecore/social/GetSocialFeeds?channelName=" + channelName + "&token=accesstoken", function (data, status) {
                    var index = 1;
                    $("#feedlist").html("");
                    $.each(data.responseResult, function (i, field) {
                        var imageurl = "";
                        if (field.ImageURL !="" || field.ImageURL != null) {
                            imageurl = "ImageURL : <a href='" + field.FeedURL + "' ><img src='" + field.ImageURL + "' alt='" + field.Title + "' /> </a> <br>";
                        }
                        $("#feedlist").append(
                            "<li>Sr No :" + index + "<br>" +
                            "FeedID :" + field.FeedID + "<br>" +
                            "PlatformName :" + field.PlatformName + "<br>" +
                            "Title :" + field.Title + "<br>" +
                            "Description :" + field.Description + "<br>" + imageurl
                            +
                            "FeedURL :" + field.FeedURL + "<br>" +
                            "Timestamp :" + field.Timestamp + "<br>" +
                            "From :" + field.From + "<br><br><br>" + "</li>"
                        );
                        index++;
                    });
                });
            }
        });

    </script>

     <br />
    <a href="javascript:void(0)" id="all">All</a><br />
    <a href="javascript:void(0)" id="Facebook">Facebook</a><br />
    <a href="javascript:void(0)" id="Twitter">Twitter</a><br />
    <a href="javascript:void(0)" id="Youtube">Youtube</a><br />
    <a href="javascript:void(0)" id="Instagram">Instagram</a><br />

    <div id="feed">

    </div>

    <br />
    <br />

    <div id="HTMLfeed">
        <ul id="feedlist"></ul>


    </div>

</div>

You may interested in my other 3 modules on Sitecore marketplace




I hope you will use these Sitecore modules. Stay tuned for more Sitecore related information.

Till that happy Sitecoring :)

Please leave your comments or share these marketplace modules if it’s useful for you.

Friday, January 11, 2019

Batch file to create empty app from Sitecore JSS boilerplate app


If you are new to Sitecore JSS app and want to develop any website from it, then best place to start working on this is to restore sample Sitecore JSS app.

Default Sitecore JSS app comes as boilerplate.

Understand how it is functioning and how to write the code. Once you understand sample app, then remove all the default sample content (the Styleguide and GraphQL files) from below paths:

1.            Delete /src/components/Styleguide* and /src/components/GraphQL*
2.            Delete /sitecore/definitions/components/Styleguide*, /sitecore/definitions/templates/Styleguide*, and /sitecore/definitions/components/GraphQL*
3.            Delete /data/component-content/Styleguide
4.            Delete /data/content/Styleguide
5.            Delete /data/routes/styleguide and /data/routes/graphql
6.            Delete /data/dictionary/*.yml

If you like you can remove these files and folders manually. To make your life easy, I have created a batch file which remove all these contents and give you perfect empty app in just two click. 

Just copy the batch file in your JSS application root directory as "CleanupApp.bat" and run it.

Sitecore JSS App clean up batch file
Sitecore JSS App clean up batch file

Batch file looks like

REM Batch file to remove all of the default sample content (the Styleguide and GraphQL routes)

FOR /D %%p IN (".\src\components\Styleguide*") DO RMDIR "%%p" /s /q
FOR /D %%p IN (".\src\components\GraphQL*") DO RMDIR "%%p" /s /q

DEL /q ".\src\components\Styleguide*"
DEL /q ".\sitecore\definitions\components\Styleguide*"
DEL /q ".\sitecore\definitions\components\GraphQL*"
DEL /q ".\sitecore\definitions\templates\Styleguide*"

FOR /D %%p IN (".\data\component-content\Styleguide") DO RMDIR "%%p" /s /q

FOR /D %%p IN (".\data\content\Styleguide") DO RMDIR "%%p" /s /q

FOR /D %%p IN (".\data\routes\styleguide") DO RMDIR "%%p" /s /q
FOR /D %%p IN (".\data\routes\graphql") DO RMDIR "%%p" /s /q

DEL /q ".\data\dictionary\*.yml"

That’s it.