social media buttons

[/i][i]Hi,

I am trying to add Instagram to the social media block in the back end of my test site.

Version 4.20 source code version.


My code is as follows but i cannot seem to find what i am missing:

source>presentation>nopweb>views>shared>components>footer>Default.cshtml

  <div class="footer-block follow-us">
             <div class="social">
                <div class="title">
                    <strong>@T("Footer.FollowUs")</strong>
                </div>
                @await Component.InvokeAsync("SocialButtons")
            </div>
            @await Component.InvokeAsync("NewsletterBox")
        </div>

source>presentation>nopweb>factories>CommonModelFactory.cs

public virtual SocialModel PrepareSocialModel()
        {
            var model = new SocialModel
            {
                FacebookLink = _storeInformationSettings.FacebookLink,
                TwitterLink = _storeInformationSettings.TwitterLink,
                InstagramLink = _storeInformationSettings.InstagramLink,
                YoutubeLink = _storeInformationSettings.YoutubeLink,
                WorkingLanguageId = _workContext.WorkingLanguage.Id,
                NewsEnabled = _newsSettings.Enabled,
            };
            return model;
        }

source>presentation>nopweb>models>common>SocialModel.cs

namespace Nop.Web.Models.Common
{
    public partial class SocialModel : BaseNopModel
    {
        public string FacebookLink { get; set; }
        public string TwitterLink { get; set; }
        public string InstagramLink { get; set; }
        public string YoutubeLink { get; set; }
        public int WorkingLanguageId { get; set; }
        public bool NewsEnabled { get; set; }
    }
}

source>presentation>nopweb>views>shared>components>SocialButtons>Default.cshtml

@model SocialModel
    <ul class="networks">
        @if (!string.IsNullOrEmpty(Model.FacebookLink))
        {
            <li class="facebook"><a href="@Model.FacebookLink" target="_blank">@T("Footer.FollowUs.Facebook")</a></li>
        }
        @if (!string.IsNullOrEmpty(Model.TwitterLink))
        {
            <li class="twitter"><a href="@Model.TwitterLink" target="_blank">@T("Footer.FollowUs.Twitter")</a></li>
        }
        @if (!string.IsNullOrEmpty(Model.InstagramLink))
        {
            <li class="Instagram"><a href="@Model.InstagramLink" target="_blank">@T("Footer.FollowUs.Instagram")</a></li>
        }
        @if (Model.NewsEnabled)
        {
            <li class="rss"><a href="@Url.RouteUrl("NewsRSS", new {languageId = Model.WorkingLanguageId})">@T("Footer.FollowUs.RSS")</a></li>
        }
        @if (!string.IsNullOrEmpty(Model.YoutubeLink))
        {
            <li class="youtube"><a href="@Model.YoutubeLink" target="_blank">@T("Footer.FollowUs.Youtube")</a></li>
        }
    </ul>

Styles.css:

  .follow-us {
    margin: 30px auto 0;
    text-align: center;
  }

    .follow-us .title {
      margin: 0 0 10px;
      background: none;
      color: #fff;
      cursor: auto;
    }

    .follow-us .social ul {
      margin: 0 0 30px;
      border-bottom: 1px solid #fff;
      padding: 0 0 30px;
      font-size: 0;
    }

    .follow-us .social li {
      display: inline-block;
      margin: 0 5px;
    }

    .follow-us .social a {
      display: block;
      width: 38px;
      height: 38px;
      background: url('../images/social-sprite.png') no-repeat;
      font-size: 0;
    }

    .follow-us .social .facebook a {
      background-position: 0 0;
    }

    .follow-us .social .twitter a {
      background-position: -38px 0;
    }

    .follow-us .social .instagram a {
      background-position: -76px 0;
    }
    .follow-us .social .rss a {
      background-position: -114px 0;
    }

    .follow-us .social .youtube a {
      background-position: -152px 0;
    }

    .follow-us .social .google-plus a {
      background-position: -190px 0;
    }


Regards