I have a Drupal photography website. Images are important to me and no matter how hard I try, how hard I google, I couldn't get those images to work on Facebook Open Graph sharing.
I am using Drupal 7.14.
Users upload photos by using Plupload plugin.
Over-sized photos are automatically resized by Plupload resize function.
These photos are uploaded into a custom-directory. eg. sites/default/files/products/[user:id]/
The photos are thumbnailed and styled according to Drupal core styling. eg. sites/default/files/styles/large/
These photos are displayed in a overriden node page, which I have customized using Panels.
Drupal modules currently don't support Open Graph tags for Panels, so I created them myself using drupal_add_html_head.
// OG Image Tag
$node = node_load(%node:nid);
$user = $node->uid;
$filename = $node->field_product_photos['und'][0]['filename'];
$base_url = "http://www.[my-web-site].com/sites/default/files/styles/large/public/products";
$image_url = $base_url . "/" . $user . "/" . $filename;
// Thus $image_url outputs my full image url address. eg. http://www.[my-web-site].com/sites/default/files/styles/large/public/products/1/[IMAGE].JPG
$element = array (
'#tag' => 'meta',
'#attributes' => array(
'property' => 'og:image',
'content' => $image_url
),
);
require_once 'includes/common.inc';
drupal_add_html_head($element, 'og_image');
I use http://ogp.spypixel.com/Pogo/checker/index.php?url=http%3A%2F%2Fwww.feelsion.com%2Fproduct%2Fd700 to check my OG tags. og:title, og:image, og:url, og:description works like a charm with no problems.
However Facebook Debugger https://developers.facebook.com/tools/debug/og/object?q=http%3A%2F%2Fwww.feelsion.com%2Fproduct%2Fd700 returns only ONE problem. That is - Unable to download og:image: The image referenced by the url of og:image tag could not be downloaded.
I can confirm that ogp.spypixel.com/Pogo/checker/ could display my og:image and the image url is healthy.
I am using HTTP, so HTTPS bug for Facebook og:image is irrelevant.
I have ALT-txt for my images.
I have also included <link rel="image_src" href="[IMAGE_LINK]"into <HEAD>.
My image sizes fulfills Facebook's criteria. At least 200px for both dimensions and not more than 3:1 by proportion.
I have declared og:namespace in my page.tpl.php file.
xmlns:og="http://ogp.me/ns#
No matter how hard I Google and amend the codes and try new images. Facebook still never display my photos and returns the error as in note #9.
Image such as my website logo can be displayed in Facebook sharing. The only images not displaying is from the custom node page/panel.
I have tried to amend FTP permissions for the images but still failed.
I suspect that Plupload plugin is the culprit that the images it resize cannot be rendered by Facebook OG.
I also suspect that could be a case-sensitivity issues on the file name or on the extensions of the image.
I have worked more than 24 hours on this problem and hopes are fading. I am still hopeful that I can find my enlightenment on the problem here. Please do assist me if you know the solution or you are experiencing the same problem.
Thank you.
The problem above occurred because of a HTTP 500 Internal Server Error on the image.
The image appears well with internet browser but is inaccessible by search engine bots.
I have solved the problem by disabling Option FollowSymLinks in the .htaccess file in /public_html/sites/default/files/ folder.
To disable the option permanently, you have to erase the content of the .htaccess file while retaining the file itself in the folder.
Hope that helps, cheers.
Related
I am working SEO on wordpress, my goal is to rent out a page by using iframe to put my clients webpage all over mine, but in wordpress if I use iframe the toolbar and widgets remain there. Is there way of hiding everything and just leaving another web page on top of mine? Thank you for your time.
Please note that using an iframe might not contribute much in terms of SEO. Have a read through this article. What might be relevant:
iFrames are merely referencing the content, instead of duplicating it. When robots crawl the site and register the iframe tag, they will attribute the original source with any SEO credit instead of the page using the embedded content – i.e. the page with the iFrame.
That said:
To hide the admin toolbar, either disable it in your profile, via /wp-admin/profile.php. Or do this programmatically (in functions.php) with something like:
if (!is_admin) {
add_filter('show_admin_bar', '__return_false');
}
To remove widgets, try following the tutorial on justintadlock.com, in functions.php add something like:
add_filter( 'sidebars_widgets', 'disable_all_widgets' );
function disable_all_widgets( $sidebars_widgets ) {
$sidebars_widgets = array( false );
return $sidebars_widgets;
}
I use a CDN to serve my images, which I upload into Wordpress. My settings were:
It worked perfectly but it doesn't work anymore since I updated to Wordpress 4.5. This are my settings now:
This filter doesn't work either:
function my_cdn_upload_url() {
return 'http://media.mydomain.com';
}
add_filter( 'pre_option_upload_url_path', 'my_cdn_upload_url' );
Does anyone know how should I serve my images from a CDN?
Thank you.
Looks like you upgraded from quite an old WP version, didn't you? Uploads folder and path options were removed in Settings -> Media a long time ago.
So what does your real path for uploads look like? It's not a standard domain.com/wp-content/uploads// correct?
If yes - where do new images get uploaded to after the upgrade?
Try playing around with https://wordpress.org/plugins/custom-upload-dir/ and see if it helps get your images back to CDN.
The easiest way is editing the content of "upload_url_path" in the wp_options table:
upload_url_path > http://media.mydomain.com
Thank you!
The problem with the approaches above are you won't have file write permissions to upload images to your CDN.
Another approach is to upload all of your images to somewhere - e.g. Amazon S3, or keep them on affiliate network CDNs - and then store your image URLs in postmeta for your posts or products.
You then need to alter your theme files to pull the images from the postmeta fields instead of from the featured image or thumbnail fields.
FYI - this approach will massively speed up imports since WordPress will create multiple sizes of images using up CPU and disk space.
I created a plugin to solve this:
https://www.wpintense.com/product/external-images/
There is a hidden admin page where you can find all the options:
http://localhost/wp-admin/options.php
Find the upload_url_path option and set a value.
Note:
After you give it value, then the "Store uploads in this folder" which is the upload_path, and "Full URL path to files" which is the upload_url_path options will also appear on the Media Settings page:
http://localhost/wp-admin/options-media.php
The options only appear on the Media Settings page if a value is already set. This is the code in WordPress Core that defines how it works:
/*
* If upload_url_path is not the default (empty),
* or upload_path is not the default ('wp-content/uploads' or empty),
* they can be edited, otherwise they're locked.
*/
if ( get_option( 'upload_url_path' ) || get_option( 'upload_path' ) && 'wp-content/uploads' !== get_option( 'upload_path' ) ) :
BEST WAY is to use w3 total cache.
It has a built in cdn support and of course you can use it's main functionality , caching , most useful to speedup website.
I have done quite a bit of googling and have not found a simple solution for a method or a plugin to simply load a different static homepage for mobile devices. Is there a way to do this or a plugin that will do this (without revamping the whole site for mobile devices, as the mobile site style is good, but the specific static homepage is the only thing that I need changed). Wordpress CMS is the platform.
Thanks in advance!
Update:
So I installed the plugin suggested below, copied over an exact copy of the theme I am using but named it with 'mobile' in front just for reference, other than that everything is exactly the same. I read via google that I could add the following code into the functions.php theme file but it just shows up blank when I add the specific code. Code:
//Set Homepage
$mobilehome = get_page_by_title( 'mobilehome' );
update_option( 'page_on_front', $mobilehome->ID );
update_option( 'show_on_front', 'page' );
// Set the blog page
$blog = get_page_by_title( 'Blog' );
update_option( 'page_for_posts', $blog->ID );
Update 2, solved.
I found a simple solution. I created a new theme file 'page-home.php' and changed the css class '#primary' to '#primary-home', then went into the style.css file and added all '#primary-home' css attributes to match '#primary', except on the mobile CSS area of the stylesheet, I added "display:none;" to #primary-home. So now it just doesn't display the homepage on mobile devices, all other pages work (whole point in making the new template page and CSS attribute). I know this fix is probably the simple easy fix but it worked for me!
I found a simple solution. I created a new theme file 'page-home.php' and changed the css class '#primary' to '#primary-home', then went into the style.css file and added all '#primary-home' css attributes to match '#primary', except on the mobile CSS area of the stylesheet, I added "display:none;" to #primary-home. So now it just doesn't display the homepage on mobile devices, all other pages work (whole point in making the new template page and CSS attribute). I know this fix is probably the simple easy fix but it worked for me!
I think that this is as simple as it could get:
Try this plugin - UserAgent Theme Switcher
It will use the user-agent to detect which browser you are on, in this case it could be something like mobile safari or android, etc... then serve the theme based on that.
This could be a hit or miss because you might want or not to change the theme. A more advanced way to do this would be to use a jQuery plugin that checks for the user agent and lets you "do stuff" after you detect it, in this case it could serve as another page or change some CSS.
It's easy and no need to code everything. Install "Redirection" plugin from wordpress repository.
Go to the settings page.
Enter the "Source URL" with your default desktop's homepage
On the "Match" option, select "URL and user agent" & on the "Action" option select "Redirect to URL". Click "Add Redirection".
New configuration option will be appeared. Give any title you want. The "Source URL" must be blank (means that is your base homepage). On the "User Agent" option, choose whether iPhone or Android. On the "Matched" option, set the redirection you want for the mobile homepage.
Done!
You surely can differentiate the homepage on desktop and mobile device based on the redirection you have set before with that plugin. However, you cannot have same url name (ex: www.abcde.com for desktop & www.abcde.com/mobilehomepage for mobile device).
This is the open graph image I want to load on all my pages shared on Facebook. It is loading properly on some pages and on others it is choosing a random image from the page. Below is the OG URL. I am using Drupal CMS for my site. All the proper code seems in place.
http://www.vaeducationoxnard.com/sites/default/files/styles/square_thumbnail/public/Charter%20Square%20Logo.png
This is because, facebook sends the whole new request to the url you are passing and because of this it gets the image from og:image in which you have passed the default image. To overcome this, try to aadd the image parameter in the url you are passing
Ex. your/url?imgToShare=
And in the main page from where you set the meta tags, add one condition
<?php
if(isset($_REQUEST['imgToShare'])
{
<set the meta tags for image you want>
}
else
{
<meta tag with the default image>
}
?>
This helped me.
Please comment if you have any doubts.
I need to add an image to each page in WordPress.
I don't wish to insert it using the WYSIWYG editor, I just need the url as a custom field, which I later use in the template.
I tried using the CFI plugin (Custom Field Images), and I hacked my way into getting it to work with the rest of my plugins, but then I moved the site to the production server and CFI just didn't work for some reason.
I can't seem to find any other plugin that just lets you pick an image from the library and add it as a custom field.
I've downgraded to the point where I'm willing to manually enter all the URLs into each and every page. but before I do, I thought I'd check here.
Can anyone tell me what's the easiest, best way to add images as custom fields in WordPress (2.7.1 if it matters)?
In our WordPress template, each post generally only has one image 'attached', which is displayed outside the posts' (textual) content.
I simply upload the file using the edit posts' media uploader, never insert it into the post like JoshJordan above, then retrieve the image using a bit of code in the right place in my template file.
This would also work if you're using more than one image in your post, eg. in your post content. As long as you keep the image used as the 'main' post image as the first image (remember you can re-order images in your posts' image library by dragging them up and down), you're easily able to call it anywhere in your template file by using something like this:
<?php
$img_size = 'thumbnail'; // use thumbnail, medium, large, original
$img_id = $wpdb->get_var("SELECT ID FROM $wpdb->posts where post_parent= $post->ID and (post_mime_type = 'image/jpeg' OR post_mime_type = 'image/gif') and post_type = 'attachment'");
$img_array = wp_get_attachment_image_src($img_id,$img_size,false);
echo '<img src="'.$img_array[0].'"' title="'.get_the_title().'" />';
?>
No need for copying and pasting image urls.
The template I have uses a manually-entered custom field for the splash image of each post. When I'm done writing my article, I upload an image, copy its URL from the upload tool, never insert it into my post, and then paste that URL into the "Image" custom field. Simple as pie and takes only seconds. Insignificant compared to the amount of time it takes me to write an article.
You can use the custom key value fields on posts as well. let's say you always give your images the key 'thumb'. you can then use this code to output them in your post as a thumbnail:
<?php
$values = get_post_custom_values("thumb");
echo “<img src=\”$values[0]\” class=\”thumb\”></a>”; ?>
Consider using Flutter it's a bit tricky to figure out at first, and has many really useful featured, including EIP (edit in place), and image handling.
After installing the plugin create a new "Write Panel", you'll figure it out from there. The plugin provides you with a rather intuitive GUI, which includes an image uploader. The template tags are very easy to use, I believe it's something like
<?php echo get_image('name_of_field'); ?>
I just had to build a site for a client that needed the same feature, I ended up using Flutter.