in

How to add Facebook and Twitter buttons to features, teasers, and full articles using hooks

Recently I was redesigning this blog and came to the conclusion that I wanted to have easily accessible Facebook and Twitter share buttons for each post. As I was looking for information on how to install the new Twitter button on WordPress I realized that the new Twitter sharing button came out somewhat recently and there weren’t very many resources on how to install the button on my type of site yet. I decided to write a tutorial to help people add the Facebook and Twitter sharing buttons to the WordPress Thesis theme using hooks. Smile

I have WordPress 3.01 and Thesis 1.8. These instructions may work with other versions, but I don’t know if they do or not…

To make sure the buttons fit the page properly you may need to set these options

Thumbnails 112px wide or smaller
Under wp-admin > Thesis > Design Options > Default Thumbnail Settings > I have horizontal position set to left with text wrap. Vertical position is set to before post/page content. Default thumbnail width is 112, default thumbnail height is 84. (the buttons will fit if you have smaller thumbnails or no thumbnails)

Content Column width of at least 580px
Under wp-admin > Thesis > Design Options > Site layout > Make sure content column is set to 580px or larger.

Edit your custom_functions.php file and add the following code (it should be located at /wp-content/themes/thesis_18/custom/custom_functions.php)


add_action(‘thesis_hook_before_post’,’facebook_like_button’);
add_action(‘thesis_hook_before_post’, ‘tweet_button_left’);
add_action(‘thesis_hook_before_teaser’,’facebook_like_button1′);
add_action(‘thesis_hook_before_teaser’, ‘tweet_button_left1’);


/* FACEBOOK BUTTON INSIDE POST BOX (facebook_like_button) */
function facebook_like_button(){
global $post;
?>

}


/* TWITTER BUTTON INSIDE POST BOX (tweet_button_left) */
function tweet_button_left() {
if(!is_page()){
?>

}


/* FACEBOOK BUTTON INSIDE TEASER BOX (facebook_like_button1) */
function facebook_like_button1(){
?>

}


/* TWITTER BUTTON INSIDE TEASER BOX (tweet_button_left1) */
function tweet_button_left1() {
?>

}

 


I think that is all you need to do. You may want to customize the div for each button. Also the twitter button width is actually 110px, but loads it as 100px in the post, and 80px in the teaser so it fits. This makes it slightly outside the template with 580px content width; If you have more space I would recommend setting the width for it to 110px.

Customize the code for different configurations

If you want to add just the Facebook or Twitter button by themselves
If you only want the Facebook buttons you would use the two add_action hooks that say: facebook_like_button, and facebook_like_button1, and add the two pieces of code that start with /* FACEBOOK BUTTON INSIDE POST BOX */, and /* FACEBOOK BUTTON INSIDE POST BOX *\ to your custom_functions.php. If you only want the twitter buttons do the same thing but only use the two add_action hooks and two codes for Twitter.

*You will probably need to adjust the div settings when using just the Facebook or Twitter buttons alone.

9 Comments

Leave a Reply
  1. Hiya, thanks a bunch for this code. This is exactly what I was looking for. Unfortunately, every time I copy and paste it into my custom.php file, my site crashes. Says there’s a parse error. It’s an easy fix on my end (I backup custom.php file) but I’d love to know how to add these codes. Any suggestions? Thank you.

    • These codes are supposed to be added to the custom_functions.php which is located in the same directory as custom.php. Try adding the codes to custom_functions.php and see if that works… If not post another comment and I will try to help you get it working…

  2. Hi, sorry that’s what I meant… that I added it to the custom_functions.php directory. I’d appreciate any help. Thank you!

    • I looked at the code today and found two things that could have caused the error for you… Your custom_functions.php should have: “<?php" at the beginning of it before any other codes, and also you might need to remove one of the "}" from the end of the code to make it work… Hope this helps Smile

  3. I think your challenge there is that you are trynig to implement something that is developed for client side (tracking an event using GA’s javascript) into something that is server side (a php action wpmem_post_register_data is an action hook, not a filter hook). You would probably need to focus on adding an event tracking javascript to the registration form itself, such as adding the onClick action to the form submission process. You could do that with the wpmem_register_form filter hook.

Leave a Reply to Inalberto Cancel reply

Your email address will not be published. Required fields are marked *

Click to Insert Smiley
SmileBig SmileGrinLaughFrownBig FrownCryNeutralWinkKissRazzChicCoolAngryReally AngryConfusedQuestionThinkingPainShockYesNoLOLSillyBeautyLashesCuteShyBlushKissedIn LoveDroolGiggleSnickerHeh!SmirkWiltWeepIDKStruggleSide FrownDazedHypnotizedSweatEek!Roll EyesSarcasmDisdainSmugMoney MouthFoot in MouthShut MouthQuietShameBeat UpMeanEvil GrinGrit TeethShoutPissed OffReally PissedMad RazzDrunken RazzSickYawnSleepyDanceClapJumpHandshakeHigh FiveHug LeftHug RightKiss BlowKissingByeGo AwayCall MeOn the PhoneSecretMeetingWavingStopTime OutTalk to the HandLoserLyingDOH!Fingers CrossedWaitingSuspenseTremblePrayWorshipStarvingEatVictoryCurseAlienAngelClownCowboyCyclopsDevilDoctorFemale FighterMale FighterMohawkMusicNerdPartyPirateSkywalkerSnowmanSoldierVampireZombie KillerGhostSkeletonBunnyCatCat 2ChickChickenChicken 2CowCow 2DogDog 2DuckGoatHippoKoalaLionMonkeyMonkey 2MousePandaPigPig 2SheepSheep 2ReindeerSnailTigerTurtleBeerDrinkLiquorCoffeeCakePizzaWatermelonBowlPlateCanFemaleMaleHeartBroken HeartRoseDead RosePeaceYin YangUS FlagMoonStarSunCloudyRainThunderUmbrellaRainbowMusic NoteAirplaneCarIslandAnnouncebrbMailCellPhoneCameraFilmTVClockLampSearchCoinsComputerConsolePresentSoccerCloverPumpkinBombHammerKnifeHandcuffsPillPoopCigarette

Loading…

0

Get Trippy Psychedelic Posters made by Web420.com

75 New Psychedelic VW Vans