0

My website serves blank pages to "social" urls i.e. urls that start with "/social" as a path and originally generated by my app to share on FB and Twitter. Those served pages only include open graph and twitter meta tags in their head and a few lines of javascript to redirect the user to either a deep link to the app, iTunes, or the appropriate section of the website when they visit the page. I'm using this "technique" to avoid distracting my web server by serving unnecessary content (sometimes significantly large amounts of content) to social media (Twitter/Facebook) whereas all they really need to represent data is just meta tags.

My shared social links are successfully tested on both Facebook and Twitter online validators. They're also presented as expected on both FB and Twitter timelines when shared from the app, but the only problem I'm having is SLComposeViewController twitter dialog which displays a blank image preview (as a preview of my blank page I guess) when the user is prompted to enter his tweet. Also neither the title nor the description (from the url page meta tags) are pre-rendered in the tweet dialog, which might give the impression of something wrong to the user and potentially canceling his tweet. If the user decides to post the "miss-previewed" tweet though, everything goes well and the card displays on his timeline properly.

I'm experiencing the preview problem only with the Twitter dialog, with Facebook the post preview is presented as expected to the user before he validates his post.

Here's what a curl output of a social url to my website looks like:

<html> 
    <head>   
        <title>My Great Title</title>

        <meta property="og:title" content="My Great Title" />
        <meta property="og:description" content="Some Description" />
        <meta property="og:url" content="current-url" />
        <meta property="og:type" content="website" />
        <meta property="og:image" content="http://url-to-an-image"/>
        <meta property="og:image:type" content="image/jpeg" />
        <meta property="og:image:width" content="1200" />
        <meta property="og:image:height" content="627" />

        <meta name="twitter:card" content="summary_large_image">
        <meta name="twitter:title" content="My Great Title">
        <meta name="twitter:description" content="Some Description">
        <meta name="twitter:site" content="@twitteraccount">
        <meta name="twitter:image" content="http://url-to-an-image">

        <script type="text/javascript" src="/path-to-my-redirecting-javascript"></script>
    </head>
    <body>
    </body>
    </html>

Here's the code I'm using from my app to display SLComposeViewController:

-(void)shareOnSocialMediaWithServiceType:(NSString *)serviceType
{
    if ([SLComposeViewController isAvailableForServiceType:serviceType]) {

        SLComposeViewController *mySLComposerSheet = [SLComposeViewController composeViewControllerForServiceType:serviceType];

        [mySLComposerSheet addURL:[NSURL URLWithString:@"http://social-url-to-my-website"]];

        [mySLComposerSheet setCompletionHandler:^(SLComposeViewControllerResult result) {

            switch (result) {
                case SLComposeViewControllerResultCancelled:
                    NSLog(@"Post Canceled");
                    break;
                case SLComposeViewControllerResultDone:
                    NSLog(@"Post Sucessful");
                    break;

                default:
                    break;
            }
        }];

        [self presentViewController:mySLComposerSheet animated:YES completion:nil];
    }
}

What am-I missing to make the twitter dialog preview the post properly?

ALTN
  • 659
  • 9
  • 26
  • check it from http://stackoverflow.com/a/22963277/3388012 – Rushi trivedi Jan 27 '16 at 06:01
  • @Rushi Not really what I'm looking for, I do not want to bundle the images in my app, I want them to be auto scraped from the url. Also my code above works perfectly with Facebook, it only has a problem with the Twitter compose dialog. – ALTN Jan 27 '16 at 10:28
  • Did you check condition for twitter if ([SLComposeViewController isAvailableForServiceType:SLServiceTypeTwitter]) { } ? – Rushi trivedi Jan 27 '16 at 10:36
  • @Rushi Absolutely, the parameter serviceType in my code above is equal to SLServiceTypeTwitter when I share on Twitter. I reiterate the dialog shares successfully on Twitter (the card displays properly in the timeline) when the user clicks the post button. The only problem is the preview before the post; neither the title, nor the description, nor the image are pre-rendered in the tweet dialog which might give the impression of a bug to the user and potentially cause them to cancel the tweet. – ALTN Jan 27 '16 at 12:18

0 Answers0