Accessing the Current URL in a Text Widget for a Facebook Share Button?

2 Views

I’m creating a “Share this Page”– widget that needs to grab the current URL and append it to a Facebook URL like this:

http://www.facebook.com/sharer.php?u=http://myurl.com/a-specific-page

Read More

I’m using a regular text widget. How can I access the current URL and put it into the sharing link?

Post Views: 2

Related posts

Leave a Reply

4 comments

  1. @user653 is correct, you can’t do it in a text widget with PHP but you can do it in a text widget using JQuery/Javascript. Here’s how.

    Starting with the Facebook Share Button HTML

    I assume you plan to use use the Facebook Share Button and thus will have HTML code in your widget that will look like this?

    <a name="fb_share"></a>
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share"
        type="text/javascript">
</script>

    Use jQuery and Javascript's windows.location object.property

    If yes then you can just add all the following code into your widget:

    <script type="text/javascript">
jQuery(document).ready(function($) {
  $("fb_share").attr("share_url") = encodeURIComponent(window.location);
});
</script>
<a name="fb_share"></a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript">
</script>

    Be sure to Enqueue jQuery in your Theme’s functions.php File

    However, in order for the above code to work you will probably need to enqueue the included jQuery script bundled with WordPress add the following line of code into your theme’s functions.php (unless some other plugin is already doing so):

    wp_enqueue_script('jquery');

    Facebook Like Button as a WordPress Shortcode

    Ironically just I implemented a Facebook Like Button as a Shortcode a few days ago for a client so I thought I’d also share with you (pun intended. 😉 You can see how we got the current URL from the $_SERVER variable. I scarfed this exact code from the redirect_canonical() function in /wp-includes/canonical.php'. You can also just include this in your theme’s functions.php file:

    add_shortcode('facebook-like','my_facebook_like_button');
function my_facebook_like_button($echo=true) {
  // Generate the HTML required to place a Facebook "Like" button inside a shortcode
  // See Docs: http://developers.facebook.com/docs/reference/plugins/like
  $requested_url  = is_ssl() ? 'https://' : 'http://';
  $requested_url .= $_SERVER['HTTP_HOST'];
  $requested_url .= $_SERVER['REQUEST_URI'];  
  $html =<<<HTML
<iframe src="http://www.facebook.com/plugins/like.php?href={$requested_url}&amp;layout=button_count&amp;show_faces=false&amp;width=60&amp;action=like&amp;font=verdana&amp;colorscheme=light&amp;height=21&amp;ref=blog"
        scrolling="no" frameborder="0"  allowTransparency="true" style="border:none; overflow:hidden; width:90px; height:25px"></iframe>
HTML;
  if ($echo)
    echo $html;
  else
    return $html;
}

    What it Looks Like

    Here’s a screenshot showing usage. Note that since text widgets don’t process the content filters so the shortcode doesn’t work in a text widget. I looked quickly and didn’t find a plugin that adds text widgets that can process shortcodes but it wouldn’t be hard to write one, or hard to write a widget that just adds a Facebook Share or Like buttons either. FWIW.

    WordPress Site Screenshot showing Facebook Like and Buttons as Shortcodes and in Text Widgets

    Hope this helps!

  3. You can’t make the contents of a text widget dynamic like that.
    Get “Executable PHP widget” (http://wordpress.org/extend/plugins/php-code-widget/), for example.
    Now you can add your text etc including php code to insert the variable URL.

    [edit]
    Ref http://developers.facebook.com/docs/reference/plugins/like.
    Put this into your php code supporting widget:

      <?php global $post; ?>
<iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo urlencode(get_permalink($post->ID)); ?>&amp;layout=standard&amp;show_faces=false&amp;width=450&amp;action=like&amp;colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:450px; height:60px;"></iframe>

  4. Here’s some complete code for you:

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>

<a href="http://twitter.com/share" class="twitter-share-button" data-url="" data-count="vertical" data-via="arkliapp">Tweet</a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like id="fb_like" href="" layout="box_count" show_faces="true" width="55" font=""></fb:like>

<script type="text/javascript">
jQuery(document).ready(function($) {
$("#fb_like").attr("href") = encodeURIComponent(window.location);
$(".twitter-share-button").attr("data-url") = encodeURLComponent(window.location);
});
</script>