add permalink to social icons

Your icons are relying on javascript to determine what is being shared. Facebook uses the data-href attribute to let you specify this. Each social site likely has their own way of doing this, you’d need to check their API docs to determine the correct way to specify what’s being shared.

Another approach might be to forgo the javascript methods altogether. Most social sites accept this sort of information as URL parameters. You’d still need to check their docs for the correct link and query string format. Each site will have different requirements.

Once you know all of the proper formatting, you would use PHP to dynamically generate the proper HTML right on the page template. If this occurs on several templates, create a custom template tag that outputs the HTML and just add the tag to each template.

I looked a bit more in the documentation of those sharing icons.
I’m pretty sure that if I can add this line of code there it will work <script type="text/javascript" charset="utf-8" >var bShareOpt = {url: "<?php the_permalink(); ?>"};</script>
So normally it’s set to url: ""; which directs to the page it’s in. If I can add a piece of PHP code in javascript it will work, but I guess that’s not allowed?
I tried to look up how to retrieve $post_id in wordpress by using javascript although I didn’t come very far…

I don’t know if it’s really not allowed or not. From my own observations, if you output a lot of javascript on a page without enqueueing it, it fails to work properly. I’ve no idea why though. You ought to get away without enqueueing little snippets like that. I don’t think part of it coming from PHP has anything to do with it.

Still, it wouldn’t be a bad idea to formalize the code, off loading the bulk of it to an external page. You could just output an empty container on the page and have external script fill it in on page load. With that approach you really do need to enqueue your script. You can assign PHP variable values to javascript ones by using wp_localize_script().

I see, I looked into wp_localize_script() but not sure how to use it.
Using var bShareOpt = {url: "<?php the_permalink(); ?>"} does actually paste an article permalink. Problem is it pastes the last article on that page instead of the one I clicked on.
What could cause this?
Cheers

It probably has the last article because the_permalink() was called outside of the loop. You should use get_permalink() outside of the loop. The same problem also happens inside custom WP_Query loops, the solution is the same.

I’m not sure what else to tell you about localize script other than work from the examples. It might help you to know that what happens on your page as a result is a script block appears in the head section with lines like this:
var bShareOpt = {url: "https://example.com"};

The specifics of each line are what you passed as parameters when you localized the script. Why not just do this directly instead of localizing? I don’t really know. I suspect more is going on behind the scenes that makes everything work properly, but I don’t know what that might be. Anyway, if you are not enqueueing your script, you cannot use the localize script function either.

You should also know that the footer social links are currently malformed on your site – most of the anchor tags are not closed. Your HTML is structured like this:
<a>label<a>label2<a>label3</a>

I haven’t checked any others.

If I use get_permalink(2343) it returns the correct post. So that works – meaning you were right about calling the $post from outside the loop.

https://tommcfarlin.com/get-permalink-outside-loop/
I read several documentations that something like:

function my_function() {
  global $post;
  get_permalink($post->ID);
}

will make it so it can be called outside the loop.

So `<script type=”text/javascript” charset=”utf-8″ >var bShareOpt = {url: “<?php echo my_function(); ?>”};</script>
should work right? But it doesn’t :)`

Yeah, you can’t believe everything someone posts on the ‘net. Mr. McFarlin is wrong. I hate trashing people that mean well, in all fairness we don’t know in what context he was suggesting using global $post, and the post is kinda old, maybe it used to work that way in older versions ??

That said, perhaps the global $post would work for you, if his function was correct. It’s not returning anything! The last line should be return get_permalink($post->ID); Oops! ?? Try that before we go for something fancy.

In fact, how you determine the proper post ID is all about context. The global $post does work in some contexts. You can sometimes get the ID out of get_queried_object(). Or simply move the script block inside the loop if there’s one for each post anyway. Or a function call could be placed inside the loop, which passes the ID or URL as a parameter. The called function does all the work, using the passed ID or URL in it’s output. Something like this could be implemented in either javascript or PHP.

It seems like using the get_queried_object() is the way to go then.

I found some code but not sure how to implement it with limited php knowledge ?? *shame*

<?php
if (is_singular()) {
    $post_id = get_queried_object_id();

    // or get the whole object
    $post = get_queried_object();

    // or do the first one differently
    $post_id = get_queried_object()->ID;
}

based on documentation of:
get-a-posts-id
wordpress-get-the-page-id-outside-the-loop
accessing-post-id-outside-of-the-loop-for-listing-child-pages

Cheers

Nothing like a real world problem to get you to learn more about something ??

I’d forgotten about get_queried_object_id()! Good find. You could in theory just do this:
<?php echo get_permalink( get_queried_object_id() ); ?>

The problem with queried object functions is they rely on there being a single queried object, thus the if_singular(). Didn’t you say your code is on your home page or other multiple post page? (too lazy to re-read) In that case your code really needs to be in the loop, otherwise how is any code to know which post a user wants to like? Or how is a user to know which post the like button is for?