Colorbox URL Params for Facebook Like

Question

I have an issue of passing the ? and = through my url since I am using drupal (although i think it doesn't matter drupal or static site).

Each media content type I have needs a path of localhost/media/video?open=?cbox10

Pathauto module has this for each media asset content type. media/videos?open=?cbox[nid]

The node url then looks like http://localhost/media-gallery/images%3Fopen%3D%3Fcbox14

Let me know if I'm wrong but i believe I need to now encode/decode the url using php. Each of these node urls needs to directly open color box on the videos page.

I was looking into urlEncodeComponent but not sure how to implement it. I imagine it would be in my page.tpl.php and be decoded whenever those characters are present.

Can I possibly encode the value of the URL's within my jquery or php?

If anyone has knowledge of path auto module that I am not utilizing, please let me know. I have already tried to 'not replace' specific characters in my aliased url but its not working as expected, since it still shows up decoded.

I need this url encoded in order to pass the correct link to open graph tags for each unique piece of content on my page.

Currently have this displaying for each video asset page:

<meta property="og:url" content="http://localhost/media-
gallery/images%3Fopen%3D%3Fcbox14" />

which needs to be encoded to media/videos?open=?cbox14

Jquery to directly open color box according to unique asset ID

// Colorbox direct linking
  // Get the cb id in url or set false if not found
    var colorboxId = (window.location.href.indexOf('open=')==-1) ?
        false :
        window.location.href.slice(window.location.href.indexOf('open=') + 'open='.length + 1).split('&')[0];

    // Instantiate all colorboxes on the page
    $(".colorbox-inline").colorbox();

    // If id of colorbox was sent in url, open it now
    if(colorboxId !== false) {
    $("#" + colorboxId).colorbox({open:true});
    }   

Currently Testing...doesn't work:

    <script>

$(document).ready(function() {
    var ogurl = $('meta[property="og:url"][content]').prop("content");

        $( ogurl ).prop("content", 
            decodeURIComponent( ogurl );
});


    </script>

It works for what it is but how can I ensure my url is encoded properly so that facebook og:url can pick up the decoded url.

thanks so much!

Answer 1

If you're writing this in PHP you'll better decode it in PHP too.

echo '<meta property="og:url" content="' . urldecode("http://localhost/media-
gallery/images%3Fopen%3D%3Fcbox14") . '" />';

Otherwise use jQuery but I'm not sure if this can be done because Facebook executes JavaScript too and you should maybe modify it for (ex. click event).

$('meta[property="og:url"][content]').each(function() {
    $(this).prop("content", decodeURIComponent($(this).prop("content")));
});