Add Facebook Like, Tweet, and Google +1

Started by PokémonS, January 02, 2013, 01:42:20 PM

Previous topic - Next topic

PokémonS


Add Facebook Like, Tweet, and Google +1

Description
This mod adds Facebook Like, Twitter Tweet, and Google +1 to the first post which placed at the bottom.

How it works
Install this mod. Go to Administration Center » Configurations -> Modification Settings -> Miscellaneous to setting this mod. Please tick Enable socialization button (Facebook, Twitter, and Google+) first!

Feature Set
You can tick:
- Enable socialization button (Facebook, Twitter, and Google+)
- Show Facebook Like icon in the first post
- Show Twitter Tweet icon in the first post
- Show Google +1 icon in the first post

Screenshots
http://custom.simplemachines.org/mods/index.php?action=download;mod=3559;id=214777;image
http://custom.simplemachines.org/mods/index.php?action=download;mod=3559;id=214779;image

Versions

January 5, 2013 - v1.0.3a
- Fixed Tweet button (data-via & data-lang has been removed)

January 3, 2013 - v1.0.3
- Now the buttons are centered.

January 3, 2013 - v1.0.2a
- Fixed minor changes.

January 2, 2013 - v1.0.2
- First release.

Note
My first mod ._.

License
きみと手をつなごう つらいときはもっと
ゼロからはじめよう ほら ほら 手をつなごう
みんな手をつなごう つらいときはもっと
力を合わせよう ほら ほら 手をつなごう

4Kstore

Congratulation for your first mod, looks great!

¡¡NEW MOD: Sparkles User Names!!!

PokémonS

きみと手をつなごう つらいときはもっと
ゼロからはじめよう ほら ほら 手をつなごう
みんな手をつなごう つらいときはもっと
力を合わせよう ほら ほら 手をつなごう

winsoft

that looks great, what i was looking for.

Colin

Congrats and nice job. I hope to see more mods in the que from you :).
"If everybody is thinking alike, then somebody is not thinking." - Gen. George S. Patton Jr.

Colin

winsoft

Can we show the buttons on top the content instead?

PokémonS

Quote from: Colin on January 03, 2013, 05:09:58 AM
Congrats and nice job. I hope to see more mods in the que from you :).

Thanks Colin :)

Quote from: winsoft on January 03, 2013, 05:12:26 AM
Can we show the buttons on top the content instead?

Cut this code from Display.template.php

// Add Facebook Like, Tweet, and Google +1
if (!empty($modSettings['socialization_onoff'])) {
if ($message['id'] == $context['topic_first_message']) {
echo '
<div style="margin-left:auto;margin-right:auto">';

// Show Facebook Like icon in the first post
if (!empty($modSettings['facebook_like'])) {
echo '
<iframe src="http://www.facebook.com/plugins/like.php?href=', $scripturl, '?topic=', $context['current_topic'], '&amp;send=false&amp;layout=button_count&amp;width=100&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=20" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:20px;" allowTransparency="true"></iframe>';
}

// Show Twitter Tweet icon in the first post
if (!empty($modSettings['twitter_tweet'])) {
echo '
<a href="https://twitter.com/share" class="twitter-share-button" data-url="', $scripturl, '?topic=', $context['current_topic'], '" data-counturl="', $scripturl, '?topic=', $context['current_topic'], '" data-via="PokeStarsIndo" data-lang="en"></a><script type="text/javascript">!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>';
}

// Show Google +1 icon in the first post
if (!empty($modSettings['googleplus_plusone'])) {
echo '
<div class="g-plusone" data-size="medium"></div><script type="text/javascript">(function() {var po = document.createElement("script"); po.type = "text/javascript"; po.async = true;po.src = "https://apis.google.com/js/plusone.js";var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(po, s);})();</script>';
}

echo '
</div>
<br />';
}
}


And move it to after this code in Display.template.php:

<div class="post">';
きみと手をつなごう つらいときはもっと
ゼロからはじめよう ほら ほら 手をつなごう
みんな手をつなごう つらいときはもっと
力を合わせよう ほら ほら 手をつなごう

Gryzor

Quote from: PokémonS on January 03, 2013, 06:06:50 AM
Cut this code from Display.template.php

// Add Facebook Like, Tweet, and Google +1
if (!empty($modSettings['socialization_onoff'])) {
if ($message['id'] == $context['topic_first_message']) {
echo '
<div style="margin-left:auto;margin-right:auto">';

// Show Facebook Like icon in the first post
if (!empty($modSettings['facebook_like'])) {
echo '
<iframe src="http://www.facebook.com/plugins/like.php?href=', $scripturl, '?topic=', $context['current_topic'], '&amp;send=false&amp;layout=button_count&amp;width=100&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=20" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:20px;" allowTransparency="true"></iframe>';
}

// Show Twitter Tweet icon in the first post
if (!empty($modSettings['twitter_tweet'])) {
echo '
<a href="https://twitter.com/share" class="twitter-share-button" data-url="', $scripturl, '?topic=', $context['current_topic'], '" data-counturl="', $scripturl, '?topic=', $context['current_topic'], '" data-via="PokeStarsIndo" data-lang="en"></a><script type="text/javascript">!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>';
}

// Show Google +1 icon in the first post
if (!empty($modSettings['googleplus_plusone'])) {
echo '
<div class="g-plusone" data-size="medium"></div><script type="text/javascript">(function() {var po = document.createElement("script"); po.type = "text/javascript"; po.async = true;po.src = "https://apis.google.com/js/plusone.js";var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(po, s);})();</script>';
}

echo '
</div>
<br />';
}
}


And move it to after this code in Display.template.php:

<div class="post">';

This is interesting, can you tell where exactly this modification places the buttons? In my view, the buttons should be separate from the post content. The best position for them would be in the post's title bar...

Thanks, looking good!

PokémonS

#8
Quote from: Gryzor on January 04, 2013, 07:44:40 AM
This is interesting, can you tell where exactly this modification places the buttons? In my view, the buttons should be separate from the post content. The best position for them would be in the post's title bar...

Thanks, looking good!

But, one thing. If you put those buttons before content, the buttons load it early than the content, and makes your forum laggy. D:

And, What would be happen if the buttons put in the post`s title bar, but the tittle is long?



Maybe this place is better?



The code is:

In Display.template.php, find:

// Now show how many guests are here too.
echo $txt['who_and'], $context['view_num_guests'], ' ', $context['view_num_guests'] == 1 ? $txt['guest'] : $txt['guests'], $txt['who_viewing_topic'], '
</p>';
}


Add this after that:

// Add Facebook Like, Tweet, and Google +1
if (!empty($modSettings['socialization_onoff'])) {
echo '
<div style="margin-left:auto;margin-right:auto;text-align:left;padding-left:5px">';

// Show Facebook Like icon in the first post
if (!empty($modSettings['facebook_like'])) {
echo '
<iframe src="http://www.facebook.com/plugins/like.php?href=', $scripturl, '?topic=', $context['current_topic'], '&amp;send=false&amp;layout=button_count&amp;width=100&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=20" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:20px;" allowTransparency="true"></iframe>';
}

// Show Twitter Tweet icon in the first post
if (!empty($modSettings['twitter_tweet'])) {
echo '
<a href="https://twitter.com/share" class="twitter-share-button" data-url="', $scripturl, '?topic=', $context['current_topic'], '" data-counturl="', $scripturl, '?topic=', $context['current_topic'], '" data-lang="en"></a><script type="text/javascript">!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>';
}

// Show Google +1 icon in the first post
if (!empty($modSettings['googleplus_plusone'])) {
echo '
<div class="g-plusone" data-size="medium"></div><script type="text/javascript">(function() {var po = document.createElement("script"); po.type = "text/javascript"; po.async = true;po.src = "https://apis.google.com/js/plusone.js";var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(po, s);})();</script>';
}

echo '
</div>';
}
きみと手をつなごう つらいときはもっと
ゼロからはじめよう ほら ほら 手をつなごう
みんな手をつなごう つらいときはもっと
力を合わせよう ほら ほら 手をつなごう

Gryzor

Hmmm it is better indeed; my objection (if you can call it that) though is that the buttons shouldn't appear like they're part of the post, that's why I proposed the title bar. I do have a similar mod installed (no G+ though), and it doesn't seem like it slows page loading, to tell you the truth. If you want you can visit my site (under my avatar) to check it out.

Not sure about the title length, haven't encountered it yet :D But I think SMF has a limit that, used with most common resolutions, wouldn't matter for the buttons...?

Anyhow, thanks for your mod, it's something sorely missing :)

PokémonS

Updated to v1.0.3a
- Fixed Tweet button (data-via & data-lang has been removed)

If you want to update this mod, please uninstall the previous version, and then install the latest version.
きみと手をつなごう つらいときはもっと
ゼロからはじめよう ほら ほら 手をつなごう
みんな手をつなごう つらいときはもっと
力を合わせよう ほら ほら 手をつなごう

dmask

hi, nice you fixed the "via" ;)

like i said here: http://www.simplemachines.org/community/index.php?topic=494109.msg3465057#msg3465057
with a little modification i was able to insert the adsense banner below the first post of a topic following how this mod works.

just find this
// Show Google +1 icon in the first post
if (!empty($modSettings['googleplus_plusone'])) {
echo '
<div class="g-plusone" data-size="medium"></div><script type="text/javascript">(function() {var po = document.createElement("script"); po.type = "text/javascript"; po.async = true;po.src = "https://apis.google.com/js/plusone.js";var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(po, s);})();</script>';
}

echo '
</div>
<br />

insert below
<div style="text-align:center; margin:5px;" >
<div style="margin:auto">
<script type="text/javascript"><!--
google_ad_client = "<<<<< YOUR ADSENSE ID HERE >>>>>";
/* Da post */
google_ad_slot = "<<<< unique slot number >>>>";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
</div>';

attention for the GOOGLE_AD_CLIENT ad GOOGLE_AD_SLOT, look the code please.

in this way you will have:
facebook like - twitter - google+
<adsense banner> (468x60 in my case)

its a good mod, nice work PokémonS ;)

impreza

Very good addition, at the end of something good
Portal ToTemat.pl - treści w postaci artykułów i filmów tematycznych.

khanahmedabbas

i downloaded this mod but where to upload the files ? into which directory ?

NanoSector

My Mods / Mod Builder - A tool to easily create mods / Blog
"I've heard from a reliable source that the Answer is 42. But, still no word on what the question is."

NightzKung

#15
Thankkkk for Mod!  ;D 

ubaidchaudhary

Quote from: PokémonS on January 02, 2013, 01:42:20 PM

Add Facebook Like, Tweet, and Google +1

Description
This mod adds Facebook Like, Twitter Tweet, and Google +1 to the first post which placed at the bottom.

How it works
Install this mod. Go to Administration Center » Configurations -> Modification Settings -> Miscellaneous to setting this mod. Please tick Enable socialization button (Facebook, Twitter, and Google+) first!

You can tick:
- Enable socialization button (Facebook, Twitter, and Google+)

Where we can upload a mod file..??
And you said ''enable socialization buttons''
Where from we can enable socialization buttons ...???/

NanoSector

Quote from: ubaidchaudhary on January 28, 2013, 10:27:37 AM
Quote from: PokémonS on January 02, 2013, 01:42:20 PM

Add Facebook Like, Tweet, and Google +1

Description
This mod adds Facebook Like, Twitter Tweet, and Google +1 to the first post which placed at the bottom.

How it works
Install this mod. Go to Administration Center » Configurations -> Modification Settings -> Miscellaneous to setting this mod. Please tick Enable socialization button (Facebook, Twitter, and Google+) first!

You can tick:
- Enable socialization button (Facebook, Twitter, and Google+)

Where we can upload a mod file..??
And you said ''enable socialization buttons''
Where from we can enable socialization buttons ...???/
http://wiki.simplemachines.org/smf/Package_manager
My Mods / Mod Builder - A tool to easily create mods / Blog
"I've heard from a reliable source that the Answer is 42. But, still no word on what the question is."

MrTuborgDK

Hey, first of all i love this mod.....but i want so ask about something.....when i "like" a post and i see it at my Facebook activity...it are just showing a random photo there have npthing with post to do....

And sry for bad English..it are not my first speaking....;-)

PokémonS

Quote from: MrTuborgDK on February 02, 2013, 04:03:46 PM
Hey, first of all i love this mod.....but i want so ask about something.....when i "like" a post and i see it at my Facebook activity...it are just showing a random photo there have npthing with post to do....

And sry for bad English..it are not my first speaking....;-)

First, Welcome to SMF Forum! Thanks for download my mod :)

If you don't want your thumbnail FB gets random, put this code to the <head> in index.template.php file:
<link rel="image_src" href="http://YOURTHUMBNAILFBHERE.png" />
きみと手をつなごう つらいときはもっと
ゼロからはじめよう ほら ほら 手をつなごう
みんな手をつなごう つらいときはもっと
力を合わせよう ほら ほら 手をつなごう

Advertisement: