Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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

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

share|improve this question
    
Oh man, this is awesome. Thank you all so much for helping out. I'll tinker with it and get back with results. –  Rikard Sep 1 '10 at 20:53
    
Alright. I used your Share button Mike, just copied the code right into the widget. You can see it here 17juni.se Thanks all of you for a good learning experience. -Rikard –  Rikard Sep 1 '10 at 21:10
    
Hi @Rikard - Glad it helped. Can you mark the best answers with the checkmark and vote up any that are good answers? –  MikeSchinkel Sep 3 '10 at 21:22

4 Answers 4

Hi @Rikard:

@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!

share|improve this answer

Just use the $_SERVER variables:

$url = add_query_arg( 'u', $_SERVER["SERVER_NAME"].$_SERVER["REQUEST_URI"], 'http://www.facebook.com/sharer.php' );
share|improve this answer
    
NOTE: add_query_arg() does not urlencode: urlencode($_SERVER["SERVER_NAME"].$_SERVER["REQUEST_URI"]) on your own. Please update your answer accordingly. –  hakre Sep 1 '10 at 16:56
    
@Joe Hoyle: Also to @hakre's comment that code doesn't work in Text Widget. –  MikeSchinkel Sep 1 '10 at 19:03
    
@MikeSchinkel ahh didn't realise that! Not sure how I got 2 vote ups in that case. –  Joe Hoyle Sep 1 '10 at 21:01
    
@hakre Why does it need urlencode ing? It's just using the $_SERVER variables just as WordPress does in add_query_arg() ( github.com/dxw/wordpress/blob/… ) and that's not urlencode ed –  Joe Hoyle Sep 1 '10 at 21:03
    
@Joe Hoyle - Because people up vote answers that look good without first testing that they work! (hell, I've done it. :) –  MikeSchinkel Sep 1 '10 at 22:39

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>
share|improve this answer

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>
share|improve this answer
1  
That’s not the WordPress way. You never want to load an additional jQuery from a second source. And scripts should be loaded per API. –  toscho Jun 10 '11 at 14:13

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.