# How to display a social media icon and if clicked the image,it should open the link in pages

**URL:** <https://community.glideapps.com/t/how-to-display-a-social-media-icon-and-if-clicked-the-image-it-should-open-the-link-in-pages/46645>\
**Category:** Ask for Help\
**Created:** [August 13, 2022, 6:22am UTC](https://community.glideapps.com/t/how-to-display-a-social-media-icon-and-if-clicked-the-image-it-should-open-the-link-in-pages/46645 "2022-08-13T06:22:28Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![Manikandan\_R](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/manikandan_r/32/43482_2.png) [@Manikandan\_R](https://community.glideapps.com/u/Manikandan_R)\
**Post date:** [August 13, 2022, 6:22am UTC](https://community.glideapps.com/t/how-to-display-a-social-media-icon-and-if-clicked-the-image-it-should-open-the-link-in-pages/46645/1 "2022-08-13T06:22:28Z")

</div>

Hi

Need to display social media images below.ifvthebimages clicked it needs to open the respective link.

> [@How to add social media images in pages](https://community.glideapps.com/t/how-to-add-social-media-images-in-pages/44818/2):
>
> Add a container and set from 1-4 columns [image] Add Title component in each column Add the icon and social media name Add the action to open link choosing the columns for each one or adding manually Et voilà grin

Have done this but if i clicked no response.

 ![de](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/b/4/b48dff219ab36ae7134c7c866df757b8bc4714ce.png)

I want the image to be clickable and goes to the link given.

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [August 14, 2022, 12:20am UTC](https://community.glideapps.com/t/how-to-display-a-social-media-icon-and-if-clicked-the-image-it-should-open-the-link-in-pages/46645/2 "2022-08-14T00:20:25Z")

</div>

How are you setting the data up on your backend? Are they 4 rows? Can you give a screenshot of the action setup for your collection?

It seems like you’re using a “collection item action”, but Lucas used a “click action” instead.

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/a/8/a870a328942fcdc5ca19768c47a4a4d680d2f10f.png)

---

<div class="post-metadata">

**Author:** ![Manikandan\_R](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/manikandan_r/32/43482_2.png) [@Manikandan\_R](https://community.glideapps.com/u/Manikandan_R)\
**Post date:** [August 16, 2022, 9:50am UTC](https://community.glideapps.com/t/how-to-display-a-social-media-icon-and-if-clicked-the-image-it-should-open-the-link-in-pages/46645/3 "2022-08-16T09:50:14Z")

</div>

Hi

 ![Screenshot_2022-08-16-14-02-44-003_com.android.chrome](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/3/3/3332843e26a156ade0e989fb4556ed41d8ab12ea.jpeg)

Have done this exactly.And in each title column image field i have added YouTube,Instagram,whatsapp icon.Then in action have given a open link.

What should I do to work if that image clicked should go to the link given.

I don’t know which title column ?i used action title.

It still not working.can you help me to solve this.  
Have done everything manually,not from glide table fetching data.

---

<div class="post-metadata">

**Author:** ![Manikandan\_R](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/manikandan_r/32/43482_2.png) [@Manikandan\_R](https://community.glideapps.com/u/Manikandan_R)\
**Post date:** [August 16, 2022, 10:26am UTC](https://community.glideapps.com/t/how-to-display-a-social-media-icon-and-if-clicked-the-image-it-should-open-the-link-in-pages/46645/4 "2022-08-16T10:26:11Z")

</div>

Hi Have added one more screen shots,

 ![tu1.PNG](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/9/f/9f06af616fa807bb48365ffca19efacb761586a4.jpeg)

Please provide a solution for this.Still not able to create this functionality.

The reason im not giving anything in the action is,its creating a button to open the link given.  
But i want the image to be clicked to open the social media.I waant to know where should the link be given.

Provide steps to solve this.

---

<div class="post-metadata">

**Author:** ![Manikandan\_R](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/manikandan_r/32/43482_2.png) [@Manikandan\_R](https://community.glideapps.com/u/Manikandan_R)\
**Post date:** [August 16, 2022, 6:40pm UTC](https://community.glideapps.com/t/how-to-display-a-social-media-icon-and-if-clicked-the-image-it-should-open-the-link-in-pages/46645/5 "2022-08-16T18:40:47Z")

</div>

Hi

What should exactly do to create an social media icons to display at the bottom of the pages and if clicked it should go to the link given.

Whether the icon and link should be created in glide table or else manually given in the field?

Any example template for this.

@Robert_Petitto i need your help

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [August 16, 2022, 6:49pm UTC](https://community.glideapps.com/t/how-to-display-a-social-media-icon-and-if-clicked-the-image-it-should-open-the-link-in-pages/46645/6 "2022-08-16T18:49:09Z")

</div>

just add action to the rich text to open the link:

```auto
<div class="logo"><img src="https://www.broadwayinchicago.com/wp-content/uploads/2020/11/facebook-logo-png-transparent-background.png" align="left" style="width:18px;height:18px;" /><b>
‏‏‎ ‎‏‏‎ ‎Facebook</b> </div>
<pre><span><style>
.logo{position:fixed; bottom:12%}

```

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [August 17, 2022, 12:55am UTC](https://community.glideapps.com/t/how-to-display-a-social-media-icon-and-if-clicked-the-image-it-should-open-the-link-in-pages/46645/7 "2022-08-17T00:55:00Z")

</div>

Here’s a video:

---

<div class="post-metadata">

**Author:** ![Manikandan\_R](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/manikandan_r/32/43482_2.png) [@Manikandan\_R](https://community.glideapps.com/u/Manikandan_R)\
**Post date:** [August 17, 2022, 9:45am UTC](https://community.glideapps.com/t/how-to-display-a-social-media-icon-and-if-clicked-the-image-it-should-open-the-link-in-pages/46645/8 "2022-08-17T09:45:39Z")

</div>

It’s working but some problems are there but I’m ok with that problem too.

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [August 17, 2022, 10:10am UTC](https://community.glideapps.com/t/how-to-display-a-social-media-icon-and-if-clicked-the-image-it-should-open-the-link-in-pages/46645/9 "2022-08-17T10:10:53Z")

</div>

What “problems” do you have?

---

<div class="post-metadata">

**Author:** ![Manikandan\_R](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/manikandan_r/32/43482_2.png) [@Manikandan\_R](https://community.glideapps.com/u/Manikandan_R)\
**Post date:** [August 17, 2022, 10:27am UTC](https://community.glideapps.com/t/how-to-display-a-social-media-icon-and-if-clicked-the-image-it-should-open-the-link-in-pages/46645/10 "2022-08-17T10:27:41Z")

</div>

1 is it’s not centred,i must fill it atleast 4 social media icon.

2 is Instagram icon when clicked,it’s not loading the login screen in browser(edge) but it is showing the login screen in mobile,at the same time its open the given insta I’d owned user in browser.

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [August 17, 2022, 11:36pm UTC](https://community.glideapps.com/t/how-to-display-a-social-media-icon-and-if-clicked-the-image-it-should-open-the-link-in-pages/46645/11 "2022-08-17T23:36:26Z")

</div>

Please show some screenshots or a video of how you’re setting it up.

---

<div class="post-metadata">

**Author:** ![Manikandan\_R](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/manikandan_r/32/43482_2.png) [@Manikandan\_R](https://community.glideapps.com/u/Manikandan_R)\
**Post date:** [September 2, 2022, 7:01am UTC](https://community.glideapps.com/t/how-to-display-a-social-media-icon-and-if-clicked-the-image-it-should-open-the-link-in-pages/46645/12 "2022-09-02T07:01:16Z")

</div>

Hi

The issue with instagram not coming now.its ok.

But the social media icon problems shown in screenshots.  
see space on the right side on full screen

 ![wq.PNG](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/f/d/fdd3bd2a6caa1abc6bd7d01d2f219407b322d489.jpeg)

container screenshot

 ![wq1.PNG](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/8/9/898dead2b52cdb84d57e22572d209679ed41e73b.jpeg)  
collection screenshot  
 ![wq2.PNG](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/0/d/0d89f7cc11e693e6504c53b4dbbc341c301e0e76.jpeg)  
social media table  
 ![wq3](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/c/d/cdc508baab104c9fd1211b7ddf8ebf9b42e61b92.png)

---

<div class="post-metadata">

**Author:** ![Hassan\_Nadeem](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/hassan_nadeem/32/72956_2.png) [@Hassan\_Nadeem](https://community.glideapps.com/u/Hassan_Nadeem)\
**Post date:** [September 2, 2022, 8:54am UTC](https://community.glideapps.com/t/how-to-display-a-social-media-icon-and-if-clicked-the-image-it-should-open-the-link-in-pages/46645/13 "2022-09-02T08:54:57Z")

</div>

Add one more social media to fill that space 😄. Maybe Twitter

---

<div class="post-metadata">

**Author:** ![Manikandan\_R](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/manikandan_r/32/43482_2.png) [@Manikandan\_R](https://community.glideapps.com/u/Manikandan_R)\
**Post date:** [September 2, 2022, 9:12am UTC](https://community.glideapps.com/t/how-to-display-a-social-media-icon-and-if-clicked-the-image-it-should-open-the-link-in-pages/46645/14 "2022-09-02T09:12:14Z")

</div>

Have changed the width to come to the center ,no issues.