problem cant figure out to give facebook and twitter sharing buttons a dynamic url - Using Umbraco 7

Sharmarke Hujale 103 posts 346 karma points

Dec 13, 2015 @ 21:12

Problem: Can't figure out to give facebook and twitter sharing buttons a dynamic url

Hi Guys,

I use Facebook and Twitter's sharing/tweet buttons, so that people can share the content on the specific article/project.

Here's my meta tags in a partial view macro:

@inherits Umbraco.Web.Macros.PartialViewMacroPage
<!--OpenGraph tags-->
<meta property="og:title" content="@CurrentPage.Name" />
<meta property="og:type" content="website" />
<meta property="og:image "content="@CurrentPage.GetPropertyValue("image")" />
<meta property="og:url" content="http://localhost:52103/@CurrentPage.Url" />
<meta property="og:description" content="@Umbraco.Truncate(CurrentPage.content, 297, false)" />
<!--Twitter Cards-->
<meta name="twitter:url" content="http://localhost:52103/@CurrentPage.Url">
<meta name="twitter:title" content="@CurrentPage.Name">
<meta name="twitter:description" content="@Umbraco.Truncate(CurrentPage.content, 297, false)">
<meta name="twitter:image" content="@CurrentPage.GetPropertyValue("image")">

Here's my view (ProjectPost):

@inherits Umbraco.Web.Mvc.UmbracoTemplatePage
@{
Layout = "Master.cshtml";
 }

     <ul style="margin: 2% 0 2% 0;" class="social-sharing">
                <li>
                    <div class="fb-share-button" data-href="http://localhost:52103/@Model.Content.UrlWithDomain()" data-layout="button_count"></div>
                </li>
                <li>
                    <div>
                        <a class="twitter-share-button"
                             href="http://localhost:52103/@Model.Content.UrlWithDomain()"
                             data-size="large">
                            Tweet
                        </a>
                    </div>
                </li>
            </ul>

But I'm not sure if I'm doing the correct way - so I would really appreciate it,

if someone could help me with this,

and show me a better way of doing it,

Thanks in advance.

/Sharmarke

Copy Link

Dennis Aaen 4500 posts 18255 karma points admin hq c-trib

Dec 13, 2015 @ 21:25

Hi Sharmarke,

The Model.Content.UrlWithDomain() returns a nicely formated URL including its domain https://our.umbraco.org/documentation/Reference/Querying/UmbracoHelper/

So try the code below.

@inherits Umbraco.Web.Mvc.UmbracoTemplatePage
@{
Layout = "Master.cshtml";
 }

     <ul style="margin: 2% 0 2% 0;" class="social-sharing">
                <li>
                    <div class="fb-share-button" data-href="@Model.Content.UrlWithDomain()" data-layout="button_count"></div>
                </li>
                <li>
                    <div>
                        <a class="twitter-share-button"
                             href="@Model.Content.UrlWithDomain()"
                             data-size="large">
                            Tweet
                        </a>
                    </div>
                </li>
            </ul>

Hope this helps,

/Dennis

Copy Link

Sharmarke Hujale 103 posts 346 karma points

Dec 13, 2015 @ 21:39

Hi Dennis,

Thanks for your reply - I'll test the code,

and by the way - is there are better way to use this meta tag:

<meta property="og:url" content="http://localhost:52103/@CurrentPage.Url" />

Should I remove the Url and only use the '@CurrentPage.Url'

/Sharmarke

Copy Link

Sharmarke Hujale 103 posts 346 karma points

Dec 13, 2015 @ 23:36

Hi Dennis,

I got another side problem here...

All of sudden, when I put the website online - this is what I get on the project page:

 Server Error in '/' Application.

 Runtime Error

Description: An application error occurred on the server. The current           custom error settings for this application prevent the details of the application error from being viewed remotely (for security reasons). It could, however, be viewed by browsers running on the local server machine. 

Details: To enable the details of this specific error message to be viewable on remote machines, please create a <customErrors> tag within a "web.config" configuration file located in the root directory of the current web application. This <customErrors> tag should then have its "mode" attribute set to "Off".


<!-- Web.Config Configuration File -->

<configuration>
<system.web>
    <customErrors mode="Off"/>
</system.web>
</configuration>

Notes: The current error page you are seeing can be replaced by a custom error page by modifying the "defaultRedirect" attribute of the application's <customErrors> configuration tag to point to a custom error page URL.


<!-- Web.Config Configuration File -->

<configuration>
<system.web>
    <customErrors mode="RemoteOnly" defaultRedirect="mycustompage.htm"/>
</system.web>
</configuration>

That's really weird... Because other times when I put the website online, I didn't have that problem,

it just occured moments ago - and it's only the '/projects' page,

that is like that.

/Sharmarke

Copy Link

Dennis Aaen 4500 posts 18255 karma points admin hq c-trib

Dec 14, 2015 @ 12:44

Hi Sharmarke,

When I do websites, i try to do my code so dynamic as possible and not hardcode things, so your website will work if you change the domain.

 <meta property="og:url" content="@Model.Content.UrlWithDomain()" />

Hope this helps, and make sense.

/Dennis

Copy Link

Sharmarke Hujale 103 posts 346 karma points

Dec 14, 2015 @ 14:08

Hi Dennis,

I did get it to work, so a big thanks for me,

And it did make sense to me

/Sharmarke

Copy Link

James Jackson-South 489 posts 1747 karma points c-trib

Dec 14, 2015 @ 03:45

Hi Sharmarke,

If you turn off custom errors in the web.config as instructed and show us the resultant error message is we should be able to give you some pointers.

<!-- Web.Config Configuration File -->

<configuration>
<system.web>
    <customErrors mode="Off"/>
</system.web>
</configuration>

Cheers

James

Copy Link

is working on a reply...

Flag this post as spam?

Problem: Can't figure out to give facebook and twitter sharing buttons a dynamic url