Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Leon 101 posts 489 karma points
    Jul 23, 2015 @ 17:06
    Leon
    0

    Share on Facebook, Twitter, Linked in

    What's the easiest way to make a mvc partial view macro that can be used to add to a grid that would a allow someone who browses a page to share the page on Facebook / Twitter / Linked in etc?

  • Dennis Aaen 4500 posts 18255 karma points admin hq c-trib
    Jul 23, 2015 @ 17:13
    Dennis Aaen
    0

    Hi Leon,

    Try to have a look at the package called uShare perhaps this could be a solution for you.

    https://our.umbraco.org/projects/website-utilities/ushare

    Hope this helps,

    /Dennis

  • Anders Bjerner 487 posts 2989 karma points MVP 8x admin c-trib
    Jul 23, 2015 @ 17:41
    Anders Bjerner
    2

    Hi Leon,

    uShare as Dennis suggests is a package that lets your editors share pages directly from the backoffice.

    The way I understand your question, you're looking for a way for your editors to insert share links on your pages for the visitors of the website to click on? If that is the case, read on ;)

    I generally see to approaches, and not sure what you wan't, I'll explain them below.

    At the bottom of the page (eg. as part of a footer)

    We usually just add social links as part of the footer, which often has it's own partial view. You can reference your partial view like:

    @Html.Partial("~/Views/Partials/SocialLinks.cshtml")
    

    The content of the partial could then look like:

    @inherits UmbracoViewPage
    
    @{
    
        string twitter = "https://twitter.com/intent/tweet?text=" + HttpUtility.UrlEncode(Model.Name) + "&url=" + HttpUtility.UrlEncode(Model.UrlWithDomain());
    
        string facebook = "http://www.facebook.com/sharer.php?u=" + HttpUtility.UrlEncode(Model.UrlWithDomain());
    
    }
    
    <div class="buttons">
        <a class="button twitter" rel="nofollow" target="_blank" href="@twitter">Tweet!</a>
        <a class="button facebook" rel="nofollow" target="_blank" href="@facebook">Share!</a>
    </div>
    

    Add to the grid
    If you're looking for a way to add this as elements/controls in the actual grid, you need to implement your own grid editor, and then allow that to be added to your grid pages.

    If this is what you want, let me know if you need any further assistance, and I'll try to dig up an example ;)

  • Leon 101 posts 489 karma points
    Jul 24, 2015 @ 08:29
    Leon
    0

    Thanks Anders.

    This is exactly what I want. I'll give it a go and let you know the outcome.

  • Leon 101 posts 489 karma points
    Jul 24, 2015 @ 10:18
    Leon
    1

    It was very easy in the end. No package needed for a simple "share on facebook / twitter / linked in" button. No need to register a facebook app either. Here is the code for my partial view macro (Facebook, Twitter, Linked in, Google plus) You don't need the div with the "buttonSocialShare" class - that's just for my own alignment styling:

        @inherits Umbraco.Web.Macros.PartialViewMacroPage
    
    <div id="fb-root"></div>
    
    
    <script>
    (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_GB/sdk.js#xfbml=1&version=v2.4";
        fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));</script>
    
    
    
    <div class="buttonSocialShare">
        <div class="fb-share-button" data-layout="button_count"></div>
    </div>
    
    <div class="buttonSocialShare">
        <a href="https://twitter.com/share" class="twitter-share-button">Tweet</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>
    
    
    </div>
    <div class="buttonSocialShare">
    
    
    <script type="text/javascript" src="http://platform.linkedin.com/in.js"></script>
    
    
    
    
    <script type="in/share" data-counter="right">
        </script>
    
    
    </div>
    <div class="buttonSocialShare">
        <div class="g-plus" data-action="share" data-annotation="none"></div>
    </div>
    

    For google plus to work, this needs to be in the "head" of the page. I added it to my master page.

    <script src="https://apis.google.com/js/platform.js" async defer>
                    { lang: 'en-GB' }
                </script>
    
  • Anders Bjerner 487 posts 2989 karma points MVP 8x admin c-trib
    Jul 24, 2015 @ 13:34
    Anders Bjerner
    2

    Inserting the share button from Facebook has a few privacy issues (which may or may not matter depending on your site).

    When inserting the button on your site, it loads a few resources from Facebook, and it is then possible for Facebook to see which pages on your site that your users are visiting. And if a user is logged into Facebook while visiting your site, Facebook is able to couple that information. The button also saves a cookie so that Facebook can match the visitors to a Facebook user even though the user isn't logged into Facebook at the moment.

    It is a bit unclear what Facebook actually uses this information for, but a good guess is that they (among other things) use it to show more relevant advertisements on Facebook.com. You can read a bit more about it here:

    http://bits.blogs.nytimes.com/2011/09/27/as-like-buttons-spread-so-do-facebooks-tentacles/

    There has been a lot of discussion regarding this in Denmark a few months back, and we do a lot of municipal (local government) websites, and our clients have asked us to remove these kind of buttons due to privacy issues they add.

    One last note is also, that the extra resources may slow load time of your pages.

    With the Twitter and Facebook buttons in my example, neither Twitter or Facebook are able to monitor visitors on your site. They will only know about a visitor if he/she clicks on one of the share buttons.

    I hope this makes sense - and that I haven't scared you too much ;)

  • Leon 101 posts 489 karma points
    Jul 24, 2015 @ 13:41
    Leon
    0

    Oh wow. Sounds involved. I wonder if the same applies to twitter, linked in and google plus?

  • Anders Bjerner 487 posts 2989 karma points MVP 8x admin c-trib
    Jul 24, 2015 @ 13:45
    Anders Bjerner
    1

    Facebook is probably the worst, but Twitter is doing the same. I don't have that much experience with Google+ and LinkedIn, but I would assume they're doing something similar.

  • James Jackson-South 489 posts 1747 karma points c-trib
    Jul 24, 2015 @ 13:52
    James Jackson-South
    2

    Hey guys,

    Just a quick note to say UrlWithDomain() is marked obsolete. You should use UrlAbsolute() instead.

    Also Leon, as Anders says there are privacy issues with the JavaScript powered share buttons plus performance issues so I would try to follow his approach using static linking instead.

    You can use this brilliant site to show you what format the links should be in. You don't need to use their buttons.

    Hope this helps.

    James

  • Leon 101 posts 489 karma points
    Aug 05, 2015 @ 16:37
    Leon
    0

    When I click the facebook "share" button, it randomly selects an image off my web page which it thinks is best. I understand that I can change this by adding a few meta tags to the "head" of the html. However, I'm using a partial view macro. How can I dynamically add a meta tag to the "head" of the HTML using a partial view macro? Any ideas?

  • Anders Bjerner 487 posts 2989 karma points MVP 8x admin c-trib
    Aug 05, 2015 @ 17:17
    Anders Bjerner
    1

    Hi Leon,

    Can you post a bit of your code - eg. where the macro partial is inserted? That would help me give a better answer ;)

    Anyways, here is an example of what I would do. This example uses a master view, which your views for each of your document types then could inherit from. A partial view can then be referenced in the master view:

    ~/Views/Master.cshtml

    @inherits Umbraco.Web.Mvc.UmbracoTemplatePage
    @{
        Layout = null;
    }
    
    <!DOCTYPE html>
    <html>
    <head>
        @Html.Partial("~/Views/Partials/Head.cshtml")
    </head>
        <body>
            @RenderBody()
        </body>
    </html>
    

    ~/Views/Partials/Head.cshtml

    @inherits UmbracoViewPage
    
    @{
    
        string siteName = Model.AncestorOrSelf(1).Name;
    
        string title = Model.Name + " - " + siteName;
    
    }
    
    <title>@title</title>
    <meta property="og:title" content="@title" />
    <meta property="og:site_name" content="@siteName" />
    <meta property="og:url" content="@Model.UrlAbsolute()" />
    <meta property="og:type" content="website" />
    

    You can also specify an image like:

    <meta property="og:image" content="http://www.example.org/opengraph.png" />
    

    Both og:url and og:image should be specified using absolute URLs. You can also insert multiple elements with og:image.

  • Leon 101 posts 489 karma points
    Aug 06, 2015 @ 08:38
    Leon
    0

    Hi Anders.

    It's not quite what I had in mind. What I thought of doing is having a section in the Master view for meta tags - like
    @RenderSection("metaTags", required: false)

    Then populate that section from the partial view. I can do that from a view that uses the master view layout, but I can't do it from a partial view.

    My partial view macro can be inserted into the grid which then renders the "share on Facebook, twitter, linked in and google +" but I still need a way to insert the meta tag with a specific image url (a parameter in the macro).

    This might not be possible and I might need a different approach?

  • Leon 101 posts 489 karma points
    Aug 06, 2015 @ 10:15
    Leon
    0

    I've found a way around it. I've just added a parameter to my template called "facebookImage". This is then displayed in a "facebookMetaTags" render section on my master view.

    Just need help with syntax getting an absolute url for @Umbraco.Media(CurrentPage.facebookImage).umbracoFile

    In Master view:

    <head>
    
                <!-- Meta tags -->
                <meta charset="utf-8">
                <meta http-equiv="X-UA-Compatible" content="IE=edge">
                <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5, user-scalable=1">
                <meta name="description" content="@meta.Description">
    
                @RenderSection("facebookMetaTags", required: false)
    

    And now in the template view:

    @section facebookMetaTags {
        @if (CurrentPage.facebookImage != 0)
        {
            <meta property="og:image" content="@Umbraco.Media(CurrentPage.facebookImage).umbracoFile" />
        }
    }
    
  • Anders Bjerner 487 posts 2989 karma points MVP 8x admin c-trib
    Aug 06, 2015 @ 18:03
    Anders Bjerner
    1

    There are probably many ways to solve this. Without knowing the rest of your solution, I would say that what you have posted seems correct.

    Regarding getting the absolute URL for the image, you can write something like:

    <meta property="og:image" content="@Umbraco.TypedMedia(CurrentPage.facebookImage).UrlAbsolute()" />
    
  • Leon 101 posts 489 karma points
    Aug 07, 2015 @ 08:53
    Leon
    0

    Thanks Anders.

    Not sure why this didn't work:

    <meta property="og:image" content="@Umbraco.TypedMedia(CurrentPage.facebookImage).UrlAbsolute()" />
    

    The error I get is:

    'Umbraco.Web.Models.PublishedContentBase' does not contain a definition for 'UrlAbsolute'

    but this works:

    <meta property="og:image" content="http://@String.Format("{0}{1}", HttpContext.Current.Request.Url.Host, Umbraco.Media(CurrentPage.facebookImage).umbracoFile)" />
    

    This for the help.

  • Leon 101 posts 489 karma points
    Aug 07, 2015 @ 09:01
    Leon
    101

    Just to re-cap...

    This is the solution I used in the end (couldn't do it in the partial view macro alone):

    In Master view in the :

     <head>
       <meta property="og:title" content="@*myOwnTitleVariable*@" />
       <meta property="og:url" content="@Model.Content.UrlAbsolute()" />
       @RenderSection("facebookMetaTags", required: false)
      ....
    

    In the template view

    @section facebookMetaTags {
        @if (CurrentPage.facebookImage != 0)
        {
            <meta property="og:image" content="http://@String.Format("{0}{1}", HttpContext.Current.Request.Url.Host, Umbraco.Media(CurrentPage.facebookImage).umbracoFile)" />
        }
    }
    

    Thanks for all the help.

Please Sign in or register to post replies

Write your reply to:

Draft