Ask your WordPress questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

Events Manager and Facebook Share WordPress

  • SOLVED

I am using the events manager plugin --http://wordpress.org/extend/plugins/events-calendar/

I need to add the FB share button so people can share the event on the single event page.
For example on this page: http://sitename.com/workshops/event/workshop-name

I need to make sure that:

1. The correct URL gets shared (right now, it is sharing http://sitename.com/workshops/ instead of the correct URL - http://sitename.com/workshops/event/workshop-name

2. I need to make sure the correct title and description get shared

3. Ideally, would like to add the code to either the single event settings area or in a template


This is the code I had in the single events setting box (I took it out since it was a live site)

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


This was the open graph code I was using:


<meta property="og:type" content="activity" />
<meta property="og:title" content="<?php the_permalink() ?>" />
<meta property="og:url" content="<?php the_permalink() ?>"/>
<meta property="og:site_name" content="sitename" />
<meta property="og:description" content=""/>



Question:

What is the correct FB code / opengraph info to use? How do I get it to show the correct information since the events are dynamically generated?

Answers (4)

2011-11-07

Clifford P answers:

I'd be glad to work with you on this. You may message me with the link to your actual page(s) so I can make sure to get what you need.


Clifford P comments:

My last email for the night (from a minute ago)...


While waiting for FTP account (that might never come), here’s some helpful info to get you in the right direction if you wanted to get along doing it yourself:

...

I understand better what your WPQ meant… you entered that share button code to the actual event’s text box...

Here’s what I’d recommend…

1) Create a new app in Facebook – all you’re needing is a unique App ID
a. https://developers.facebook.com/apps - click Create New App
2) Visit http://developers.facebook.com/docs/reference/plugins/like/ and select your preferred settings.
a. Leave the URL field blank. (we can change it later as needed)
b. Click Get Code, then make sure to select the proper FB App ID from the dropdown box.
c. Follow the instructions (copy/paste)
3) Use a plugin like Post Snippets (http://wordpress.org/extend/plugins/post-snippets/) to save the code.
a. Enter the code and save as a snippet
i. For example: Title=fbshare, Variables=n/a, Snippet=<div class="fb-like" data-send="true" data-width="450" data-show-faces="true"></div>
b. Add this new “fbshare” snippet shortcode to your event’s page in the WYSIWYG editor.

All that might be able to be handled by a Facebook plugin, but the Open Graph data definitely can be: http://wordpress.org/extend/plugins/like-button-plugin-for-wordpress/

Or else we can do it manually, following the protocol at http://developers.facebook.com/docs/opengraph/


We’re having a lightning storm so computer’s going off now. I hope this helped or I hope to receive proper login information tomorrow to do it for you.

Thank you. Good night.

2011-11-08

Luis Abarca answers:

Instead of share button, you should use the Like button, share button is deprecated.

Follow the steps mentioned by Cliff P, create an App and go to FB social plugins and fill the like button form.

You should get something like this:


...
<body>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/es_LA/all.js#xfbml=1&appId=<strong>333501550331</strong>"; // you app ID
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
...

// in the loop
<?php while (have_posts()): ?>
...
<h2><?php the title() ?></h2>
<div class="fb-like" data-href="<?php the_permalink() ?>" data-send="false" data-width="450" data-show-faces="true" data-action="recommend"></div>
...
<?php endwhile ?>


minima comments:

Hi All -

Thanks for the responses - -however, the events plugin does not create posts or pages in the traditional sense -- there is no loop for me to modify. It has its own settings page (not a WSYWIG/post/page) where I can paste in html code (not php) -- here are some of the specific placeholder codes that are referenced - - http://wp-events-plugin.com/documentation/placeholders/

I have inserted the script code (for the like button) as noted above -- however, what happens is that neither the description nor the correct title displays when "liking" the event. All is get is "xxx liked a link" with not description or title.

Thanks!

2011-11-09

Gabriel Reguly answers:

Hi Minima,

You will need to adjust your theme for this solution.


<?php
/*
* This page displays a single event, called during the em_content() if this is an event page.
* You can override the default display settings pages by copying this file to yourthemefolder/plugins/events-manager/templates/ and modifying it however you need.
* You can display events however you wish, there are a few variables made available to you:
*
* $args - the args passed onto EM_Events::output()
*/
global $EM_Event;
/* @var $EM_Event EM_Event */
if( $EM_Event->status == 1 ){
?>
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
<a name="fb_share" type="button" share_url="<?php echo $_SERVER['REQUEST_URI'] ?>"></a>
<meta property="og:type" content="activity" />
<meta property="og:title" content="<?php echo $_SERVER['REQUEST_URI'] ?>" />
<meta property="og:url" content="<?php echo $_SERVER['REQUEST_URI'] ?>" />
<meta property="og:site_name" content="sitename" />
<meta property="og:description" content="" />
<?php
echo $EM_Event->output_single();
}else{
echo get_option('dbem_no_events_message');
}
?>


Or you can edit <em>/wp-content/plugins/events-manager/templates/templates/event-single.php</em>, which is <strong>not recommended</strong> as it will be overwritten whenever the plugin is updated.

Regards,
Gabriel


Gabriel Reguly comments:

Hi,

You can see it working here: [[LINK href="http://wp.ppgr.com.br/events/event/oralty-in-james-joyce-conference/"]]http://wp.ppgr.com.br/events/event/oralty-in-james-joyce-conference/[[/LINK]]

Regards,
Gabriel


minima comments:

Gabriel --

This makes sense -- I am out of the office until Monday, but will try it when I return. Ideally, I would not want to update any core files due to upgrading.

I will let you know how it turns out!


Gabriel Reguly comments:

Hi minima,

Unfortunately the prize will not be available until Monday.

Can we make an agreement?

You vote for me before the question expires and if the solution is not good for you I'll send you a full refund, either by posting a question here or via PayPal.

Regards,
Gabriel


minima comments:

Gabriel -- what file do you recommend that I paste this code in?


Gabriel Reguly comments:

Hi Minima,

I am going to bed now, it is almost 2 am here.

Recommended file is <em>yourthemefolder</em>/plugins/events-manager/templates/event-single.php

Regards,
Gabriel

P.S. My test was done changing the plugin file, but that is bad practice.


minima comments:

Unfortunately, this doesn't work on your test site or on my site -- I get the message "This could not be shared"


Gabriel Reguly comments:

Oh really? That is a shame, it surely works for me.

Would you mind adding me as friend in facebook?

So I can share the post in a message to you.

https://www.facebook.com/gabriel.reguly

Regards,
Gabriel


Gabriel Reguly comments:

Sorry, I jumped the gun.

New code in seconds. :-)


minima comments:

Hi Gabriel -- ok FB request made -- no rush -- get some sleep and maybe we can chat tomorrow?
Thank you!


Gabriel Reguly comments:

Ok, here it goes....

<?php
/*
* This page displays a single event, called during the em_content() if this is an event page.
* You can override the default display settings pages by copying this file to yourthemefolder/plugins/events-manager/templates/ and modifying it however you need.
* You can display events however you wish, there are a few variables made available to you:
*
* $args - the args passed onto EM_Events::output()
*/
global $EM_Event;
/* @var $EM_Event EM_Event */
if( $EM_Event->status == 1 ){
?>
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
<a name="fb_share" type="button" share_url="<?php echo home_url() . $_SERVER['REQUEST_URI'] ?>"></a>
<meta property="og:type" content="activity" />
<meta property="og:title" content="<?php echo home_url() . $_SERVER['REQUEST_URI']?>" />
<meta property="og:url" content="<?php echo home_url() . $_SERVER['REQUEST_URI'] ?>" />
<meta property="og:site_name" content="your sitename" />
<meta property="og:description" content="your description" />
<?php
echo $EM_Event->output_single();
}else{
echo get_option('dbem_no_events_message');
}
?>


Now fully tested ;-)

Regards,
Gabriel


Gabriel Reguly comments:

Hi Minima,

Any progress?

Kind Regards,
Gabriel


Gabriel Reguly comments:

Hi,

Would you mind voting in the next 2 hours?

Regards,
Gabriel

2011-11-09

Just Me answers:

The code you supplied has two errors. A php command should end with a ; semicolon


<meta property="og:title" content="<?php the_permalink(); ?>" />

<meta property="og:url" content="<?php the_permalink(); ?>"/>