[Resolved] Social media (instagram) link scroll button similar to "GP back to top button"?

[Sofia]

Hi, I would like to add a social media link (instagram) button that is visible when scrolling (visible simultaneously and in the same way as the GP back to top button and preferably with same opacity). I would like the button to be in the same vertical position as the GP back to top button but on the left side of the screen (with back to top button on the right side). I have tried certain popup plugins but I can not get it to work. I like the clean appearance of the GP back to top button and the fact that it is visible on the screen (both desktop and mobile) only when scrolling, and would like to have another button to the left of the screen (at least on the home screen, but all pages would be fine) with social media link functionality (instagram). Any thoughts how I can do that? Many thanks for a great theme!

[Tom]

Hi there,

Should be quite simple.

1. Add the HTML into the After Footer hook in GP Hooks:

<a class="sticky-instagram" href="URL TO INSTAGRAM" style="opacity:0;visibility:hidden;"><i class="fa fab fa-instagram"></i></a>

2. Add the CSS:

.sticky-instagram {
    font-size: 20px;
    border-radius: 3px;
    position: fixed;
    bottom: 30px;
    left: 30px;
    line-height: 40px;
    width: 40px;
    text-align: center;
    z-index: 10;
    transition: opacity .3s ease-in-out;
    background-color: rgba(0,0,0,0.4);
    color: #fff;
}

.sticky-instagram:hover, 
.sticky-instagram:focus {
    background-color: rgba(0,0,0,0.6);
    color: #fff;
}

3. Add the JS in the wp_footer hook in GP Hooks:

<script>
	( function() {
	    'use strict';

	    // Feature Test
	    if ( 'querySelector' in document && 'addEventListener' in window ) {

			var trackScroll = function() {
				var instaButton = document.querySelector( '.sticky-instagram' );
				var scrolled = window.pageYOffset;
				var coords = 300;

				if ( scrolled > coords ) {
					instaButton.style.opacity = '1';
					instaButton.style.visibility = 'visible';
				}

				if (scrolled < coords) {
					instaButton.style.opacity = '0';
					instaButton.style.visibility = 'hidden';
				}
			}
			window.addEventListener( 'scroll', trackScroll );

	    }

	 } )();
</script>

Hope this helps 🙂

[Sofia]

Hi, thanks for quick reply. I added the html above (1) in GP Hooks, After Footer Content (with the instagram URL). I also added the CSS in the Simple CSS section. It can now link to Instagram, but the button is always visible on the page. I would like the button only to be visible when scrolling (same functionality as the GP back to top button that is only visible when I scroll down). What should I do to accomplish that?

Also, I do not know how I should insert an instagram logo (ideally white) to fit into the button. How can I do that?

Many thanks.

[Tom]

Ah, good point. I just edited all of the code above, and added some javascript that needs to be added: https://generatepress.com/forums/topic/social-media-instagram-link-scroll-button-similar-to-gp-back-to-top-button/#post-530149

The icon will only work if you turn off essential icons in “Customize > General”.

Let me know if you need more info 🙂

[Sofia]

Hi, thanks for the reply. I have added the edited code (1) in GP Hooks, After Footer Content, the edited code (2) in the Simple CSS section and the JS (3) in the wp_footer hook in GP Hooks. I have also unchecked the essential icons check-box in Customize, General.

There is now a button that is only visible when scrolling, but the button still does not contain an instagram icon. Instead of an instagram link there is a text in the button saying “if(typeof jQuery == ‘undefined’ || typeof jQuery.fn.on == ‘undefined’) { document.writeif(typeof jQuery

What should I do to get this to work?

[Tom]

Sorry about that – can you replace the HTML with the above edited snippet?

[Sofia]

In addition to the text in the button as described above (instead of getting an instagram button) I also get the following message when I add the JS (3) in the wp_footer hook in GP hooks, and I am asked to white-list this, perhaps Wordfence is too picky?

“403 Forbidden

A potentially unsafe operation has been detected in your request to this site, and has been blocked by Wordfence.

If you are an administrator and you are certain this is a false positive, you can automatically whitelist this request and repeat the same action.”

[Sofia]

Hi again, thanks for the very quick latest reply and for the edited HTML. The Instagram icon including the button now works, super thanks!!

I also re-positioned the Instagram button (by changing the CSS) to the right side 75px from the bottom so the Instagram button is now positioned immediately above the GP back to top button (and visible only when the GP back to top button is visible). Looks and works very good/fine.

Now I would like to position a Facebook button immediately above (110px from bottom, 30px from the right side) the Instagram button, creating a vertical set of buttons (Facebook, Instagram and GP back to top all three visible only when scrolling) on the right side. Would it be possible to amend the Instagram code to create a similar working Facebook button?

[Tom]

You would basically duplicate the steps, but change any reference from instagram to facebook.

It should work the exact same 🙂

[Sofia]

Hi, thanks very much! Both the instagram button and the facebook button work very well.

[Tom]

Awesome, glad I could help! 🙂

[Author]

Posts