Social media sharing widgets when placed strategically at various points in your application allow you to leverage your happy users as a free marketing channel for getting extra distribution. In this tutorial I’ll show you how you can embed a Facebook share widget within your Adalo application using the webview component.
This tutorial was requested as additional clarification to a brief response I made in the Adalo forums here. It’s also a feature request that has been upvoted 22 times as of this writing.
This video shows the full process start to finish:
Basically the steps are these:
- Use the sample code from this page of documentation on the Facebook Developer portal and modify the values so they represent the page you’re intending to make sharable.
- Put that code somewhere where it can be served publicly (either on a webserver you control or in a Amazon S3 bucket set to public).
- Lastly, create a webview component wherever you want the share button to appear and have it call that .html file.
If you needed to make the widget reusable across multiple pages on your site you could make it a .php file instead of a .html file. This would be useful if you wanted to make it so each user of your app could share a unique tracking link or their own user profile link. The way you would do that would be to echo the REQUEST_URI variable or if you wanted to manually specify those params when calling the code via the webview component you could pass them in via the query string and have the script populate them that way.
This same technique can be used to embed sharing widgets for the other platforms. You can find docs for Twitter and LinkedIn respectively. If you’re intending to add a bunch of these buttons the easiest thing would be to create a ShareThis account, register all the services there and then just reference that in the webview component.
Let me know if you have any questions. And as always if you want a monthly summary of useful tips like these in your email inbox be sure to opt-in for my “Inbox Insights” below. cheers
