Google plus one button integration

4 posts, 0 answers
  1. Gerardo
    Gerardo avatar
    6 posts
    Member since:
    Oct 2010

    Posted 05 Oct 2011 Link to this post

    Hi.

    I'm programming a website section in DNN based on this sample:
    http://demos.telerik.com/aspnet-ajax/tooltip/examples/default/defaultcs.aspx

    I'm trying to display a google plus one button in the details page or user control by using a Literal control. This is my code:
    private void shareGoogle(int ProductId)
    {
            //url for sample purpose
            string url = "http://www.telerik.com/";
     
            StringBuilder script = new StringBuilder();
            script.Append("<script type=\"text/javascript\" src=\"https://apis.google.com/js/plusone.js\"></script>");
            script.Append("<g:plusone");
            script.Append(" size=\"standard\"");
            script.Append(" count=\"false\"");
            script.AppendFormat(" href=\"{0}\"", url);
            script.Append("></g:plusone>");
     
          
            ltGoogle.Text = script.ToString();
    }

    The problem is that if I put this code in the view page, it displays correctly but if I put it in the details page it does not display anything.

    I also put the javascript call to google api in the skin file so it can be seen by any module I insert in the website.

    The other option I tried was that I downloaded a c# project which overrides Render method but it has the same behaviour in both view and details page.

    Thank you.
    Gerardo


  2. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3595 posts

    Posted 07 Oct 2011 Link to this post

    Hi Gerardo,

    I tried your code both in a user control loaded in the tooltip maanger, I also loaded the user control in a regular update panel (which is what the tooltip manager actually does), I even tried simply outputting it to the main page, even with the script file included in the head section. None of these approaches seemed to result in a google plus one button being rendered on the page, so I believe that this issue stems from the way this button should be used.

    Once you are able to create this button in a user control, loaded dynamically in a regular update panel the same approach should work for the RadToolTip as well.

    You can see a screen capture from my tests here: http://screencast.com/t/nFNyDHoNJ and I am attaching the page and the UC I tested with as a reference. As you can see all three approaches have the same result. I also based my test upon the default demo of the RadToolTip, so you should find it close enough to your actual application.


    Kind regards,
    Marin
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Gerardo
    Gerardo avatar
    6 posts
    Member since:
    Oct 2010

    Posted 07 Oct 2011 Link to this post

    Hi Marin.

    I also tried your code and I place a google plus one button in a user control. Also I place this user control in the main page and it is displaying fine.

    I also place that code inside my Repeater control and it is working fine. The problem is that if I try to load the user control in a regular update panel by clicking a button, it does not show anything.

    I think that this button cannot be loaded using a user control and an update panel. I do not know if this behavoiur will be the same if I work with a RadWindow control.

    Regards,
    Gerardo
  5. Gerardo
    Gerardo avatar
    6 posts
    Member since:
    Oct 2010

    Posted 07 Oct 2011 Link to this post

    Hi Marin.

    I've been searching about this issue and I found this two links that explain why does google plus one button does not work when using an update panel:

    http://stackoverflow.com/questions/6652024/registerclientscriptcode-not-working-after-a-partial-post-back/6652747#6652747
    http://zeemalik.wordpress.com/2007/11/27/how-to-call-client-side-javascript-function-after-an-updatepanel-asychronous-ajax-request-is-over/

    After checking those links I tested my app by downloading google plus one api (plusone.js) and this is why I did:

    function load() {
       //register the handler
       Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
    }
    //this handler will execute after a partial postback
    function EndRequestHandler(){
       //I paste plusone.js content HERE
    }
    window.onload = load;

    I left all my code just as yours and it worked!.

    I attached a print screen image.

    Now I just have to polish my code and figure out how will I call that file inside EndRequestHandler Event
Back to Top