Create Social Share Icon with Links

I could not get the GB Headline “Before text” function to work the was we need to. Is there anyway to create a social share icon for Pinterest using the Buttons of Headline block? We want the outgoing link to display like so:

https://twitter.com/intent/tweet?url=https://www.domain.com

We would want the actual URL of current page to be inserted dynamically to make the buttons work properly. Any ideas?

Hi @bowmah,

What would you need the before text to look like?

What’s your setup? Do each posts have different pinterest links?

I don’t think we can safely accomplish the Pinterest one as we would also have to know the exact Pinterest Image. Here are the URLs. Can we at least attmpt Facebook and Twitter?

I assume the post-urls do not need the square brackets:

https://www.facebook.com/sharer.php?u=[post-url]

https://twitter.com/share?text=[post-title]&url=[post-url]&via=[via]

Is this possible using GB Buttons or Headlines?

It’s possible.

For instance for the Facebook button, you can add facebook-share to the classlist of the Button Block, and add placeholder.com for instance as the url link. Then, add this PHP snippet:

add_filter( 'render_block', function( $block_content, $block ) {

if ( !is_admin() && ! empty( $block['attrs']['className'] ) && strpos( $block['attrs']['className'], 'facebook-share' ) !== false ) {

$myreplace1 = 'placeholder.com';

$myinsert1 = 'https://www.facebook.com/sharer.php?u=' . get_permalink();

$block_content = str_replace( $myreplace1, $myinsert1 , $block_content );

}

return $block_content;

}, 10, 2 );

This should replace placeholder.com with the facebook share url with the post url.

The same concept goes for twitter. Not sure what via though is.

You can get the title through get_the_title().

Amazing Fernando. Would you be able to help me piece together the Twitter snippet? Via is actually = @twitterhandle which I can hard code in.

How can I get to this final link: https://twitter.com/share?text=[post-title]&url=[post-url]&via=[via]

I have this so far:

add_filter( 'render_block', function( $block_content, $block ) {

if ( !is_admin() && ! empty( $block['attrs']['className'] ) && strpos( $block['attrs']['className'], 'twitter-share' ) !== false ) {

$myreplace1 = 'placeholder.com';

$myinsert1 = 'https://twitter.com/share?text=' . get_the_title();

$block_content = str_replace( $myreplace1, $myinsert1 , $block_content );

}

return $block_content;

}, 10, 2 );

Try this:

add_filter( 'render_block', function( $block_content, $block ) {

if ( !is_admin() && ! empty( $block['attrs']['className'] ) && strpos( $block['attrs']['className'], 'twitter-share' ) !== false ) {
	$my_via = 'twitter handle';
	$myreplace1 = 'placeholder.com';
	$myinsert1 = 'https://twitter.com/share?text=' . get_the_title() . '&url=' . get_permalink() . '&via=' . $my_via;
	$block_content = str_replace( $myreplace1, $myinsert1 , $block_content );
}

return $block_content;

}, 10, 2 );

Replace twitter handle with the correct one.

2 Likes

As usual Fernando, 2 thumbs up!!! That is perfect. Both snippets seem to be pulling the proper URL. I will test this once the staging site goes live!

That’s great! You’re welcome!

Hi Fernando,

I was able to tweak your snippets and made things work for GB and Twitter. First of all, thank you! So kind to help me here.

Was wondering if you can help me with this one. It’s a little beyond me to grab these variables. Trying to make one for Pinterest:

http://pinterest.com/pin/create/button/?url=https://domain.com&media=https://ImageURL&description=123

I would assume ImageURL = featured image and 123 = meta tag description? Not even sure if description is actually needed anymore.

Any tips would be greatly appreciated!

Maybe you can try something like this:

add_filter( 'render_block', function( $block_content, $block ) {

    if ( !is_admin() && ! empty( $block['attrs']['className'] ) && strpos( $block['attrs']['className'], 'pinterest-share' ) !== false ) {
        $myreplace1 = 'placeholder.com';
        $my_domain = 'put domain here';
        $myinsert1 = 'http://pinterest.com/pin/create/button/?url=' . $my_domain . '&media=' . get_the_post_thumbnail_url() . '&description=' . get_the_excerpt();
        $block_content = str_replace( $myreplace1, $myinsert1 , $block_content );
    }
    
    return $block_content;
    
    }, 10, 2 );

I set the description as the excerpt, and replace “put domain here” with your domain.

1 Like

Holy smokes, that’s amazing work. I am grabbing that snippet and saving it. I should have been more clear. The domain variable should be the current URL. My bad!

Maybe we can use get_permalink();

If so, would you mind providing the proper syntax? :slight_smile: Would appreciate it!!

Maybe something like this?

add_filter( 'render_block', function( $block_content, $block ) {

    if ( !is_admin() && ! empty( $block['attrs']['className'] ) && strpos( $block['attrs']['className'], 'pinterest-share' ) !== false ) {
        $myreplace1 = 'placeholder.com';
         $myinsert1 = 'http://pinterest.com/pin/create/button/?url=' . get_permalink() . '&media=' . get_the_post_thumbnail_url() . '&description=' . get_the_excerpt();
        $block_content = str_replace( $myreplace1, $myinsert1 , $block_content );
    }
    
    return $block_content;
    
    }, 10, 2 );

Hey Fernando, that totally worked. That is a smart way to deal with this. Thank you so VERY much for your help in figuring this out. Love really lean solutions!

Glad to be of assistance @bowmah!

1 Like

Glad I found this, I want to make social share button without a plugin. The issue i’m having is the button can only set to open in new tab, is there any way I can set it to open in new popup window and in a smaller size? like this

You’ll need something like this to do that: How to Open Links in a Popup Window - Super Dev Resources.

Sample code for Twitter:

add_filter( 'render_block', function( $block_content, $block ) {

if ( !is_admin() && ! empty( $block['attrs']['className'] ) && strpos( $block['attrs']['className'], 'twitter-share' ) !== false ) {
	$my_via = 'twitter handle';
	$myreplace1 = 'placeholder.com"';
	$my_link = 'https://twitter.com/share?text=' . get_the_title() . '&url=' . get_permalink() . '&via=' . $my_via;
	$myinsert1 = $my_link . '" target="popup" onclick="window.open(\''. $my_link . '\',\'popup\',\'width=600,height=600\'); return false;"';
	$block_content = str_replace( $myreplace1, $myinsert1 , $block_content );
}

return $block_content;

}, 10, 2 );
1 Like

Hi Fernando,

I cannot include secure credentials in the first post for a staging site. I have been running your code on a few sites and they are working well. From nginx to apache and php 7.3 and 8.0. On a new staging site, the Pinterest button is breaking like so.

FB and Twitter buttons work properly. I have tried the function inside the snippet plugin as well as in functions.php. It looks fine in the editor but breaks on the front end. Any ideas on how to troubleshoot this?

Can you share the code you have for pinterest, and can you share the link to the page where we can see this issue?

Hi Fernando,

Is there a way to provide login creds privately? It is a password protected staging site.

Here is the Pinterest chunk of code:


    if ( !is_admin() && ! empty( $block['attrs']['className'] ) && strpos( $block['attrs']['className'], 'pinterest-share' ) !== false ) {
        $myreplace1 = 'placeholder.com';
         $myinsert1 = 'http://pinterest.com/pin/create/button/?url=' . get_permalink() . '&media=' . get_the_post_thumbnail_url() . '&description=' . get_the_excerpt();
        $block_content = str_replace( $myreplace1, $myinsert1 , $block_content );
    }
    
    return $block_content;
    
    }, 10, 2 );

Web host looked into this and thinks the Read More button may be a cause? Here is what they shared:

Any ideas?

Is that a GB Button? Can you try recreating the GB button for pinterest?