adding twitter/instagram buttons

• 

  faofoodlovers · Member · Jul 25, 2014 at 11:29 pm

  • Copy link
  • Add topic to favorites

  Hi
  Im new to wordpress and have just made my first post.

  How can I add twitter and instagram buttons to my page? id like them at the top, near the header image

  Thanks

  The blog I need help with is: (visible only to logged in users)

• 

  francisbob · Member · Jul 25, 2014 at 11:40 pm

  • Copy link

  Hi !

  You can add these buttons linking to your profile easily, but they’ll be at the footer (but easily seen!)

  In the Illustratr Theme Page they explain how to use the social icons here : http://theme.wordpress.com/themes/illustratr/ , scroll down and you’ll find this section :

  Social Icons

  Illustratr allows you display links to your social media profiles, like Twitter and Facebook, as icons using a custom menu.

  Hope this helps !

• 

  faofoodlovers · Member · Jul 25, 2014 at 11:53 pm

  • Copy link

  Thanks for your help!

  Ive managed to link both my twitter and instagram, they are showing as words though, not as icons.

  I did click social menu so im not sure whats gone wrong?

• 

  francisbob · Member · Jul 25, 2014 at 11:57 pm

  • Copy link

  You checked both ;)

  If you look at the end of the page, you see the two icons. You need to make a new menu that will be for the ‘Primary Menu’

  Some more information for you ! : http://en.support.wordpress.com/menus/

• 

  faofoodlovers · Member · Jul 26, 2014 at 6:39 am

  • Copy link

  Oh I see! I think I’ve done it now, thanks

  Is there no way to gets the icons at the top of the page though?

• 

  francisbob · Member · Jul 26, 2014 at 7:14 am

  • Copy link

  Unfortunately no you can’t, doing that would imply modifying the PHP code, and that’s not possible for security reasons.

  From a design point of view, having the menu AND social icons on top would feel overwhelming. http://lapresse.ca , http://newegg.ca, http://wordpress.org are a few examples putting social in the footer. (Normally you want to bring traffic to your site, not Twitter or Instagram, they have enough ;) )

  Anyway, last part is my opinion, I may not be right :)

• 

  faofoodlovers · Member · Jul 26, 2014 at 7:18 am

  • Copy link

  Ok well thank you for your help :)

• 

  francisbob · Member · Jul 26, 2014 at 7:29 am

  • Copy link

  No problem ! Good night.

• 

  thesacredpath · Member · Jul 27, 2014 at 3:38 am

  • Copy link

  Hi @faofoodlovers, you can add social media buttons to a primary menu at the top by creating a primary menu and assigning it to that location with Custom Links to the social sites in that menu. Images can then be added to those menu items.

  If you want to give this a try, Create the Custom Menu and the Custom Links and upload the images you wish to use to your media library and then post back here and we can help you with the code.

• 

  francisbob · Member · Jul 27, 2014 at 4:11 am

  • Copy link

  I’m curious to find out how you’ll insert images using only CSS ! Can’t wait :P

• 

  francisbob · Member · Jul 27, 2014 at 4:42 am

  • Copy link

  @thesacredpath : Nevermind, found how ! However, I have a small question.

  Would it be better to use the specific menu item like that :

  #menu-item-43 > a::before{
     content:url(http://linkofimage);
  }

  Or assign a class to the menu item through ‘Screen Options’ then using something like that ? (I guess it would work better since you can reuse easily in case you erase the menu item)

  .twitter-menu > a::before{
     content:url(http://linkofimage);
  }

• 

  thesacredpath · Member · Jul 27, 2014 at 4:46 am

  • Copy link

  @francisbob, Great job!

  I would use the menu item. Generally I do it with a background image instead of using content: url(), but either will work. content: url() could be a cleaner way of doing things and may actually require less code. I’ve been meaning to play with that method, but haven’t had the time.

  Go for it and I can then learn from you! :)

• 

  faofoodlovers · Member · Jul 27, 2014 at 10:56 am

  • Copy link

  Hi
  Ive made the menu at the top and added Twitter and Instagram, ive also uploaded images for them both.

  What do I do next?

  Thanks for your help!

• 

  francisbob · Member · Jul 27, 2014 at 5:22 pm

  • Copy link

  First, @faofoodlovers, I’m sorry I told you it wasn’t possible, it never occured to me before since I never used CSS to insert text and/or images before..

  Are the height of your images small ? if you want to follow the height of the reste of the texte of the menu, I would suggest a 20px height.

  Once this is done, can you give us the links ?

• 

  faofoodlovers · Member · Jul 27, 2014 at 6:37 pm

  • Copy link

  Ive just made them smaller, I think they were 80px orignally.

  https://faofoodlovers.files.wordpress.com/2014/07/instagram20p.png
  https://faofoodlovers.files.wordpress.com/2014/07/twitter20p.png

  original size
  http://faofoodlovers.files.wordpress.com/2014/07/twitter.png
  http://faofoodlovers.files.wordpress.com/2014/07/instagram.png

  Thanks

• 

  francisbob · Member · Jul 27, 2014 at 6:52 pm

  • Copy link

  Enter this !

  #menu-item-46{
      font-size:0;
  }
  #menu-item-46 > a::before{
      content:url(https://faofoodlovers.files.wordpress.com/2014/07/instagram20p.png);
  position:relative;
  top:5px;
  }
  
  #menu-item-45{
      font-size:0;
  }
  #menu-item-45 > a::before{
      content:url(https://faofoodlovers.files.wordpress.com/2014/07/twitter20p.png);
  position:relative;
  top:5px;
  }

  Should work nice !

  @thesacredpath: I know there is a possibility of using height/width, but these parameters don’t work well in Firefox.

• 

  faofoodlovers · Member · Jul 27, 2014 at 7:07 pm

  • Copy link

  I cant find the section where I add the code to.

  Is it the bit in Appearance on the dashboard that you pay for? or am I missing it somewhere else?

• 

  francisbob · Member · Jul 27, 2014 at 7:09 pm

  • Copy link

  Yes you need to pay for the Custom Design Upgrade, you can learn more about it here : http://en.support.wordpress.com/custom-design/