NEXTGEN-GALLERY with facebook and twitter | wordpress tutorial or hack

banner-screen

On my ADD FACEBOOK LIKE BUTTON IN NEXTGEN-GALLERY Kajal report that code is not working so i also try this & have issue so i think i make version two with different options & demo so today i share with  you a version 2 of next-gen gallery hope you guy enjoy this tutorial don’t forget to subscribe & like us.

Quick UpdateBecause of short time i can’t get time to update in step by step i just only Facebook like button in it  Download Link

Next-gen Gallery Version 1.9.12

Just download it n use it work fines :) got some issue please update me

NEXTGEN-GALLERY V3 [Do you guys need it let me know in my fb fan-page n tell which features you want in it]

Key Features -

  • Add Facebook button
  • Add Twitter button
  • Add Image name
  • Add Style of shutter box
  • Add real demo demonstration
  • Add nextgen-gallery packag

Demo – Travel Pakistan

For html entities encode i use this tool  Html-Encoder

Note -
Use your Facebook appid id instead of mine get Facebook application id  Click here
Use your own twitter id instead of mine my twitter id is atranaz

We move step by step

Step one is install next-gen gallery from your dashboard or if you are hate coding or you are lazy then install this next gen gallery package for because i hack this one for you :) Download Now

Step two go to wp-content > plugins > nextgen-gallery > view

Step three open two files singlepic.php , gallery.php

Step four In singlepic.php find these lines

<a href="<?php echo $image->imageURL ?>" title="<?php echo $image->linktitle ?>" <?php echo $image->thumbcode ?> >
	<img class="<?php echo $image->classname ?>" src="<?php echo $image->thumbnailURL ?>" alt="<?php echo $image->alttext ?>" title="<?php echo $image->alttext ?>" />
</a>

and replace with this code

<a href="<?php echo $image->imageURL ?>" title="&lt;div style=&quot;float:left;width:150px;&quot;&gt;&lt;iframe src=&quot;http://www.facebook.com/plugins/like.php?
app_id=YOURFACEBOOKAPPID&amp;amp;href=<?php echo $image->imageURL ?>&amp;amp;send=false&amp;amp;layout=standard&amp;amp;width=50&amp;amp;show_faces=false&amp;amp;action=like&amp;amp;colorscheme=light&amp;amp;font=segoe+ui&amp;amp;height=30&quot; scrolling=&quot;no&quot; frameborder=&quot;0&quot; style=&quot;border:none; overflow:hidden;width:200px; height:30px;&quot; allowTransparency=&quot;true&quot;&gt;&lt;/iframe&gt;&lt;/div&gt;&lt;/iframe&gt;&lt;/div&gt;&lt;div class=&quot;tweets&quot;&gt;&lt;iframe allowtransparency=&quot;true&quot; frameborder=&quot;0&quot; scrolling=&quot;no&quot; src=&quot;http://platform.twitter.com/widgets/tweet_button.html?url=imageURL ?&gt;&amp;via=atranaz&amp;text=<?php echo $image->imageURL ?>&quot; style=&quot;width:130px; height:20px;&quot;&gt;Tweet&lt;/iframe&gt;&lt;/div&gt;&lt;div class=&quot;title_img_z&quot;&gt;<?php echo $image->alttext ?>&lt;/div&gt;" <?php echo $image->thumbcode ?> >
    <img src="<?php echo $image->thumbnailURL ?>" alt="<?php echo $image->alttext ?>" title="<?php echo $image->alttext ?>" />
</a>

Same thing with gallery.php find these lines

<a href="<?php echo $image->imageURL ?>" title="<?php echo $image->description ?>" <?php echo $image->thumbcode ?> >
                <?php if ( !$image->hidden ) { ?>
                <img title="<?php echo $image->alttext ?>" alt="<?php echo $image->alttext ?>" src="<?php echo $image->thumbnailURL ?>" <?php echo $image->size ?> />
                <?php } ?>
            </a>

and replace with this code

<a href="<?php echo $image->imageURL ?>" title="&lt;div style=&quot;float:left;width:150px;&quot;&gt;&lt;iframe src=&quot;http://www.facebook.com/plugins/like.php?
app_id=YOURFACEBOOKAPPID&amp;amp;href=<?php echo $image->imageURL ?>&amp;amp;send=false&amp;amp;layout=standard&amp;amp;width=50&amp;amp;show_faces=false&amp;amp;action=like&amp;amp;colorscheme=light&amp;amp;font=segoe+ui&amp;amp;height=30&quot; scrolling=&quot;no&quot; frameborder=&quot;0&quot; style=&quot;border:none; overflow:hidden;width:200px; height:30px;&quot; allowTransparency=&quot;true&quot;&gt;&lt;/iframe&gt;&lt;/div&gt;&lt;/iframe&gt;&lt;/div&gt;&lt;div class=&quot;tweets&quot;&gt;&lt;iframe allowtransparency=&quot;true&quot; frameborder=&quot;0&quot; scrolling=&quot;no&quot; src=&quot;http://platform.twitter.com/widgets/tweet_button.html?url=imageURL ?&gt;&amp;via=atranaz&amp;text=<?php echo $image->imageURL ?>&quot; style=&quot;width:130px; height:20px;&quot;&gt;Tweet&lt;/iframe&gt;&lt;/div&gt;&lt;div class=&quot;title_img_z&quot;&gt;<?php echo $image->alttext ?>&lt;/div&gt;" <?php echo $image->thumbcode ?> >
                <?php if ( !$image->hidden ) { ?>
                <img title="<?php echo $image->alttext ?>" alt="<?php echo $image->alttext ?>" src="<?php echo $image->thumbnailURL ?>" <?php echo $image->size ?> />
                <?php } ?>
            </a>

Wella ! we almost done but one view is remain so we have to put this code for it as-well so for this we move on to our next step

Step five go to wp-content > plugins > nextgen-gallery > lib & find the file  image.php

Step six find this function code

function get_href_link() {
		// create the a href link from the picture
		$this->href  = "\n".''."\n\t"; $this->href .= '

'.$this->alttext.'

'."\n".''."\n";

		return $this->href;
	}

and replace with this code

function get_href_link() {
		// create the a href link from the picture
		$this->href  = "\n".'<a href="'.$this->imageURL.'" title="&lt;div style=&quot;float:left;width:150px;&quot;&gt;&lt;iframe src=&quot;http://www.facebook.com/plugins/like.php?
app_id=YOURFACEBOOKAPPID&amp;amp;href=<?php echo $image->imageURL ?>&amp;amp;send=false&amp;amp;layout=standard&amp;amp;width=50&amp;amp;show_faces=false&amp;amp;action=like&amp;amp;colorscheme=light&amp;amp;font=segoe+ui&amp;amp;height=30&quot; scrolling=&quot;no&quot; frameborder=&quot;0&quot; style=&quot;border:none; overflow:hidden;width:200px; height:30px;&quot; allowTransparency=&quot;true&quot;&gt;&lt;/iframe&gt;&lt;/div&gt;&lt;/iframe&gt;&lt;/div&gt;&lt;div class=&quot;tweets&quot;&gt;&lt;iframe allowtransparency=&quot;true&quot; frameborder=&quot;0&quot; scrolling=&quot;no&quot; src=&quot;http://platform.twitter.com/widgets/tweet_button.html?url=imageURL ?&gt;&amp;via=atranaz&amp;text=<?php echo $image->imageURL ?>&quot; style=&quot;width:130px; height:20px;&quot;&gt;Tweet&lt;/iframe&gt;&lt;/div&gt;&lt;div class=&quot;title_img_z&quot;&gt; '.$this->alttext.' &lt;/div&gt;" '.$this->get_thumbcode($this->name).'>'."\n\t";
		$this->href .= '<img title="'.$this->alttext.'" alt="'.$this->alttext.'" src="'.$this->imageURL.'"/>'."\n".'</a>'."\n";

		return $this->href;
	}

Now we done the job i hope so you get the same result as i get :) if having issue kindly contact with me i m here for guide you.

Make-Over work -

CSS work for those who like their work looks pretty or elegant add this css on your existing theme also add this image in image folder

/* Next Gen code */

#shDisplay #shWrap img#shTopImg {
	padding:5px 5px 10px 5px;
	background:#fff;
	border:none;
}
#shTitle {
	background:#fff;
	padding:5px 7px 5px 7px !important;
	color:#666 !important;
	overflow:hidden !important;

}
.title_img_z {
	float:left;

}
#shName , .tweets {
	width:150px;
	float:left;
}
.tweets {}
.nav_wrap_img {
	float:right;
	padding:0 15px 0 0 !important;
}
#shDisplay div#shPrev  , #shDisplay div#shNext{
	float:right !important;
	width:25px !important;
}
#shDisplay div#shPrev a {

	background:url(images/arrow.png)no-repeat left 0;
	width:23px;
	height:17px;
	text-indent:-12000px;
	display:block;
}
#shDisplay div#shNext a {
	background:url(images/arrow.png)no-repeat right 0;
	width:23px;
	height:17px;
	text-indent:-12000px;
	display:block;

}
#shDisplay div#shPrev a:hover , #shDisplay div#shNext a:hover {
	zoom: 1;
	filter: alpha(opacity=70);
	opacity: 0.7;
}
#shCount {
	float:left;

}

 

My Future Raod map for my fans

  • add pinterest nextgen gallery added on new version but i add here with Facebook & twitter
  • add feature to share image not link
  • add comment-box

For get all these new updates kindly subscribe us or like us or follow us we are love to share update with you !

  • kellyrnh

    This is great! Thank you!!! Two things I notice…how can I get the tweets to not overlap the Facebook likes? And Facebook doesn’t show a thumbnail? This is the case when looking at your sample and on my own site.

    Thanks again for posting this!

  • beezwings

    Hi! I figured out how to get the thumbnail to preview in facebook. Within the iframe, change

    href=imageURL ?>
    to

    href= ?pid=pid;?>

    This also has the added effect that it will link to a navigable page in your site and not just the image file. I also did this for the twitter image url. Hope that helps!

    • Nixon

      HI beezwings,

      You have posted about sharing thumbnail and title in facebook by including ‘pid’… can you tell me where do i need to replace those parameters…

      Thanks in advanced

      • beezwings

        Sorry, it was so long ago, I don’t remember. However, there are several new plugins that do this all automatically. Hopefully you can find something!

  • Guest

    This is amazing! In this site we can comment too! Can you do that?

    Thanks man

  • Ederson Florêncio

    Hello man!.. Very Nice Tutorial, but, this is working? On DEMO i like many photos, but don’t appear on my facebook the “Like” Status…

    • http://twitter.com/Atranaz Zaheer

      Ya i also check this it might be some issue with fb :S anyway i’ll check in detail & then tell you :)

      • Andrea M.

        Same problem here…no like on facebook

        • http://www.facebook.com/fotograaf.roymohan Roy Mohan

          same here: no like on facebook

  • http://twitter.com/SimoBlog Simone

    Great even if i like much more the effect of this plugin http://www.bluejprojects.com/social-media/add-facebook-like-pinterest-pin-to-nextgen-gallery-images-in-wordpress/ even if is paid…

  • Charlene

    Hey there, I tried out your tutorial but I unfortunately only gain a Tweet button.
    I followed the steps very closely, here is my link if you would like to take a look. Maybe you could help me get this fixed? I’d like to have a facebook share button or at least a like button http://merlin.chibichiii.nl/images/arthur/
    Thnx in advance!

  • http://www.facebook.com/saynw Nico Wegher Heredia

    Thanks for step by step! I really worked!
    One doubt…how can I get the tweets to not overlap the Facebook likes?
    Thanks!

    • http://twitter.com/Atranaz Zaheer

      you need lil bit more css for do this :)

  • Andrea M.

    Nice work!!!!
    Works flawlessy!
    Keep attention on copying and paste the code, sometimes the code wrap on next line and can cause problems, like not showing the thumbnails (the code is present but there are some html syntax error that lead to not showing the thumbnails).
    I’ve tried other hacks before but they didnt work :)
    Good!
    Hope we will see this feature integrated on stock NextGen Gallery :)

    • tech

      Can you mention those HTML syntax error?
      I am trying it but because of these errors it is not working!
      Thanks.

  • JustanotherMuslimah

    AssalamoAlaikum,

    I followed all steps (many times):
    This is what I came up with: http://muslimspice.com/gallery

    • http://twitter.com/Atranaz Zaheer

      w’Sallam ,

      Its working fine on your website ….

      • JustanotherMuslimah

        I updated NextGen Plugin just now. And all these changed [fb like button etc.] disappeared! Please help!.

        • http://twitter.com/Atranaz Zaheer

          Dear Muslimah ,

          its not official hack of next gen gallery its just code trick whenever you update all work must me vanished :) anyways share your lin i’ll check it :)

  • http://www.facebook.com/fotograaf.roymohan Roy Mohan

    Done

    1) seems to work in IE not in Firefox
    2) when i like a photo it doesn’t appear on my facebookpage that i like it??

    Please advise; love this if it works!!!!

    Page

    http://wordpress.fotogaaf.nl/diversen/rilan-the-bombardiers-keizer-op-het-strandwalfestival-in-rijswijk/

  • Guest

    It seems like

  • ucms2012

    It seems like i cant get my galleries to show up once navigated to from an album page link. Any ideas why?

  • vwdragon

    Link not working :(
    “Step one is install next-gen gallery from your dashboard or if you are hate coding or you are lazy then install this next gen gallery package for because i hack this one for you Download Now”

    • http://twitter.com/Atranaz Zaheer

      sorry for link broken , i’ll uplaod soon ^ share it again :)

    • http://twitter.com/Atranaz Zaheer

      @7ef9d15f2e70616746ff3dec0338ee28:disqus download link is back / sorry for late reply had tight routine & got fever :S

  • nicowegher

    I noticed that after doing the process, my prev and next image links are not displaying. I think they are still there in second line I cannot see, how can I solve that?Thanks!

    • http://twitter.com/Atranaz Zaheer

      Dear Nicowegher kindly share your link or email me i’l check it out :)

  • http://www.golawski.net/ Golawski.net

    What about adding +1 Google Plus share button?

  • http://twitter.com/Atranaz Zaheer

    all my loving viewer i update the demo nextgen plugin & going to hack new code. I ‘ll update it soon !

  • Milan

    Dosn’t work, not showing like on facebook profil

  • Nemanja

    This don’t work it won’t display on fb profiles…Any idea to fix it?

  • matto

    Hi There!

    Thanks for the hack. It works for me but not 100% :( I only have tweet under the pic but no Facebook there. What goes wrong please? Thanks for Ur work.

  • kailash Shirsat

    hi where to upload arrow images? my pages not showing next & prev arrow images for my post at http://hindi-marathi-sms-messages.in/new-year-2013-scraps/

  • http://www.facebook.com/BabaAsheri Jonathan McCall

    Hello – I’m trying to use this on a photo gallery wordpress blog. I can’t seem to get it to work. Can you help?

    • http://twitter.com/Atranaz Zaheer

      Yes , sure you can share with me the project I’ll help out you , In the other side i m stuck in my work & i know nextgen gallery updates three time , so we need to tune our code according to latest nextgen !

      • http://twitter.com/BabaAsheri Jonathan McCall

        Thank you! My project is mccalled.com/photo/

  • bling

    Don’t work for me, next and prev button not showing. No Facebook like ant twitter showing, it’s not showing nothing but the css.

    • http://itc.webmaasters.com/ Zaheer Ahmad

      kindly double check your code

  • Nixon

    I have followed every steps of this great tutorial, i have facebook like button in every image.. when i click on like button it posts to facebook but i thumbnail and title of the images doesn’t post…. thumbnail is missing and in place of title complete link of the image is displayed…

    Any help would be really appreciated…

    Thanks in advanced..

    • Thomas Gruber

      I have exactly the same problem!
      Would be great if you could help us ^^

      • Nixon

        Seems like we are the only ones to be facing this problem.

        • Thomas Gruber

          Seems that facebook is not able to get a picture out of a lightbox.. it needs a image browser.. there must be a way to enable lightbox AND image browser..

    • http://itc.webmaasters.com/ Zaheer Ahmad

      just little tweaking in code i guess it should be done :) kindly share your code then may b i give you some assistance thanks

      • Rahul

        I have same issue, not showing image after like and no title display, showing full url instead of title, please help.

  • Rahul

    Please Update with share on pinterest, linked-in and can show facebook comments.
    Thanks.

  • Rahul

    I followed instruction from

    http://itc.webmaasters.com/nextgen-gallery-with-facebook-and-twitter-wordpress-tutorial-or-hack/#.Uf39rNJHIbD

    to share images of nextgen gallery on facebook.

    but when I click on like button image on facebook wall is not show even title is not display, it only show the url(thumbnail not display).

    I also used open graph and follow instruction given on

    http://blog.area256.com/?p=431

    but this also not worked for me…..

    need help.