Is there a way to add a pop-up Share on my Wall feature to a custom Thank-You page?

  • Profile Image
    yepser
    Asked on August 27, 2012 at 10:30 AM

    I'm in no way a developer :) I need specific instructions on what code to use & exactly where to put it. 

    Please see attached for an example of what I want to do.

    Thanks!

  • Profile Image
    fxr
    Answered on August 27, 2012 at 11:16 AM

    To create a Facebook 'Share' Button. 

    You have to set up an App on Facebook. 

    Go to  https://developers.facebook.com/apps  and click the 'Create New App' button. 

    The settings of the apps are straightforward enough. Just make sure that the 'Site Domain' and 'Site URL' and 'Website with Facebook Login' use the same domain as the link you want to share. 

    E.g if i want to share www.jotform.com 

    My app settings would look like this ( I have also highlighted the App id for reference to later):

     

    Once you have the app setup and have obtained your App id, its basically just a matter of generating a URL which you can then embed in a link on your thankpage. 

    This URL takes the following parameters

    appid - you app id on facebook

    link - the link you want to share

    picture - the URL of a picture you want to use when someone posts to their wall.

    name -  a title for the link you are sharing. 

    caption - a small peice of text describing the link you are sharing

    redirect_uri - where to redirect a user to after they have 'shared' your link.

    --

    Here is an example URL sharing www.jotform.com 

    http://www.facebook.com/dialog/feed?app_id=273481409427530&link=http://www.jotform.com&picture=http://max.jotfor.ms/images/logo.png&name=Share Name&caption=JotForm%20-%20easiest%20form%20builder&redirect_uri=http://www.jotform.com

    --

    Once you have built the URL, its easy enough to add it (and an image link) to a forms thankyou page. 

    --

    Find your share image and add it to the thankyou page composer with the 'Insert Image' tool. 

    Highlight the image and click 'insert/edit link' icon and add the URL you built above to it. 

     

     

     

    You can see a sample form here with this 'Share' button set up

    --

    I am sure by now you realise that Facebook have made this a little difficult, but you should be able to manage it with a little perseverance. 

  • Profile Image
    fxr
    Answered on August 27, 2012 at 11:17 AM

    Facebook documentation on creating a 'Share' button URL is here

  • Profile Image
    yepser
    Answered on August 28, 2012 at 11:47 AM

    This is great! I was able to create the share button :) 

    Is there a way to eliminate the user having to click the share button? Basically have the post to my wall box that pops up after you click the button, pop up automatically after form submission? I think there's an html tag for that, but I'm forgetting it at the moment.

    I'm also wondering how I would need to edit it if I want to keep them inside FB. I'm actually iFraming my form into FB using an App. You can see the preview link here. 

    https://www.facebook.com/pages/Client-Lab-B/231419740205806?ref=ts&sk=app_174225559282949

    I'm thinking that I would just need to change the App Domain & Site URL to the above instead of http://form.jotformpro.com/form/22254906188963

    Also, can you provide any help on creating a Tweet button?

    I looked at http://twitter.com/about/resources/buttons#tweet & this is the code that it generated. I tried adding javascript last week, but it didn't seem to work.

     

    <a target="_blank" href="https://twitter.com/share" rel="nofollow noopener" rel="nofollow" class="twitter-share-button">Tweet</a>

    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

    Thank you so much!

  • Profile Image
    jeanettebmz
    Answered on August 28, 2012 at 02:34 PM

    @yepser,

    I have answered to you into this thread

  • Profile Image
    fxr
    Answered on August 28, 2012 at 03:31 PM

    Just as an appendage:

    You can build a tweet link to share a URL (or whatever) in much the same I did for the facebook 'share' button above, its actually a fair bit easier:

    http://twitter.com/home?status=Tweet+my+link->http%3A%2F%2Fwww.jotform.com

    Outcome 

    The bits you need change to add your own text should be obvious.

    To explain some of the odd characters

    + is a space

    %3A is a :

    %2F is a / 

    Just build up the link with your image with the insert image and insert link tools as I did above for the Facebook link. 

    --

    I see you also found a handy facebook app that sorted out your other questions?

    btw your form is looking great.

  • Profile Image
    yepser
    Answered on August 28, 2012 at 03:52 PM

    Great! I thought you might have a workaround :) I'll probably have to wait until tomorrow to work on Twitter, but I'm happy with the way the Email Auto-Responder is working for the time being.

    I did figure out about changing the App Domain & Site URL, but I still want to know if there's a way to eliminate the user having to click the share button from the Thank-You page? Basically have the post to my wall box that pops up after you click the button, pop up automatically after form submission? Isn't there an HTML tag for automatic pop-up?

    Thanks!

  • Profile Image
    fxr
    Answered on August 28, 2012 at 05:44 PM

    The only way I can personally envision something like this working is with a pop window against a javascript that runs x seconds after the 'thankyou page' is loaded. 

    To do this you would have to host the thankyou page on your own server. 

    I think this may be more trouble than its worth but a brief how-to follows. 

    --

    For my example above, I would make my body tag look like this:

    <body onload="setTimeout('fb_share()',100)">

    then add the following script to the bottom of the HTML on my thankyou page:

     

    <script> 

       function fb_share () 

       {  

        window.open ("http://www.facebook.com/dialog/feed?app_id=273481409427530&link=http://www.jotform.com&picture=http://max.jotfor.ms/images/logo.png&name=Share Name&caption=JotForm%20-%20easiest%20form%20builder&redirect_uri=http://www.jotform.com","Share on Facebook","menubar=no,resizable=no,location=no,width=940,height=480");

       }

      </script>

     

    --

    An example of how it could look is here

    Full code here

    --

    There may be away to open the URL in a lightbox which would be probably look better, but unfortunately i couldnt work it out. If it is possible, it will definately require javascript and for you to host the thankyou page on your own server. 

  • Profile Image
    Yepser
    Answered on August 29, 2012 at 12:59 PM

    I'm definitely not going to tackle building something on my own just yet, but I did run across a live example of what I want just in case it's possible & I just didn't know how to articulate what I want :) 

    http://woobox.com/kfmqda

    I'm planning to tackle Twitter later today. Thanks again!

  • Profile Image
    jeanettebmz
    Answered on August 29, 2012 at 01:14 PM

    @Yepser

    On behalf of my colleague fxr , you are much welcome!

  • Profile Image
    yepser
    Answered on August 30, 2012 at 02:50 PM

    Finally got the Twitter button added, but now I'm having an issue with the images not being left justified in Outlook. See screen shot below. It's difficult for me to troubleshoot as I'm using Gmail & my client is using Outlook! The middle two are in a table & the codes says align left. Thanks!

  • Profile Image
    Mike_T
    Answered on August 30, 2012 at 04:55 PM

    Please change text-align for your div to left. It helps in Microsoft Windows Live Mail desktop software, so I hope it will be same in your client's Outlook.

    Thank you.

  • Profile Image
    garrettnorvell
    Answered on March 13, 2013 at 08:01 AM

    Same goal, problematic code; here's my attempt: 

     

    http://www.facebook.com/dialog/feed?app_id=523843927659591&link=https://www.facebook.com/SYVPChurch/app_190322544333196&picture=https://sphotos-a.xx.fbcdn.net/hphotos-ash3/550057_481253958608003_1303773785_n.jpg&name=SYVPC Prayer Request&caption=My%20friends%20at%20Santa%20Ynez%20Valley%20Presbyterian%20Church%20are%20praying%20for%20me;%20Please%20add%20me%20to%20YOUR%20prayers,%20too!&redirect_uri=http://www.facebook.com/SYVPChurch

     

    Any help is appreciated!  

    blessings,

    Garrett


  • Profile Image
    Welvin
    Answered on March 13, 2013 at 09:05 AM

    Hi Garrett,

    Please kindly check this guide from Facebook: https://developers.facebook.com/docs/reference/dialogs/feed/

    Let us know if you need any further help.

    Thanks

  • Profile Image
    garrettnorvell
    Answered on March 13, 2013 at 12:59 PM

    Thanks Welvin!  I checked that out, used their example URL and plugged in my id, name, etc., and 1) it gives me an error message when I try to load the URL into a new window (while the actual example URL creates the desired example 'share box'); and 2) just yields a "go to facebook" icon when loaded from my form.  

    Here is my URL; would someone mind helping me troubleshoot this further?  

    thanks again!

     

    https://www.facebook.com/dialog/feed?

      app_id=523843927659591&

      link=https://www.facebook.com/syvpchurch/app_190322544333196&

      name=SYVPC%20Prayer%20Request&

      caption=Reference%20Documentation&

      description=Using%20Dialogs%20to%20interact%20with%20users.&

      redirect_uri=https://www.facebook.com/syvpchurch

  • Profile Image
    EltonCris
    Answered on March 13, 2013 at 03:08 PM

    @garrettnorvell

    Can you please give us a snapshot of your Facebook App settings? Please make sure the App Domain and Website URL matched on your Share URL. They won't work when values on your link is different with your FB App.

    We'll wait your reply. Thanks!

  • Profile Image
    EltonCris
    Answered on March 13, 2013 at 03:13 PM

    By the way, you can upload the screenshot here and send to us the Image URL (found on that upload page) so we can view it here. Thanks!

  • Profile Image
    garrettnorvell
    Answered on March 13, 2013 at 10:34 PM

    error when app domain matches URL

  • Profile Image
    garrettnorvell
    Answered on March 13, 2013 at 10:35 PM

    I replaced the App Domain with facebook.com and this error message was resolved

    I changed app domain to generic facebook.com...

  • Profile Image
    garrettnorvell
    Answered on March 13, 2013 at 10:42 PM

    Once I replaced the App Domain with "www.facebook.com" the app seemed happy (error went away), but then the link doesn't work (it gives me the following error when I click the link)

  • Profile Image
    garrettnorvell
    Answered on March 13, 2013 at 10:44 PM

    Here is my link

  • Profile Image
    EltonCris
    Answered on March 14, 2013 at 12:38 AM

    Hi,

    You can use this: http://pastie.org/pastes/6485362/text

    That still uses JotForm Image but you can change it on that link. e.g. picture=http://max.jotfor.ms/images/logo.png

    Let us know if you more questions. Thanks!

  • Profile Image
    garrettnorvell
    Answered on March 14, 2013 at 01:18 AM

    Thanks a bunch, EltonCris!  

    When I past the URL that you generated for me into a new window, I get the box that you posted.  When I insert that URL into the link for the icon on my "thank you" page, however, and save the form and re-place the form's code into FB, and then click the link on the "thank you" page, it doesn't bring up that box -it just gives a blank page that says only "go to Facebook.com".  

    thoughts?  (o:  thanks again!

  • Profile Image
    EltonCris
    Answered on March 14, 2013 at 01:35 AM

    Hi,

    Your're welcome and thanks for the swift response.

    It's probably because you are logged in as the App Admin. I would suggest to logout and login to another FB account then test out the form, that should be working fine. Here's how it works on my end.

    http://screencast.com/t/RJPAtBbgr

    Also, I would suggest to re-embed your form with using https://www instead of https://form (you can find that on your form embed code) to prevent SSL Error.

    Thank you!

  • Profile Image
    garrettnorvell
    Answered on March 14, 2013 at 02:33 AM

    Elton, you ROCK!  may God bless you!  Now my next question is about browser incompatibility.  Safari is working great, but when I tried opening the jotform in firefox it gave me the following:  

     

  • Profile Image
    EltonCris
    Answered on March 14, 2013 at 02:49 AM

    It is our pleasure to help you here. May god bless you too! :)

    Regarding on the SSL Error, try chaging the Form URL found on your embed code to this. https://secure

     Example https://secure.jotform.us/form/1234567890.

    I have also escalated this SSL error to our technical team so they can investigate this further.

    Thank you for bringing this to our attention.

  • Profile Image
    EltonCris
    Answered on March 14, 2013 at 04:46 AM

    @garrettnorvell

    Just for your information, we no longer support SSL for https://www.jotform.us domain, please use https://secure.jotform.us instead. 

    Thank you!