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

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 ;)

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>

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

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

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?

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?

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" />
    }
}

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.

is working on a reply...