Advertisement:
NameCheap

Author Topic: [TIP/TRICK] Adding Twitter and Facebook "Share/Like" Button To Posts  (Read 70854 times)

Offline zilladotexe

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 11,079
  • Gender: Male
    • zilladotexe on GitHub
    • @zilladotexe on Twitter
    • XboxLeaders.com
If you're like me, and just like having social media options on your site, well then check this out.

If you want to add quick social sharing buttons from Google, Facebook, and Twitter to all your posts, just add this code in your theme's Display.template.php. Note that if you have a custom theme without its own Display.template.php, you only need to modify the one in the default directory.

Code: (find) [Select]
<h3 class="catbg">
<img src="', $settings['images_url'], '/topic/', $context['class'], '.gif" align="bottom" alt="" />
<span id="author">', $txt['author'], '</span>
', $txt['topic'], ': ', $context['subject'], ' &nbsp;(', $txt['read'], ' ', $context['num_views'], ' ', $txt['times'], ')
</h3>
Code: (replace with) [Select]
<h3 class="catbg">
<img src="', $settings['images_url'], '/topic/', $context['class'], '.gif" align="bottom" alt="" />
<span id="author">', $txt['author'], '</span>
', $txt['topic'], ': ', $context['subject'], ' &nbsp;(', $txt['read'], ' ', $context['num_views'], ' ', $txt['times'], ')

<!-- Facebook -->
<span class="floatright" style="margin: 6px;" id="facebook">
<div id="fb-root"></div>
<fb:like href="', $scripturl, '?topic=', $context['current_topic'], '" send="false" layout="button_count" width="100" show_faces="false" font=""></fb:like>
</span>

<!-- Twitter -->
<span class="floatright" style="margin: 6px;" id="twitter">
<a href="http://twitter.com/share" class="twitter-share-button" data-url="', $scripturl, '?topic=', $context['current_topic'], '" data-text="CUSTOM_TWEET_TEXT" data-count="horizontal" data-via="PRIMARY_TWITTER_ACCOUNT" data-related="SECONDARY_TWITTER_ACCOUNT">Tweet</a>
</span>

<!-- Google Plus -->
<span class="floatright" style="margin: 6px;" id="gplus">
<div class="g-plusone" data-size="medium" data-annotation="inline" data-width="120" data-href="', $scripturl, '?topic=', $context['current_topic'], '"></div>
</span>
</h3>

Now, in order to use Facebook, Twitter, and Google Plus buttons, you'll need to add this to your index.template.php. You will need to modify this for every theme you wish to use the buttons on.

Code: (find) [Select]
function template_html_below()
{
global $context, $settings, $options, $scripturl, $txt, $modSettings;

echo '
</body></html>';
}

Code: (replace with) [Select]
function template_html_below()
{
global $context, $settings, $options, $scripturl, $txt, $modSettings;

echo '
<!-- Facebook Share -->
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>

<!-- Twitter Share -->
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

<!-- Google Plus -->
<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>

</body></html>';
}

You can replace the following vars with what you like:
CUSTOM_TWEET_TEXT = The text you want to tweet. Things such as "Check this out: ', $context['subject'], '" work nicely. You can alternatively leave it empty to use the page's title.
PRIMARY_TWITTER_ACCOUNT = The primary account you want to make the tweet via. Leave out the @.
SECONDARY_TWITTER_ACCOUNT = Same as above, but you can leave this one empty.

Screenshot:


It's that simple really. This is mainly for those who just want a quick hack without clouding up their installed mods list. :)

NOTE: This code is provided "as-is", and no support will be given as I do not have the time. Thank you for understanding :)
« Last Edit: June 10, 2012, 01:40:46 AM by JBlaze »
zilladotexe
Formerly known as "JBlaze"
Former Support & Customization     
Professional Bug Creator
Current Projects     
Xbox LIVE API
SM Classifieds
SimpleXBL
Important Links
Please, no PMs for support.
Unmanaged VPS Starting at $20/mo

Offline 4b11l

  • Jr. Member
  • **
  • Posts: 355
Re: [TIP/TRICK] Adding Twitter "Share" Button To Posts
« Reply #1 on: June 16, 2011, 06:38:12 PM »
Hello, does this tip only post to one account such as the website account? Or is it like other service where the user is able to login their details and post to their twitter?

Offline zilladotexe

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 11,079
  • Gender: Male
    • zilladotexe on GitHub
    • @zilladotexe on Twitter
    • XboxLeaders.com
Re: [TIP/TRICK] Adding Twitter "Share" Button To Posts
« Reply #2 on: June 16, 2011, 06:45:44 PM »
Hello, does this tip only post to one account such as the website account? Or is it like other service where the user is able to login their details and post to their twitter?
It allows you to input the account you wish for people to follow as well as a secondary account for people to follow. It does not however make tweets through any given account. It just allows member to tweet share the link.
zilladotexe
Formerly known as "JBlaze"
Former Support & Customization     
Professional Bug Creator
Current Projects     
Xbox LIVE API
SM Classifieds
SimpleXBL
Important Links
Please, no PMs for support.
Unmanaged VPS Starting at $20/mo

Offline 4b11l

  • Jr. Member
  • **
  • Posts: 355
Re: [TIP/TRICK] Adding Twitter "Share" Button To Posts
« Reply #3 on: June 16, 2011, 06:51:26 PM »
Ah, I see. Thanks.

Offline 4b11l

  • Jr. Member
  • **
  • Posts: 355
Re: [TIP/TRICK] Adding Twitter "Share" Button To Posts
« Reply #4 on: June 17, 2011, 02:36:54 AM »
I just tested it out and it was exactly what I was looking for! Thanks JBlaze, I think it was just that I didn't know how to explain it that I was confused in it's purpose.

It popped up a login for you to login your twitter details and it'll post to that account the custom message and link. I thought it automatically posted to the account listed as the primary.

Offline zilladotexe

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 11,079
  • Gender: Male
    • zilladotexe on GitHub
    • @zilladotexe on Twitter
    • XboxLeaders.com
Re: [TIP/TRICK] Adding Twitter "Share" Button To Posts
« Reply #5 on: June 17, 2011, 03:07:04 AM »
No problem :)
zilladotexe
Formerly known as "JBlaze"
Former Support & Customization     
Professional Bug Creator
Current Projects     
Xbox LIVE API
SM Classifieds
SimpleXBL
Important Links
Please, no PMs for support.
Unmanaged VPS Starting at $20/mo

Offline Kryzen

  • SMF Friend
  • SMF Hero
  • *
  • Posts: 3,682
  • Gender: Male
Re: [TIP/TRICK] Adding Twitter "Share" Button To Posts
« Reply #6 on: June 17, 2011, 04:47:55 AM »
Thanks for the tip JBlaze :)

Offline Masterd

  • SMF Hero
  • ******
  • Posts: 3,846
  • Gender: Male
  • Sapienti satis.
My Mods

Sugested that too. Hey ho. I'd link you to the original discussion but it's not visible to most people (seekrit team board stuff that is more dangerous than wikileaks).


Don't PM me for support! Use the appropriate support board!

It's the possibility of having a dream come true that makes life interesting.

Offline lucas-ruroken

  • SMF Hero
  • ******
  • Posts: 4,884
  • Gender: Male
  • Adk Developer
    • lucas.ruroken on Facebook
    • SMF Personal
Re: [TIP/TRICK] Adding Twitter "Share" Button To Posts
« Reply #8 on: June 19, 2011, 09:14:10 PM »
easy and useful ;) Thanks

Offline zilladotexe

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 11,079
  • Gender: Male
    • zilladotexe on GitHub
    • @zilladotexe on Twitter
    • XboxLeaders.com
Re: [TIP/TRICK] Adding Twitter and Facebook "Share/Like" Button To Posts
« Reply #9 on: June 22, 2011, 01:09:44 PM »
! Added Facebook Like button
zilladotexe
Formerly known as "JBlaze"
Former Support & Customization     
Professional Bug Creator
Current Projects     
Xbox LIVE API
SM Classifieds
SimpleXBL
Important Links
Please, no PMs for support.
Unmanaged VPS Starting at $20/mo

Offline Mbravo

  • Newbie
  • *
  • Posts: 1
Re: [TIP/TRICK] Adding Twitter and Facebook "Share/Like" Button To Posts
« Reply #10 on: July 01, 2011, 08:52:23 AM »
Thanks for increase my knowledge ,it such a wonderful idea for sharing.

Offline MarcusJ

  • Jr. Member
  • **
  • Posts: 162
  • Gender: Male
  • SMF Junkie
    • Simjunkies.org
Re: [TIP/TRICK] Adding Twitter and Facebook "Share/Like" Button To Posts
« Reply #11 on: July 01, 2011, 02:47:08 PM »
Can someone please explain how I can use the following from  or something similar to place the Google +1 button along side the Twitter and Facebook icons?  I have tried myself, but can't get it to work.   :-\

Also as a side note.  My forum is set to a fixed width of 1024px.  Any title with more than a few words causes the twitter button to vanish, but the Facebook like button remains.


Code: [Select]
if ($message['id'] == $context['topic_first_message'] )
{
echo '<g:plusone href="' . $scripturl . '?topic=' . $context['current_topic'] . '" size="small"></g:plusone>
<script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script>';
}
      



Offline 8hoursale

  • Newbie
  • *
  • Posts: 3
Re: [TIP/TRICK] Adding Twitter and Facebook "Share/Like" Button To Posts
« Reply #12 on: July 23, 2011, 10:19:42 AM »
I have SMF 1.1 and the Display Template looks a little different than this one does. Can this code be modified to work with 1.1?

Thank you!

Offline aelmiger

  • Jr. Member
  • **
  • Posts: 249
  • Gender: Male
    • Distrito Japonés
Re: [TIP/TRICK] Adding Twitter and Facebook "Share/Like" Button To Posts
« Reply #13 on: July 27, 2011, 12:17:20 AM »
Hello friend, thank you very much for any modification, but it happens that when I give a twitter, will not be adding the counter. How I can do to make this go adding the twitter done?

Thank you very much for the help

Sorry for my bad english

Offline mijo

  • Semi-Newbie
  • *
  • Posts: 54
Re: [TIP/TRICK] Adding Twitter and Facebook "Share/Like" Button To Posts
« Reply #14 on: August 01, 2011, 04:39:32 PM »
How to modify to make this work in 1.1.14 or is there some ready TIP to add Facebook Like button in 1.1.4..

Offline Monkey50

  • Jr. Member
  • **
  • Posts: 180
Re: [TIP/TRICK] Adding Twitter and Facebook "Share/Like" Button To Posts
« Reply #15 on: August 04, 2011, 12:09:21 PM »
how do i find the folder and how wouold i add google plus with that.

Online phantomm

  • Sr. Member
  • ****
  • Posts: 981
  • Gender: Male
    • pages/smfpl/171860759503032 on Facebook
    • Polish ElkArte community
Re: [TIP/TRICK] Adding Twitter and Facebook "Share/Like" Button To Posts
« Reply #16 on: August 05, 2011, 06:24:16 AM »
Nice tip, but i have one OT question. What's the name of this theme (from screenshot from first post) ?
Polskie wsparcie SMF na simplemachines.org

My mods

Offline zilladotexe

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 11,079
  • Gender: Male
    • zilladotexe on GitHub
    • @zilladotexe on Twitter
    • XboxLeaders.com
Re: [TIP/TRICK] Adding Twitter and Facebook "Share/Like" Button To Posts
« Reply #17 on: August 05, 2011, 06:52:31 AM »
Nice tip, but i have one OT question. What's the name of this theme (from screenshot from first post) ?
It's a modified version of Dziner's Inferno theme.

zilladotexe
Formerly known as "JBlaze"
Former Support & Customization     
Professional Bug Creator
Current Projects     
Xbox LIVE API
SM Classifieds
SimpleXBL
Important Links
Please, no PMs for support.
Unmanaged VPS Starting at $20/mo

Offline Hasanudin

  • Semi-Newbie
  • *
  • Posts: 24
Re: [TIP/TRICK] Adding Twitter and Facebook "Share/Like" Button To Posts
« Reply #18 on: August 07, 2011, 11:04:28 AM »
thank you :)

Offline globalwalyy

  • Newbie
  • *
  • Posts: 1
Re: [TIP/TRICK] Adding Twitter and Facebook "Share/Like" Button To Posts
« Reply #19 on: September 19, 2011, 05:08:48 AM »
hello thanks for this script, but i immediately i did this it destroy everything i have to rest it back pls help me out i think am lost somewhere