Sharing a 'page' (form with generated content) to Facebook

Anvil Q&A
1

I’ve found the HTML and javascript to create the share button, having a little trouble figuring out where to insert it but I’ll get there.
I want my users to be able to share the results of a search to facebook using a share button, will this work or will I need to generate some sort of static page or include the search parameters in the URL?

TIA,
John

2

You can make a custom component by creating a new “Custom HTML” form, deleting all the components, and editing the html property. You can then drag that form onto other forms as a custom component (drag it from the App Browser on the left into the page).

As for parameters in the URL, you can see David’s question on this forum today.

For more than that, I think you’ll have to consult the Facebook API docs! If you really need to generate a static HTML page, you can use our HTTP API, but I’d suggest that as a last resort.

3

Thanks for the idea, I’ll give that a try.

4

Follow up question, how can I interact with the HTML from within the code? I.E. I need to generate a link (for the share to facebook functionality) pointing to the current search criteria so that when clicked on their end (fb) I can read the search param from the URL hash and direct them to where they need to be.

Cheers,
John

5

Are you trying to change the HTML in an HTML form? If so, you probably want to edit the html property of the form (example below).

:bangbang: DANGER, WILL ROBINSON :bangbang:
Editing HTML from code is a dangerous activity - it’s why Anvil tries to make it unnecessary. If you don’t carefully filter what goes into HTML code, someone can inject malicious code into your app and compromise its security. (This is called Cross-Site Scripting, or XSS, and it is the most common way websites get hacked.) If there is a way to avoid editing HTML in code, do it that way instead. And always make sure you restrict what characters someone can inject into your HTML.

In this case, you’ll be substituting in a URL. So you can use anvil.http.encode_uri_component, something like so (copied inexpertly from the Facebook docs):

self.html = """
<blah blah Facebook HTML here...>

<div class="fb-share-button" 
    data-href="https://yourapp.anvilapp.net/#?search=%s" 
    data-layout="button_count">
</div>""" % anvil.http.encode_uri_component(my_search_parameter)

The encode_uri_component() call will remove any dangerous characters that could be used to inject HTML into your page, so this code is safe.

Hope that helps!

1 Like
6

This does actually help a lot, thanks!
I didn’t realise I could access it from self.html which was probably the first main issue and second manually trying to sanitize it would probably have made me miss something so I’m very glad for anvil.http.encode_uri_component()

1 Like