Social Media sharing block I made

My brother was looking for a way for his wife to share photos from our family gallery 3 site to facebook. I took the example code block made by floridave and stripped it down to a simple block that displays a button for facebook, google+ and twitter. The block is very basic and doesn't have all the options that you get from the social sites developer area, but it works and allows for sharing.

I am a little unclear about how to go about releasing a module to the community so I just made this thread and attached the zip file.

The code in the HTML code for each of the Social media sites is based on the following developer documentation
Facebook
Google+
Twitter

You can enable or disable each and if you go into the view directory you can modify the code for each in the file for the services name:
facebook.html.php
google.html.php
twitter.html.php

If there is interest i might work on adding more code or switching the views out for variables where you paste the actual code from each site, but it was simpler for now to hard code the usage i wanted.

Sir I need same Facebook like module option in the social share module what can i do ...where can i change the code please help me.

Hmm i will fix my typical typos.

As for facebook like i can look at adding that to the social share module. All i would be doing is cloning some chunk of code from the facbook like module tempg linked to.

After i did the work i also found the addthis module floridave made. The location of that button was where i originally wanted to put the facebook share.

I will see if i can make the change tonight.

I have updated the module. I am attaching a zip here and I have put in a pull request to get the module into the contrib git repository. I will be working with git going forward.

I have added the Facebook like feature with some configuration options, far less than the Facebook like module has
I have added configuration settings for all the other buttons as well.

(edit)
Removing attachment

I resolved that issue. Silly test code. Attached an updated version to the first post and bharat has included social share in the contrib git repository too now.

There is no module to specify the visibility of the block. However other modules have admin settings for visibility of blocks so this module could be extended to do so.

Dave
_____________________________________________
Blog & G2 || floridave - Gallery Team

This is more a CSS, Facebook, and IE issue I think but, in IE8, the Facebook Like popup dialog, gets chopped off to where you barely see the buttons. In Firefox (10.0.1) this doesn't happen. I've tried moving the placement of the popup to the left with CSS but then in IE8 it just chops it off on the left side. Basically, it doesn't let any of the box go outside the Sidebar area (using the default theme essentially).

With Firefox, I can always see the whole Popup window (to the left or right of the Sidebar edge). I've noticed that the Google+ popup window doesn't seem to have this problem in IE8 but so far haven't seen any CSS that would let it do so. It's hard to examine as the window disappears any time the mouse moves away from it I'm sure there's some CSS override trick somewhere I can use or some modification to the Sidebar's CSS that will let it work but so far haven't found it. Frustrating! LOL

Thanks,
Mark H.

Using Gallery 3.0.2 - gallery.markheadrick.com

Between yesterday and today, Facebook changed the CSS related to the Like popup which changed its position relative to the Like button itself. But, anyway, I got it working and it turned out to be a simple fix. All I did in the end was add:

#g-sidebar {
   overflow: visible; 
}

Even though the overflow was never set to hidden, apparently IE8 assumed that anything that went outside the #g-sidebar div should be hidden. Now I'm a happy camper!

Thanks,
Mark H.

Using Gallery 3.0.2 - gallery.markheadrick.com

@MarkH

Any particular place where you added this css tidbit as there doesn't seem to be any .css files in the social_share module?

danke

Which module is this for - the one in this thread or Facebook Like? I guess what works for FB Like should work for this module, but I can't be sure.

Can you post or PM a url for your son's site, as the CSS may need to be adapted. It is a bit site-specific.

But I should warn you that there is a catch. You need to have a fixed pixel width for your gallery, e.g. like 1000px, so that it fits on a smaller screen and is 1000px wide and centred on a wider screen. This width should be enough for 3 columns of thus and the sidebar. IIRC I don't think it's possible to use my approach if your gallery uses the full (variable) width of the screen.

I think there's something wrong with the URL you posted, or the site is down.

I'm surprised that he had no problems with GD & FBL, as V5 of FBL should have had the same clipping problems in GD as social share (based on what I've read about SS).

I should have clarified earlier comment. If Social Share is in the sidebar then clipping should be easy to solve. Except that if the gallery uses 100% of the screen width then you may find that the expanded dialog is off the edge of the screen. This may need some sort of overall margin.

If you place one of these modules on thumbs pages at the bottom then the problems get much harder to solve. I'll take a look.

I will take a look at all the suggested changes including pinterest over the course of the week. I have been reading the comments. I have been too addicted to skyrim to take time to program anything.

Does gallery offer any tracking system for plugins like bugzilla? If not i should probably start tracking these requests in github.

If you are using Social Share module you may have noticed in generates JavaScript errors and fails to show Goggle+ widget. This is due to a typo in the modules/social_share/views/google.html.php

Line 14 is: x2po.async = true;
Line 14 should be: po.async = true;

I hope this helps someone.

Ted

I just installed this module and noticed a weird quirk and wondered if anyone else had seen it.

In Chrome and IE, the FB Share button isn't providing the proper link (I'm getting a "null" at the end of the link instead of the last part of the link i.e. rhinoblues.com/family/index.php/dad/stp05/null instead of rhinoblues.com/family/index.php/dad/stp05

It works correctly in Firefox.

I also don't have the FB Like button activated because once I did that, the Share button disappeared.

@rhino876: I haven't looked at the code, but, as an idea, you could use php to strip "/null" from the end of any URLs. Not necessarily the best solution, but assuming you haven't worked this out in the last month, this will at least make the module functional.

@Saur0n: Not ignoring you, but I'm without a test server right now. (Plus, I've been super busy lately.) I don't want to install this and play on the production server for obvious reasons.

Hi, I've the same problem with Facebook as Saur0n. Button doesn't work anymore.

Sometime back I had to go in and change the code due to changes Facebook made. Here's my /modules/social_share/views/facebook_like.html.php now:

(Think I had Facebook generate the code for a Like button and then I modified the code to match.)

<?php defined("SYSPATH") or die("No direct script access.");
$appId = module::get_var("social_share", "facebook_like_appId");
$selfURL = url::abs_current(true);
$codeType = module::get_var("social_share", "facebook_like_code_type");
$layout = module::get_var("social_share", "facebook_like_layout", "standard"); 
$action = module::get_var("social_share", "facebook_like_action", "like"); 
if (module::get_var("social_share", "facebook_like_show_faces")) {
	$show_faces = "true";
	$hite = 65;
} else {
	$show_faces = "false";
	$hite = 38;
}
if (module::get_var("social_share", "facebook_like_send")) {
	$send = "true";
} else {
	$send = "false";
}
?>

<div class="g-social_share-facebook_like">	
<?php if ($codeType == 'iframe'){ ?>
<iframe src="//www.facebook.com/plugins/like.php?href=<?= $selfURL; ?>
&amp;send=<?= $send ?>
&amp;layout=<?= $layout ?>
&amp;width=180
&amp;show_faces=<?= $show_faces ?>
&amp;action=<?= $action ?>
&amp;colorscheme=light
&amp;font
&amp;height=<?= $hite ?>
&amp;appId=<?= $appId ?>"
 scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:180px; height:<?= $hite ?>px;" allowTransparency="true"></iframe>
<?php } else { ?>
<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/en_US/all.js#xfbml=1&appId=<?= $appId ?>";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<?php if($codeType == 'xfbml'){?>
<fb:like href="<?= $selfURL; ?>" send="<?= $send ?>" width="180" show_faces="<?= $show_faces ?>" layout="<?= $layout?>"></fb:like>
<?php } else { ?>
<div class="fb-like" data-href="<?= $selfURL; ?>" data-send="<?= $send ?>" data-layout="<?= $layout?>" data-width="180" data-show-faces="<?= $show_faces ?>" ></div>
<?php } 
}
?>
</div>
<?php
/**
 * Only show the like button, css and JS if the item is vewable by the guest user 
 * as facebook is a guest user to get the thumb of the item.  If this is a dynamic 
 * album then use the root album to check to see if the guest has permissions.
 */
$guest = user::lookup("1");
$item = "";
if ($theme->item()) {
  $item = $theme->item();
} else {
  $item = ORM::factory("item", 1);
}
if (access::user_can($guest, "view", $item)) {
  $show_like_code = true;
}
?>

You might need to adjust the width and $hite values for your particular theme. The above code does still seem to work for me. Hope it helps.

- Mark H.

Using Gallery 3.0.4 - gallery.markheadrick.com

I added issues it to github. If there are other issues that people find as I am fixing things please report them at https://github.com/psychoph/gallery3-contrib/issues.

I have updated the zip file with the latest and greatest. I have done the following:
* Fixed facebook like to work better, it was having issues with actions and not creating any buttons
* Fixed facebook share I think it was working with chrome i did find a statement on some site i can't find now that mentioned to get it to work with older browsers you had to acc code the opening html tag, which i can't do in the block. Everything on facebook says share is deprecated now and to use the like button instead.
* I added pinterest and it works. For some reason on chrome the count was not displaying horizontally i don't know where the element is getting the display:none; from in the css.
* Added support for setting the block to oly display on image and movie sub pages. This is now on by default, which is a change in behavior.
* fixed the x2po issue.

I am going to try to get git hub updated my fork has the correct code however i have to remember how to push back to gallery contrib.

Hope this fixes things for people and I am sorry about the long delay in updates.

You can download the file from the first post. I just keep updating the one zip file with the most recent version so that people don't have to page through the forums if this thread gets huge. I also upload everything to github and put in a request for it to be added to the gallery-contrib

http://codex.gallery2.org/Gallery3:Modules:social_share also has the current information updated.

any issues please post at https://github.com/psychoph/gallery3-contrib/issues

I will have to look at this. The share button isn't really supported by facebook anymore. I would recommend the like button instead.

It looks like every which way i add the share button it comes up with null for the last part of the url. I can not find a single example that works and Facebook has taken down their documentation on it. I am going to remove the share button and migrate people to using the like button instead.

Base on @undagiga comment above it looks like custom.css needs a new value in it
[code]#g-column-right {overflow: visible;} [code]

I am unclear where custom.css is if it is the theme for the site or if it is something i can add to the module.

Not from what i can see in facebooks documentation. Facebook recommends the same change to the override if the like button is placed near the edge of the browser. It maybe that with your theme it needs to be a different css selector to actually affect the popup. Which theme are you using? I can test with that one on my test site and see if i can get the css to fix the issue.

It can be tricky to get later versions of FB modules to work in Greydragon. Not impossible, but tricky. The issue is the overflow:hidden one. For the FB like module, one option is to make sure that the XFBML version is *unchechecked* in the module admin options, as the XFBML version expands when you click a button and that's when the overflow hidden problem happens. I haven't tried the other version for a while, but IIRC it didn't have this problem. Not sure if the module that you're using has this option.

I looked at lilithimages and couldn't see any sign of FB like or any other social sharing module. I can provide more detailed comments if I can see it in action on your site.

U-G

I see your problem. It's very hard to reformat code that comes from FB, as it is delivered on-the-fly and it's rather detailed and complex. And believe me I've tried. It might be possible to find some custom CSS to do what you want, but it would mean spending a lot of time with no guarantee of success, especially if (as I suspect) the format for this is set inside some javascript. Actually, I tried, and I found that I might be able to narrow the width, but when I did that there wasn't enough height to see the submit buttons, and I couldn't find a way to increase it. FB tries to size this dynamically. I also tried shifting the whole thing to the left, but then I got clipping on the left.

I think the simplest way is to narrow the width of your gallery, and set the overflow property for the sidebar to visible. Try this code in your custom.css:

body { margin-right: auto; margin-left: auto; width: 1000px; }
#g-column-right {overflow: visible;}

You can set the width parameter to either a pixel value or a percentage, e.g. 75%. You will need to experiment.

I had some trouble using the like button on your site, not related to this I think. The pop-up dialog vanished rather quickly and in place of a like button there was a confirm button. Clicking the confirm button gave another confirm dialog and then I had successfully like the page, I think. I haven't seen this before. Perhaps it's intended behaviour in this module.