As you are no doubt aware, there are hundreds (if not thousands) of plugins available to WordPress users that enable us to enhance our websites with those nifty little social media share buttons that we’ve all come to know and love.
In searching for the perfect social media share button solution, we’ve tried a number of different options and, yes, the majority of them work pretty much as advertised.
One thing we have noticed, however, is that none of these plugins (of the ones we’ve tried anyways) seem to take into account the fact that different social media sites each have their own unique requirements & recommendations regarding stuff like optimum image sizes & dimensions etc.
Now, I guess you can get away with sharing a 1200 x 630 Facebook-optimized graphic on Twitter, or vice versa — at least the image dimensions are kind of in the same ball park.
Pinterest, however, is a whole different story. Over there, it’s all about ‘tall’ graphics. Posting a landscape format 1200 x 630 pic there just ends up looking, well, kinda goofy.
UPDATE: Apparently, 1000 x 1500 (2:3 aspect ratio) is now optimal size for Pin Graphics. Read this for more about the currently recommended specifications.
So, I guess the burning question of the day is as follows: Is it actually possible to do Pinterest-friendly share images in WordPress?
Rather than wasting a whole lot of time hunting for that elusive ‘magic bullet’ plugin that may or may not even exist, we decided we’d try and devise some kind of a work-around that’ll deal with this limitation…
Before we get started, though, be forewarned that if you decide you’re going to attempt what follows, you’ll probably want to do so using a child theme rather than mucking around with your parent theme files (actually we’re only going to be editing our header.php file here, but best practice suggests we should go the child theme route).
So, moving right along, what we’re going to try and do here is fix it so that each and every Pinterest button on our site shares a unique & specific image of our choosing.
Now, on this site, we’re currently using the Social Share module of the Orbit Fox plugin to display our share buttons. Decent plugin, for sure, but with one fairly annoying limitation : there’s apparently no way of choosing which image to share on Pinterest — you’re basically stuck with whatever your page/post’s default image has been set to, and in our case, unfortunately, it’s not exactly what you’d call Pinterest-friendly. Anyways, let’s see if we can come up with a fix…
Step One: Create a few Pinterest-friendly share graphics (as mentioned, 1000 x 1500) and upload them to your host server (we created an ‘images’ folder in our WordPress uploads directory specifically for this project).
Step Two: Point your browser to a page or post on your site and do a right click > View Page Source. Then, find the HTML source of your social buttons — in our case, it looks something like this (cleaned up a little for clarity’s sake):
<ul class="obfx-sharing obfx-sharing-left obfx-sharing-bottom"> <li class=""> <a class = "facebook" href="https://www.facebook.com/sharer.php?u=https://www.mywebsite.com/wordpress/my-latest-post/"> <i class="socicon-facebook"></i> </a> </li> <li class=""> <a class = "twitter" href="https://twitter.com/intent/tweet?url=https://www.mywebsite.com/wordpress/my-latest-post/&text=My%20Latest%20Post&hashtags=Uncategorized"> <i class="socicon-twitter"></i> </a> </li> <li class=""> <a class = "pinterest" href="https://pinterest.com/pin/create/bookmarklet/?media=https://www.mywebsite.com/wordpress/wp-content/uploads/2019/05/featuredImage.jpg&url=https://www.mywebsite.com/wordpress/my-latest-post/&description=My%20Latest%20Post"> <i class="socicon-pinterest"></i> </a> </li> <li class=""> <a class = "reddit" href="https://reddit.com/submit?url=https://www.mywebsite.com/wordpress/my-latest-post/&title=My%20Latest%20Post"> <i class="socicon-reddit"></i> </a> </li> </ul>
Keep in mind that the HTML structure and class names etc. may be different for you depending entirely on which social media share plugin you have installed (as mentioned earlier, we’re using Orbit Fox). The actual code that links to the various social media sites, however, is pretty much standardized, so you should be able to figure it out without too much trouble.
So now, let’s focus our attention on the code of our Pinterest button, specifically the part that determines which image actually gets shared on Pinterest. Here it is, highlighted:
…?media=https://www.mywebsite.com/wordpress/wp-content/uploads/2019/05/featuredImage.jpg
Sure enough, it defaults to our page’s featured image. Can we change it? Proceed to Step Three.
Step Three: Since WordPress comes with a version of the jQuery library pre-installed, perhaps we could try and get that to work for us. Let’s edit our child theme’s header.php file and insert the following, just before the closing </head> tag:
<script>
/** change orbit fox pinterest href **/
jQuery( document ).ready( function() {
jQuery('.obfx-sharing li a').each(function() {
/** pinterest URL **/
var pinPath = "https://pinterest.com/pin/create/bookmarklet/";
/** path to our page **/
var thisPage = "https://www.mywebsite.com/wordpress/my-latest-post/";
/** path to our new image **/
var imgPath = "https://www.mywebsite.com/wordpress/wp-content/uploads/images/";
/** new image file name **/
var pinImg = "pinFriendly.jpg";
/** new description **/
var pgDesc = "Pinterest-Friendly!";
jQuery('.obfx-sharing li a').each(function() {
jQuery('.pinterest').attr('href', pinPath + '?media=' + imgPath + pinImg + '&url=' + thisPage + '&description=' + pgDesc);
});
});
});
</script>
Give it a quick test and… Yes! It works! Basically, this script goes through each of the list items contained in the parent ‘obfx-sharing’ UL and looks for an item containing an anchor tag that uses the ‘.pinterest’ class. When it finds what it’s looking for, it replaces the href attribute with a URL string that uses our newly-declared variables (i.e. path, filename etc.).
Note that the version of jQuery WordPress uses runs in compatability mode, so the widely-used shortcut $(…) isn’t going work — we have to use jQuery(…) instead. Kind of a pain, but whatever.
OK, so we’ve managed to change the graphic that our button shares on Pinterest. But wait… We’re still in the same boat as before, aren’t we? Every Pinterest button on our site will STILL be sharing the exact same image. It would seem that there’s a little more to be done here before we can call it a day. Proceed to Step Four…
Step Four: Now we need to fix it so that the Pinterest button on each page/post of our site has a unique share image associated with it. Let’s try and add a little PHP and see if that’ll work…
<?php
/** declare variables **/
$pgID = get_the_ID();
$pgURL = wp_get_canonical_url( $pgID );
$pgDesc = rawurlencode(get_the_title());
/** build an array with wp page ids & assign a share graphic to each id **/
$sitePages = Array (
'0' => Array ( 'id' => '1001', 'image' => 'pinFriendly001.jpg' ),
'1' => Array ( 'id' => '1002', 'image' => 'pinFriendly002.jpg' ),
'2' => Array ( 'id' => '1003', 'image' => 'pinFriendly003.jpg' ),
'3' => Array ( 'id' => '1004', 'image' => 'pinFriendly004.jpg' ),
'4' => Array ( 'id' => '1005', 'image' => 'pinFriendly005.jpg' )
);
/** check if the current page id is in the array **/
if(array_search($pgID, array_column($sitePages, 'id')) !== False) {
foreach ($sitePages as $key=>$item) {
/** if we have a match, create a variable using the corresponding image */
if($item['id']==$pgID) {
$pinShare = $item['image'];
}
}
} else {
/* if the current page id is not in the array, go with a default image **/
$pinShare = 'pinFriendlyDefault.jpg';
}
?>
<script>
/** our original jQuery script, with a few modifications **/
jQuery( document ).ready( function() {
jQuery('.obfx-sharing li a').each(function() {
/** pinterest URL **/
var pinPath = "https://pinterest.com/pin/create/bookmarklet/";
/** path to our image directory **/
var imgPath = "https://www.mywebsite.com/wordpress/wp-content/uploads/images/";
/** path to our page **/
var thisPage = "<?php echo $pgURL; ?>";
/** new image file name **/
var pinImg = "<?php echo $pinShare; ?>";
/** new description **/
var pgDesc = "<?php echo $pgDesc; ?>";
jQuery('.obfx-sharing li a').each(function() {
jQuery('.pinterest').attr('href', pinPath + '?media=' + imgPath + pinImg + '&url=' + thisPage + '&description=' + pgDesc);
});
});
});
</script>
Let’s take a closer look at what’s going on in the above example. First, we use a couple of handy WordPress functions to create the variables we need:
- $pgID = get_the_ID(); grabs the ID of the current page.
- $pgURL = wp_get_canonical_url( $pgID ); grabs the URL of the current page.
- $pgDesc = rawurlencode(get_the_title()); grabs the title of the page (we’ll use that as our description).
Next, we build an array consisting of all the page id’s on our site and the Pinterest-friendly graphics we want to associate with the button on each page.
Then, PHP checks to see if the ID of the page we’re currently on is anywhere to be found in our array — if the ID is in the array, the appropriate image is assigned to the $pinShare variable. If the ID of the page we’re currently on is not found in the array, a default image will be used instead.
Finally, all we need to do is change the thisPage, pinImg and pgDesc variables in our original jQuery script so that they use the information that PHP grabbed for us:
- var thisPage = "<?php echo $pgURL; ?>"
- var pinImg = "<?php echo $pinShare; ?>"
- var pgDesc = "<?php echo $pgDesc; ?>"
And there you have it: every Pinterest button on our WordPress site now has a unique, Pinterest-friendly share image associated with it. All we need to remember to do is add a new item to the $sitePages array whenever we publish a new post. Even if we forget, we’re covered — a default image will be used instead.
