Facebook Link No Thumbnail

• 

  ssfdadmin · Member · May 4, 2015 at 5:43 pm

  • Copy link
  • Add topic to favorites

  Hi,

  When I share my blog to Facebook I get the title but no thumbnail. I’ve disconnected Sharing to Facebook and reconnected, I’ve also deleted WordPress and re-added it in Facebook APPS. I’ve ran my blog URL through the Facebook Debugger and it comes up with 2 warnings that should be fixed:

  Extraneous Property Objects of this type do not allow properties named ‘article:publisher’.

  Parser Mismatched Metadata The parser’s result for this metadata did not match the input metadata. Likely, this was caused by the data being ordered in an unexpected way, multiple values being given for a property only expecting a single value, or property values for a given property being mismatched. Here are the input properties that were not seen in the parsed result: ‘article:publisher’

  Here is a link to my blog:

  http://supersoulfrieddisco.com/

  I’ve tried searching the forums for a solution but I’m afraid I can’t find one.

  Can anyone help ?

  Thanks,
  M

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

• 

  lizthefair · Member · May 5, 2015 at 3:23 pm

  • Copy link

  Could you try this one more time? I just pasted a link to your site on my Facebook page and it worked as expected. If it still doesn’t work for you, let me know and we’ll look more closely.

• 

  ssfdadmin · Member · May 5, 2015 at 6:19 pm

  • Copy link

  Hi Liz, thanks for the reply. I think it was because Facebook couldn’t pull an image from the home page due to the size of the main image. So I added a smaller image on the page and now it works.

  Thank you
  Mark

• 

  lizthefair · Member · May 5, 2015 at 6:22 pm

  • Copy link

  Glad to hear you solved it. Let me know if you need anything else!

• 

  ssfdadmin · Member · May 5, 2015 at 6:42 pm

  • Copy link

  You might regret saying that lol jk Well ok, my site consists of static pages and category pages. My next dilemma is how do I create a custom header for the category pages instead of it being the generic home page header ?

• 

  lizthefair · Member · May 6, 2015 at 3:04 pm

  • Copy link

  My next dilemma is how do I create a custom header for the category pages instead of it being the generic home page header

  It’s not possible to change the custom header on category pages the same way you do it on static pages or posts.

  There is a somewhat advanced CSS option. The basic idea is to remove the header image on the category page and then give the space where the image was before a background image. Here’s the basic code:

  .header-img{
  	display:none;
  }
  .title-card{
  	background:url('Insert image URL');
  }

  If you add the code above to your CSS box it will change all of your headers. To get it to only impact an individual category page you have to find each page’s id.

  For example, I used the inspect element feature in Chrome to find that the page id for this page

  http://supersoulfrieddisco.com/category/features/

  is .category-9548

  so to change the header image on just that page you’d adjust your CSS to this:

  .category-9548 .header-img{
  	display:none;
  }
  .category-9548 .title-card{
  	background:url('Insert image URL');
  }

  I hope that helps! Let me know if you get stuck and I’ll be happy to get you pointed in the right direction.

• 

  ssfdadmin · Member · May 7, 2015 at 4:02 pm

  • Copy link

  Hi Liz,

  Many many thanks for that info that was really helpful and I’m very grateful. With your help I was able to change the header image on the Playlists category page but it seems that it hasn’t resized the image…

  Here is how it looks:

  http://supersoulfrieddisco.com/category/playlists/

  and here is how the header image should look:

  http://supersoulfrieddisco.com/2015/05/07/super-soul-fried-disco-on-d3ep-radio-network-ssfd32-290415/

  Regards,
  Mark

• 

  lizthefair · Member · May 7, 2015 at 4:56 pm

  • Copy link

  In order to make the headers look more similar we have to size the image on the category page. The header image does that automatically.

  here’s the code we started with:

  .category-9548 .title-card{
  	background:url('Insert image URL');
  }

  Once we add the new element it looks like this.

  .category-9548 .title-card{
  	background:url('Insert image URL');
          background-size: 1350px;
  }

  I played with the size of the image some and 1350px got the image pretty close, but you can make your own adjustments.

  Here’s more on how the background-size property works

  http://www.w3schools.com/cssref/css3_pr_background-size.asp

• 

  ssfdadmin · Member · May 8, 2015 at 8:19 pm

  • Copy link

  Thank you so much again Liz, very much appreciated.

  Ok I think instead of having listings of posts, I would rather have clickable/linked placeholders with both an image, link and text which takes you to that specific post. I’m pretty sure I’d need to use widgets but not sure if I need to use a text or image widget.

  For example, here is my current news page with 2 posts.

  http://supersoulfrieddisco.com/category/news/

  Instead of a continuous list of posts to scroll down I’d like to have placeholders as shown in this blog below.

  http://wundergroundmusic.com/category/newsfilth/

  Can you help me or direct me to a link which shows me how.

  Yours thankfully,
  Mark

• 

  lizthefair · Member · May 9, 2015 at 12:07 am

  • Copy link

  Take a look at this information about the display posts shortcode

  Display Posts Shortcode

  It’s not exactly the same as the site you linked to, but its closer to what you are looking for.

• 

  ssfdadmin · Member · May 11, 2015 at 9:49 pm

  • Copy link

  Hi Liz,

  I’m afraid I’m struggling with this section. I tried it but it just listed the posts in a bullet point list. Is there an easier way to have the post in a grid layout, eg 3 thumbnails across ?

• 

  ssfdadmin · Member · May 11, 2015 at 10:09 pm

  • Copy link

  Here’s what happened and I’m not sure how to erase it as I can’t see the code in my CSS…

  http://supersoulfrieddisco.com/2015/05/08/391/

• 

  ssfdadmin · Member · May 11, 2015 at 10:18 pm

  • Copy link

  I’ve posted 3 news items and given each one a featured image…

  http://supersoulfrieddisco.com/category/news/

  I’m trying to follow this article below as a way to use the same code for my news page but there’s quite a lot of code involved and I’m finding it somewhat confusing where to put it

  http://www.wpbeginner.com/wp-themes/how-to-create-a-grid-display-of-post-thumbnails-in-wordpress-themes/

• 

  lizthefair · Member · May 12, 2015 at 2:04 pm

  • Copy link

  Most of the work here is going to happen in the display posts shortcode, not in the CSS. The grid look is also not exactly what the final page will look like, but we will be able to create a category page with excerpts and thumbnail photos.

  I’m happy to help you walk through it. The first step is to create a test page where we can play with the short code. If you could set that up and let me know when it’s done, I’ll help you move to the next step.

  I’m trying to follow this article below as a way to use the same code for my news page but there’s quite a lot of code involved and I’m finding it somewhat confusing where to put it
  http://www.wpbeginner.com/wp-themes/how-to-create-a-grid-display-of-post-thumbnails-in-wordpress-themes/

  These are instructions for a self-hosted WordPress site. That’s why you can’t figure out where to put the code; WordPress.com sites don’t include access to the parts of a WordPress site where that would work.

• 

  ssfdadmin · Member · May 12, 2015 at 2:54 pm

  • Copy link

  Thank you so much Liz!

  Here is the Test Page…

  http://supersoulfrieddisco.com/test-page/

• 

  lizthefair · Member · May 12, 2015 at 3:19 pm

  • Copy link

  Using the instructions from the page listed below I added more detail to the shortcode.

  Display Posts Shortcode

  When you go to the test page you can see the code in the edit view and how it looks on the published page.

  Now that the base code on the page is there you can target the elements using CSS. I personally don’t know if it’s possible to get the posts to display in a grid rather than a list. I expect not, but it’s worth taking to the CSS forum to see if anyone there has ideas.

  https://en.forums.wordpress.com/forum/css-customization#postform

• 

  ssfdadmin · Member · May 12, 2015 at 3:48 pm

  • Copy link

  Hi Liz,

  How do I access the edit view ?

• 

  lizthefair · Member · May 12, 2015 at 4:38 pm

  • Copy link

  I meant open the page up in the page editor. Here’s a direct link from WP admin

  https://supersoulfrieddisco.wordpress.com/wp-admin/post.php?post=404&action=edit

• 

  ssfdadmin · Member · May 12, 2015 at 8:37 pm

  • Copy link

  Oh sorry I misunderstood.

  Ok I was able to get some more useful information about a feature in the Arcade theme that is called Post Block, which is a template you can select within the Page edit.

  Here is an example with Post Block selected…

  http://supersoulfrieddisco.com/test-page-2/

  Unfortunately, it still shows this list of posts which can be found on this post….

  http://supersoulfrieddisco.com/2015/05/08/391/

  Is it possible you can help me locate the code that is causing this ?

  Many thanks,
  Mark

• 

  ssfdadmin · Member · May 13, 2015 at 12:47 pm

  • Copy link

  Hi Liz,

  I was thinking it may just be easier to purchase another theme which has a grid format as functionality.

  What do you think of this one do you think it will cater for everything I need with respect to everything we’ve discussed ?

  http://www.elegantthemes.com/gallery/gleam/

  Mark