Being someone with no (and I mean no) coding skills, I may very well get all the terminology wrong here, but…
I am wondering how to go about displaying content (images, headlines, text etc.) form a url link, similar to Facebook / LinkedIn etc. I believe it may be termed as a ‘Link Preview’.
For example, when I paste a link on Facebook to a web page, it displays the main image, headline, text etc.
Is there a way to go about that so I can achieve the same effect on my bubble app for links users want to share?
** Update ** I have found plugins available for other platforms (mainly WordPress). Any possibility of something appearing for Bubble?
But if you want the tags and image to be specific to the page of your website you are sharing, then you can also set it on the actual page of your app, and even make it dynamic information. I have noticed that the image sometimes doesn’t work or show up distorted depending on it’s size
Actually, I am trying to establish how to fetch that information from other sites so that a user can input or copy/paste a link on a social feed page on my app and have it work like FB or LinkedIn (for example).
I don’t know if it is possible usin dynamic images and text somehow, or with a plugin, or HTML, or a combination. Must be possible but may require some coding knowledge I just don’t have.
You just need to get an API key from the service (linkpreview.net) and put it into the plugin settings, and you’re good to go! Check out the plugin link above though for some more instructions on how to use it if you’re still new to Bubble.
I’ve also created a sample in the forum app so that you (and others) can study. Enjoy and let me know if you have any questions!
1 - Get the LinkPreview plugin (which I assume you have)
2 - Get a key and insert it into the plugin
Then, simplest way to learn how it works…
3 - Create a thing (call it Article or something).
4 - Within that thing, have 4 fields… Image, Link, Title, Body
5 - Create a group on the page. In that group insert an image, a link and two text boxes. Set the source to 'do a search for Articles, sort by date descending yes, :first item) Make the image the sources image, the link the sources link, and the texts the sources title and body)
6 - Add an input box set to text
7 - Create a workflow… When the input box value is changed, create a new Article
Image = (Get Data from an external API… Provider = Link Preview - Get Preview)
path = your input box’s value’s description
8 - Repeat for Image, Link and Title
9 - Test by pasting a url into the input box and pressing enter
After that, you can obviously play around with exactly how you want the link to render.
I discovered that the link preview image is sometimes “wrong” and often not the same as when you would post the link on fb or linked in. Would you know anything about this? (Also, in fb you can select which image you want to display if there are multiple.)
@romanmg, can you help me? I have a feature, where a user can upload an image manually or insert a link to get link’s image via your plugin. My problem is that I can’t use your plugin for conditions. As you can see on the screenshot, I can’t hide text behind the image that I got from the link
Commenting because I’m facing this problem as well. @romanmg Is there a way to have the link preview select a particular image if there is a logo, content, and text? Thank you!
Hey guys, likely she wont be updating her plugin. She works on a ton of other projects and is barely around here on the forum.
If you look in their documentation, if you just used the API connector, and copy & paste the CURL request into your API call, you can literally just make your own. No need to use the plugin.
