Social Media buttons stripped from search results

[trw226Participant]

Hello,

I would like to include social media buttons below the excerpts which are displayed for the search results, but Ajax Search Pro seems to be stripping the buttons from below each search result. I can display social media buttons in excerpts anywhere EXCEPT the Ajax Search Pro results. The type of social media plug-in I use (Social Media Feather, AddtoAny Share, Easy Social Share Buttons), does not seem to make a difference.

Any ideas on how to do this in Ajax Search Pro results? (shortcodes? add something to the “HTML Tags exclude from stripping content” parameter?) It seems to be an important compatibility feature–if people are searching with Ajax Search Pro and find something they like, a product, a movie, etc., the first thing we want them to do is share it with others on Pinterest, Twitter, Facebook, etc.

Best,
Tom

• This topic was modified 7 years, 5 months ago by  trw226.

[Ernest MarcinkoKeymaster]

Hi!

The reason why you don’t see them is because the result objects are not the same as for example posts on an archive page – because of the difference in context.

I’ve looked at one of the plugins “Social media feather”, it has a great shortcode, where it is possible to add the URL, which is neccessary in this case – because the shortcode will not be able to recognize the result as a post, therefore won’t know it’s url.

I’ve put this code into the functions.php file in my active theme directory:

This appends and executes the social media share shortcode with the proper url. After that, my results looked like this: https://i.imgur.com/9Ga4MY6.png

I also turned off the Make the whole result area clickable? option on the Layout Options -> Results Behavior panel: https://i.imgur.com/WDFX6bQ.png

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[trw226Participant]

This worked great! Thanks

[Ernest MarcinkoKeymaster]

You cannot access this content. Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[trw226Participant]

Ernest,

Is there a way to add the social media button shortcodes to the end of excerpt text, instead of underneath the each entire search result? In a vertical layout, the picture typically appears on the left, and the title and excerpt text on the right. I would like to center the social media buttons under the excerpt text, but it is not obvious how to select just that portion of the search result object and add the shortcode to it.

Thanks,
Tom

[Ernest MarcinkoKeymaster]

Hi Tom,

In this case, can you try changing the code I suggested to this:

On my test environment this seems to be working, I hope it helps!

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[trw226Participant]

Hi Ernest,

The code you suggested does not work as expected. I think the <div> you included containing the shortcode interferes with the <div> containing the image, and renders the social media buttons into a row below the image. Because I am not sure if my initial inquiry was clear, I am including pictures highlighting what I am trying to do.

Your consideration is greatly appreciated.
Thanks,
Tom

Attachments:

You must be logged in to view attached files.

[Ernest MarcinkoKeymaster]

Hi Tom,

Unfortunately it looks as the desired version on my end: https://i.imgur.com/iUF1gDT.png

It suggests to me, that this very much depends on the actual situation. There might be different CSS rules for default div behaviors, or that the layout of the shortcode might be different. It’s impossible to tell without actually seeing it.

As a final solution, you could try replacing the code with this:

Now, instead of the inline styles, there is an class element, so we can apply different CSS to it. I will list a few possible solution, try them out, and let’s hope one of them fits at least a little bit:

1. Try:

.asp_social_cont {
    margin: 0 auto !important;
    text-align: center !important;
    width: auto !important;
}

2. Try:

.asp_social_cont {
    margin: 0 auto !important;
    text-align: center !important;
    width: auto !important;
    float: right !important;
}

3. Try:

.asp_social_cont {
    margin: 0 auto !important;
    text-align: center !important;
    width: auto !important;
    float: left !important;
}

4. Try:

.asp_social_cont {
    margin: 0 auto !important;
    text-align: center !important;
    width: auto !important;
    display: inline !important;
}

Try each of these custom CSS rules one by one to see if they change anything. Let’s hope they do.

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[Author]

Posts