voala

Ok all.
I cracked it.

Recently I made a new website for a customer and hit the same issue with facebook like button not showing images from the post/pages. I spent a few nights and found the sollution.

Problem is this: Not from long time ago, facebook changed the way like button works. In order to have a facebook like button on your webpage you need to make an API on the developer section of facebook.

This is what i made:
1. I installed Facebook AWD All in One plugin. A great plugin for managing all facebook utilites. (Like Button, Like Box, Comments, Login Button)

2. After installing, the plugin requires setting up. You will be asked to insert a API id, Admin id, Page Admin id.

3. Ok. To build a new API to the following:
a. login with your facebook account
b. go to https://developers.facebook.com/apps
c. top right corner press Create new APP
d. you will be asked for the name of the app, link of website, description, etc.

4. In the bottom part you will have to select how this API will be used. Section is called: Select how your app integrates with Facebook. Here select Website

5. After API creation you will be provided with the API id, API secret (needed for Facebook Login).

6. Take all this information and insert in plugin settings. After that configure the rest of the FB utils (like button, like box, etc.)

The plugins uses OG tags, and has many options for ex to use custom tags for each page, or use global tags.

Very IMPORTANT: After doing changes to tags, you can test the way facebook shows the wall post from your website. You can load: https://developers.facebook.com/tools/debug

Keep in mind this: Facebook caches information recieved from your website. You need to clear the cache by loading the debugger above. If not after you make changes to OG tags, the wall post will look the same. This is maybe why none got any visible result after adding editing OG tags in theme header.php

For me it worked great. Now I can select the images i want to display from the page/post when making a wall post.
Waiting for your feedback.

really great to hear that.

How? I am really interested in this.
Are you referring to the list-style-image css rule applyed to the LI?

Wouldn’t this show in front of the LI element?

Ok.

The site you gave for reference used a manual made menu in the left. It is not auto-generated by wordpress if you understand what I mean. In your situation, the menu is generated by wordpress using te UL and LI tag elements.

For using a vertical separator you can only use solid, dotted, etc.. lines of various colors and widths attached as a CSS rule to your top-border of the LI element.

I think you have the same problem as here:
http://wordpress.org/support/topic/facebook-thumbnail-issue-really-need-some-help?replies=26

The difference is that the problem there are pictures not showing in Facebook posts to wall.

Take a look at what has been discussed there. Maybe it will help.

Can we see a link to your website to see the exact menu? I think this can be done by CSS.

I don’t understand. Do you want to display 2 different menus? One on the top and one at the bottom of the page?

Are you referring at the blue menu on top and the white menu just below the logo?

Ok, go to the css file of your theme. This is located in http://www.hostilegamer.com/wp-content/themes/news-leak/style.css

Open it and go to line 1301. There you will find:

#content p, #content ul, #content ol, #content dd, #content pre, #content hr {
    margin-bottom: 15px;
}

change to:

#content p, #content ul, #content ol, #content dd, #content pre, #content hr {
    margin-bottom: 15px;
    font-size:14px;
}

That should do the trick i think.