Customize AddToAny Share Button?

Hi,

is there a way to customize the AddtoAny Share button? like instead of the default facebook rounded square icon you can do a circle icon or button?

1 Like

What you see is what you get unfortunately.

I also don’t think you can adjust the shape of the buttons, but you can overwrite the colors so they match. :slight_smile:

1 Like

yes i know that you may change the color of the icons but i think it would be better if you can turn the icon into like a button so that when they click the icon/button it will show the share feature

Got it :slight_smile: It’s not exactly the same, but it looks like it’s possible to share to social media using just a link element. I found this thread on Stack Overflow which gives a list of Share URLs, and when clicked, automatically go to Facebook (or Twitter, and Google) and attach the url you choose as a link preview.

For a custom Facebook icon, you can use a link element, remove the style and select “icon instead of text”:

Then set the destination of the link to be ‘external URL’:

For Destination URL, the format for a Facebook share is:

*(replacing Google with any URL you’d like)

And when clicked, it will share Google (what I used as an example) to the User’s FB profile. The format for Twitter and Google are:
http://twitter.com/share?url=http://google.com&text=Description
https://plusone.google.com/_/+1/confirm?hl=en&url=http://google.com

11 Likes

Nice work!!!

1 Like

how about sharing it with Current page title description and image? and can this be showed as popup not in a new tab? also i cant see that option that Show an icon instead of text

I’m pretty sure the sharer automatically picks up the meta tags that you set for that page. For example, If you double-click on the page and scroll down in the property editor, you can define the title, description and image for each page there. There may be a way to dynamically send this through different parameters in the URL - would be good to look into!

I was wondering the same thing about displaying the page in a popup! It seems like this might be possible by using an html element and putting the sharer link as the URL inside an iframe? Unfortunately, I haven’t had much luck getting iframes which show external websites to display in Bubble.

In order for the “show an icon instead of text” to become an option, you have to remove the defined style of the icon first. :slight_smile:

@fayewatson

i already tried that putting html and add the share link and make it an iframe the only thing is it will show a text url instead of showing the share page

Right, I’m not too sure how to make it display the sharer, but hopefully a fellow Bubbler does! :slight_smile:

Really cool! Thanks @fayewatson

If anyone is interested you can also share on WhatsApp with a custom message. You can use the WhatsApp link icon with destination URL as:

https://api.whatsapp.com/send?phone=whatsappphonenumber&text=urlencodedtext

Where it says “urlencodedtext” replace that with your custom text to message to someone with a link to your site. For example:

https://api.whatsapp.com/send?phone=whatsappphonenumber&text=Check out this awesome new site www.example.com

WhatsApp will also detect the meta tags. Apparently it works on IOS, android and all web browsers. I found it here stackoverflow … Hope it helps.

9 Likes

hello @leonidas.petrou4 ive tried your method but instead of typing the url, i use insert dynamic data > this url. but the problem is the url it copied doesn’t include the parameters. how do i include my parameters is dynamic url?

Hi @acap … So the URL for WhatsApp does not allow any equal signs, it needs to be URL encoded text, that is why your parameters are not showing. This can be easily fixed by replacing “=” with “%3D” as in the screenshot below:

image

See this link for a complete list of URL encoded text:

URL Encoded Text List

this is the instruction that i’ve put in:

24%20AM

this is the URL that is copied:

Check out this awesome new site https://umrahgo.com/package_full_view/1542915062681x756940569262951600?mutawif=

this is the actual URL with parameter:

“https://umrahgo.com/package_full_view/1542915056715x154687887988984580?mutawif=&mekah=Royal%20Dar%20Al%20Eiman&madinah=Al%20Eiman%20Almanar&departure=Jan%2023%2C%202019%2012%3A00%20am&return=Feb%203%2C%202019%2012%3A00%20am&distancemekah=100&distancemadinah=100&day=12&night=10&airline=Saudi&startcity=Madinah&endcity=Mekah&agency=Kopeto&package=Pakej%20Platinum&type=Biasa&ziarah=&agencylogo=&price=7390”

the problem is, the parameter kept on changing depending on the input being key in by users. its a filtering system. how do i do it? i cant put in manually. if i do it manually by insert dynamic data > get data from page URL> to get those parameters, there is space cant be real in url if im not mistaken.

[updated]

this is what i did.

03%20PM

but the problem is whatsapp auto translate %3D into = which in result it doesnt copy those parameters still.

Hi @acap, you’re on the right track with getting parameters from the URL and yes you’re right- no spaces should be in the URL.

There’s a few things I’d try change to find the problem:

  1. The problem could be with the dates. Try getting rid of your :formatted as because this might change the URL encoded text formatting. I often have problems with sending dates as parameters in URLs, maybe try deleting the two date parameters with their values and test if everything works without the dates just to try pin point the problem.

  2. I see a quotation mark at the end of your entire URL which I believe shouldn’t be there.

  3. Try deleting the parameter mutawif%3D& in the beginning of the parameters and run without it, because that parameter has a null value. I’m not sure if that would be the cause of the problem but it is worth checking out.

Sorry I couldn’t be more specific. When I run into problems like this it is usually a lot of trial and error till I get it working. If none of these suggestions work, send through the URL of what is generated when you run the URL in your screenshot above so I can see where the problem starts.

okay finally figured it out!

this is what i did. as for the space in parameters data, i do find & replace space with _ and on my text display i reconvert _ to space again. phewwww.

1 Like

Here is Linkedin URL to use

https://www.linkedin.com/sharing/share-offsite/?url=

After the “url=” put your page URL to share

2 Likes

Hi bro,

I am facing the same issue… how did u achieve this?

Thanks a lot!

use “find & replace”

1 Like